今日学习任务

  • [ ] 01-高阶函数

  • [x] a.掌握回调函数的作用和使用方式

  • [ ] 02-对象

  • [ ] a.理解对象数据类型

  • b.掌握对象的语法结构和使用方式
  • c.掌握对象的遍历方式

01-高阶函数(暂时了解)

1.1-arguments关键字

  • 1.arguments关键字：获取函数的所有实参

  • 2.为什么要有arguemnts关键字

    • js是一门弱语言：声明函数的时候假如只有一个形参，实际上在调用的时候无论我们传入多少实参程序都不会报错
    • 为了防止这种情况:函数有一个arguments关键字来获取所有的实参

  • 3.arguments特点

    • 1.只能在函数体中使用，在函数外使用会报错

    • 2.是一个特殊的数组（伪数组）

      • 有数组的三要素，但是没有数组其他的方法
    • 3.arguemngs数组中的元素与形参一一对应

  • 4.arguements好处:可以让函数变得更加灵活

    • 可以让函数根据实参的不同而实现不同的功能
  1. <script>
  2.     /**arguments关键字作用：获取函数的所有实参
  3.      * 本质：当前函数的内置对象，每一个函数都有一个arguments对象，作用是存储调用者传递过来的所有实参
  4.      * 特点：1.只能在函数体中使用，函数外部使用会报错
  5.      *          2.是一个特殊的数组（伪数组）
  6.      *          3.arguments伪数组的元素与形参一一对应
  7.      *
  8.      * 说明：1.可以用函数变得更加灵活
  9.      *           2.arguments是一个伪数组
  10.      *              * 伪数组：只有数组的下标、元素、长度，没有数组其他方法
  11.      */
  12.     /**一：argument用法演示*/
  14.     //1.这行代码会报错，因为函数外部无法使用arguments
  15.     // console.log ( arguments );
  17.     //2.定义一个无参的函数，作用是打印该函数的所有参数
  18.     function fn ( num1 ) {
  20.         //(1)arguemnt保存的是所有的实参的值
  22.         // console.log ( num1 );
  23.         // console.log ( arguments );//arguments只能在函数内部使用
  25.         //(2)arguemnt与形参是一一对应的
  27.         //修改了形参，arguemnt也会修改
  28.         num1 = 100;
  29.         console.log ( arguments );//修改了形参，arguments也会修改
  31.         //反之，修改了argeumnts，形参也会变化
  33.     }
  35.     fn(10,20);//实参与形参一一对应
  38.     /** 二：arguments实际用途展示：求不确定数量的参数的和 */
  39.     function add() {
  40.         //定义变量保留数据
  41.         let sum = 0;
  42.         console.log(arguments);
  44.         //有参数：遍历数组统计结果
  45.         for (let i = 0; i < arguments.length; i++) {
  46.             // 防止字符串和其他类型乱入，需要做安全判定
  47.             let value = arguments[i];
  49.             if (isNaN(value)) {
  50.                 return false;
  51.             }
  53.             //说明value肯定是数值了，但是还要保证不是字符串（影响+号运算）
  54.             sum += Number(value);
  55.         }
  57.         return sum;
  58.     }
  60.     console.log(add());
  61.     console.log(add(100));
  62.     console.log(add(10,20));
  65. </script>

1.2-回调函数

  • 1.什么是回调函数：如果一个函数的参数也是一个函数，那么这个参数函数就叫做回调函数

  • 2.为什么要有回调函数？

    • 当一个函数调用执行完毕之后，我想执行另一段代码块，也就是调用另一个函数

    • 但是有时候可能本函数执行完毕后，根据不同的情况需要调用的函数也不同，那么我们可以使用形参来接收这个函数，然后再调用

      • 此时：这个形参函数就称之为回调函数
  1. <script>
  2.     //回调函数：如果一个函数的参数也是一个函数，那么这个参数函数就叫做回调函数
  3.     //回调函数在什么地方会执行呢？   函数名() 的时候执行
  4.     //回调函数难点： 本质是一个参数
  5.     //谁来传：调用者传参   （函数名）
  6.     //谁来收,调用：函数调用  （函数执行完函数体之后，调用保存在这个参数中的一段代码）
  9.     function a (  ) {
  10.         console.log ( "哈哈" );
  12.     }
  14.     function b (  ) {
  15.         console.log ( "呵呵" );
  16.     }
  18.     //c函数有一个功能，可以接收调用者传递过来的一段代码，并且在执行完自身函数体之后，会帮调用者执行这一段代码
  19.     function c ( fn ) {
  20.         console.log ( "嘿嘿" );
  21.         //fn里面是调用者传递过来的一段代码，怎么让这段代码执行呢？
  22.         fn();
  23.     };
  25.     //调用函数c，传的是变量a中存储的一段代码
  26.     c(a);
  27.     c(b);
  29.     // 注意：回调函数是将函数的代码传递给形参，让函数内部调用
  30.     // 注意：在传递实参给形参的时候，如果是要回调函数，那么只要传入函数名字（此时不掉用，函数内部调用）：c(a)，fn = a
  31.     // 如果在传入实参的时候，给函数名增加了括号：c(a())，此时表示将a函数先执行，然后将a()函数的返回值，传递给形参fn = a()
  33. </script>
  • 实际应用
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <script>
  12.         /**
  13.          * 求和，可以实现1到N次方的数组元素的求和
  14.          * @param {array} 要求和的数组
  15.          * @param {function} 要调用的外部方法（求N次方）
  16.          * @return sum，数组所有元素的N次方的和
  17.          */
  18.         function getSum(arr, fn) {
  19.             //定义变量保存结果
  20.             let sum = 0;
  22.             //遍历数组
  23.             for (let i = 0; i < arr.length; i++) {
  24.                 //拿到的元素需要使用fn加工
  25.                 sum += fn(arr[i]);
  26.             }
  28.             //返回结果
  29.             return sum;
  30.         }
  32.         /**
  33.          * 求平方
  34.          * @param {number} num，要求平方的数据
  35.          * @return res，num的平方
  36.          */
  37.         function fn1(num) {
  38.             return num * num;
  39.         }
  41.         /**
  42.          * 求立方
  43.          * @param {number} num，要求平方的数据
  44.          * @return res，num的平方
  45.          */
  46.         function fn2(num) {
  47.             return num * num * num;
  48.         }
  50.         //定义数组
  51.         let arr = [1, 2, 3];
  53.         // 求数组的所有元素的平方和
  54.         console.log(getSum(arr, fn1));
  56.         //求数组的所有元素的立方和
  57.         console.log(getSum(arr, fn2));
  59.         //匿名函数回调应用：求数组的所有元素的四次方和
  60.         console.log(getSum(arr, function (num) { return Math.pow(num, 4) }));
  61.         //等价于
  62.         /*
  63.             function getSum(arr, fn) {
  64.                 //定义变量保存结果
  65.                 let sum = 0;
  66.                 fn = function (num) { return Math.pow(num, 4) };
  68.                 //遍历数组
  69.                 for (let i = 0; i < arr.length; i++) {
  70.                     //拿到的元素需要使用fn加工
  71.                     sum += fn(arr[i]);
  72.                 }
  74.                 //返回结果
  75.                 return sum;
  76.             }
  77.         */
  79.         //匿名回调函数的优势：用后即焚，不占用内存
  81.     </script>
  82. </body>
  84. </html>

1.3-自调用函数

  • 1.什么是自调用函数：函数自己调用自己

    • 最常见的：匿名函数自调用

  • 2.自调用函数作用

    • 开辟作用域，js中只有函数才可以开辟作用域：防止全局污染

  • 3.匿名函数自调用语法:( function(){} ) ()

    • 将整个函数使用小括号包裹，然后在后面再加上小括号调用
  1. <script>
  3.     /*自调用函数：函数自己调用自己
  4.         * 最常见的：匿名函数自调用
  5.      */
  8.     //作用：开辟作用域，js中只有函数才可以开辟作用域
  10.     //匿名函数相当于字面量函数,由于没有函数名，所以只能在声明的同时调用
  11.     //语法：  ( function(){} ) ()     将整个函数使用小括号包裹，然后在后面再加上小括号调用
  12.     (function (  ) {
  13.         console.log ( "我是匿名函数" );
  14.     })();
  16.     //补充：其实有名字的函数也可以自己调用自己，只是比较少见
  17.     (function test(  ) {
  18.         console.log ( "我是有名字的函数，我也可以自调用" );
  19.     })();
  21.     //自调用作用：暂时因为知识点不足以支撑案例使用，等后面讲到WebAPI的时候可以用到
  23. </script>

02-对象(语法学习)

1.1-对象介绍

对象作用：一个变量存储多个数据

对象与数组异同点

  1. 相同点：一个变量存储多个数据
  3. 不同点：
  5.     数组有序存储：元素与下标一一对应
  7.     对象无序存储：属性名与属性值一一对应（键值对）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         /* 
  12.         1.学习目标
  13.             a. 了解对象的作用  ： 一个变量存储多个数据
  14.             b. 了解对象的语法，内存工作原理
  15.                 let 对象名 =  {属性名:属性值,属性名:属性值}
  17.         2.学习路线
  18.             a. 抛出需求 ： 一个变量存储多个数据
  19.             b. 数组？   对象？   区别？
  20.                  数组和对象的异同点
  21.                     相同点：都是复杂数据类型，一个变量存储多个数据
  22.                     不同点：存储方式不一样
  23.                         数组 ： 连续存储，元素与下标一一对应
  24.                         对象：  不连续存储，属性名和属性值一一对应
  25.         */     
  28.         //需求 ： 存储一个人的信息（name ：绿裙, age ：38 , sex ： ‘女’）
  30.         //1.使用三个变量存储
  31.         //弊端 : (1)代码冗余  （2）不好维护
  32.         let name = '阿三';
  33.         let age = 38;
  34.         let sex = '女';
  36.         //2.使用数组存储 ： 一个变量存储多个数据
  37.         //弊端 ： 代码阅读性不高
  38.         let arr = ['阿三',38,'女'];
  39.         console.log(arr);
  41.         //3.使用对象 ： 一个变量存储多个数据，阅读性更高
  42.         let object = {name:'阿三',age:38,sex:'女'};
  43.         //let object = {'name':'阿三','age':38,'sex':'女'}; //这个也可以
  44.         console.log(object);
  46.         //点语法取值 ： 
  47.         console.log(object.name);
  49.         /* 
  50.         数组和对象的异同点
  51.             相同点：都是复杂数据类型，一个变量存储多个数据
  52.             不同点：存储方式不一样
  53.                 数组 ： 连续存储，元素与下标一一对应
  54.                 对象：  不连续存储，属性名和属性值一一对应
  55.         */
  59.     </script>
  60. </body>
  61. </html>

day05 - 图1

1.2-对象取值与赋值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         /* 
  12.         1.对象作用 ： 一个变量存储多个数据
  13.             a:数组和对象的异同点
  14.                 相同点：都是复杂数据类型，一个变量存储多个数据
  15.                 不同点：存储方式不一样
  16.                     数组 ： 连续存储，元素与下标一一对应
  17.                     对象：  不连续存储，属性名和属性值一一对应
  19.         2.对象语法 
  20.             a.声明： let 对象名 = {属性名:属性值}
  21.             b.取值： 对象名.属性名
  22.                 属性存在，则获取属性值
  23.                 属性不存在，则获取undefined
  24.             c.赋值： 对象名.属性名 = 值
  25.                 属性存在，则修改属性值
  26.                 属性不存在，则动态添加属性
  31.         */   
  33.         //1.声明语法 ： let 对象名 = { 属性名:属性值，属性名:属性值 };
  34.         let kid = {
  35.             name:'阿三',
  36.             age:38,
  37.             sex:'女'
  38.         };
  40.         //2.取值语法 : 点语法  ：   对象名.属性名
  41.         //2.1 属性名存在 ，则是获取属性值
  42.         console.log(kid.sex);//女
  43.         //2.2 属性名不存在,则获取undefined
  44.         console.log(kid.bgf);//undefined
  47.         //3.赋值语法  :   对象名.属性名 = 值
  48.         //3.1 属性名存在， 则是修改属性值
  49.         kid.name = '阿三';
  50.         console.log(kid);
  51.         //3.2 属性名不存在，
  52.         kid.hobby = '足疗爱好者';
  53.         console.log(kid);
  56.         //4.对象取值还有一种方式：字符串语法
  57.         console.log(kid['hobby']);
  60.     </script>
  61. </body>
  62. </html>

1.3-对象属性补充

  • 对象的属性名字也可以为数字（或数字字符串），但是一般不建议这么使用（数字使用数组更效果更好）
  • 数字属性的取值和赋值访问需要使用字符串语法
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         //1.数字声明对象属性
  12.         let obj = {0:1,2:2};        //不会自动从0开始，而且不需要连续
  14.         //2.数字属性的访问：字符串语法访问
  15.         console.log(obj[0]);        //1
  16.         //console.log(obj.0);        //语法错误
  18.         //3.动态添加数字属性
  19.         obj[5] = 5;                    
  20.         console.log(obj);            //{0:1,2:2,5:5}
  22.     </script>    
  23. </body>
  24. </html>

1.4-复杂对象

  • 一个真实的对象往往都是带着很多数据和结构的
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         /* 
  12.         1.对象作用 ： 一个变量存储多个数据
  13.             a:数组和对象的异同点
  14.                 相同点：都是复杂数据类型，一个变量存储多个数据
  15.                 不同点：存储方式不一样
  16.                     数组 ： 连续存储，元素与下标一一对应
  17.                     对象：  不连续存储，属性名和属性值一一对应
  19.         2.对象语法 
  20.             a.声明： let 对象名 = {属性名:属性值}
  21.             b.取值： 对象名.属性名
  22.                 属性存在，则获取属性值
  23.                 属性不存在，则获取undefined
  24.             c.赋值： 对象名.属性名 = 值
  25.                 属性存在，则修改属性值
  26.                 属性不存在，则动态添加属性
  28.         3.对象初始化
  29.             let 对象名 = { 属性名:属性值 }
  30.         */   
  33.         //
  34.         //
  35.         /* 
  36.         1.声明空对象 ： let 对象名= {};  
  37.         2.对象的初始化 : 声明的时候赋值  
  38.             语法：   let 对象名 = { 属性名:属性值 }
  40.         3. 函数有两种称呼
  41.             函数 ：
  42.             方法 ：有归属感。 如果对象的属性值是函数，习惯上称之为对象的方法
  43.         */
  45.         let kid = {
  46.             name:'阿三',
  47.             age:38,
  48.             sex:true,
  49.             //数组
  50.             keyWords : ['代码','黑马程序员','广州大前端'],
  51.             //方法：使用function关键字 等价于 play = function(){}
  52.             play: function(){
  53.                 console.log('大吉大利今晚吃鸡');
  54.             },
  55.             //对象
  56.             wife:{
  57.                 name:'丹丹',
  58.                 age:18,
  59.                 play:function(){
  60.                     console.log('看韩剧');
  61.                 }
  62.             }
  63.         };
  65.         //复杂对象的深入访问：连贯使用.操作，层层递进
  66.         console.log(kid);
  67.         console.log(kid.sex);            //true
  68.         console.log(kid.keyWords);        // ['代码','黑马程序员','广州大前端']
  69.         console.log(kid.keyWords[0]);    //'代码'
  70.         kid.play();                        //调用方法
  72.         console.log(kid.wife);            //{name: "丹丹", age: 18, play: ƒ}
  73.         console.log(kid.wife.name);        //"丹丹",
  74.         kid.wife.play
  76.         //字符串语法访问多层对象注意用法
  77.         console.log(kid['wife']['name']);    //丹丹
  79.     </script>
  80. </body>
  81. </html>
  1. 课堂小彩蛋 ： 假设人拥有名字name，年龄age。  在代码中如何存储5个人？ （数组嵌套对象）

1.5-对象遍历

  • 挨个读取对象中的每个属性：属性名和属性值
  • 特定语法
  1. for(let 属性名变量 in 对象变量){
  2.     //属性名就是对象中的每一个属性
  3.     //属性值通过：对象[属性名]访问：属性名是一个变量，不能使用.
  4. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <script>
  13.         let person = {
  14.             name:'班长',
  15.             age: 32,
  16.             sex: '男'
  17.         };
  19.         /* 
  20.         1.对象的遍历 ： 获取对象的每一个属性值
  21.         2.复习数组的遍历语法
  22.             固定的for循环： for(let i = 0;i<数组.length;i++){ 数组名[i] }
  23.         3.对象无法使用数组的遍历语法，对象的遍历有专用的for循环结构
  24.            for-in循环 ：   for(let key in 对象名){ 对象名[key] }
  25.                 *** 注意点： 只能使用字符串语法取属性值 ***
  26.         */
  28.         for(let key in person){
  29.             console.log(key);//属性名字符串
  31.             //获取属性值
  32.             // console.log(person.key);
  33.             // console.log(person['key']);
  34.             console.log(person[key]);               
  35.         };
  37.         //遍历对象一般是遍历复杂对象：即对象内部套对象，每个内部对象都是一组数据，简单一维对象都是直接访问，不进行遍历
  40.     </script>
  41. </body>
  43. </html>

1.6-方法中的this关键字

  • this是对象内部的变量：代表调用者对象
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <script>
  13.         /* 
  14.         this : 谁调用我，我就指向谁
  15.         */
  16.         let banzhang = {
  17.             name: '阿三',
  18.             age: 32,
  19.             sex: '男',
  20.             sayHi:function(){
  21.                 /* 弊端 ： 对象名变化，代码也要修改 */
  22.                 // console.log('猴赛雷，我的名字叫' + banzhang.name + '我的年龄是' + banzhang.age );
  23.                 console.log('猴赛雷，我的名字叫' + this.name + '我的年龄是' + this.age ); 
  24.             }
  25.         };  
  27.         banzhang.sayHi();
  28.         banzhang.name = '广州大前端';
  29.         banzhang.sayHi();
  31.         //普通函数的归属为window对象，所以普通函数内部的this代表window对象的调用者
  32.         function fn(){
  33.             console.log(this);        //Window
  34.         }
  36.         fn();
  37.     </script>
  38. </body>
  40. </html>

1.7-对象的另一种声明方式

  • 对象可以使用Object对象进行实例化得到
  1. <script>
  3.     //1.（最常用）简洁方式：   let 对象名 = { 属性名：属性值 }
  4.     let p1 = {name:'张三'};
  6.     //2.构造函数：
  7.     //构造函数：如果调用一个函数使用了new关键字，这个函数成为构造函数
  8.     let p2 = new Object( {name : '张三'} );
  10.     /*这两种方式没有任何区别，只是语法不同而已*/
  11.     console.log ( p1 );
  13.     console.log ( p2 );
  14. </script>

03-对象练习

1.1-对象求和

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         //有一个数组，存储五件商品信息。 求出这五件商品的总价格
  12.         let arr = [
  13.             {name:'iPhone',price:3888},
  14.             {name:'switch',price:1688},
  15.             {name:'iPad',price:2460},
  16.             {name:'mac',price:18880},
  17.             {name:'ipod',price:188},
  18.         ];
  20.         /* 箩筐思想求和 */
  21.         let sum = 0;
  22.         for(let i = 0;i<arr.length;i++){
  23.             sum += arr[i].price;
  24.         };
  25.         console.log(sum);
  27.     </script>
  28. </body>
  29. </html>

1.2-对象经典面试题

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <script>
  13.         //有一个字符串数组,找出出现次数最多的字符及对应的次数
  14.         let str = ['a', 'b', 'a', 's', 'f', 'g', 'g', 'g', 'h', 'j', 'j', 'k', 'k', 'g', 'f', 'd', 'd', 's', 's', 's', 's', 's', '3', '4', '4', '4', '3', '4', '3'];
  15.         /*思路：
  16.             利用对象两个特点
  17.                 属性可以动态添加=
  18.                 属性与属性值之间是一个键值对的关系
  19.            1.声明一个空对象，遍历字符串
  20.            2.将字符串的字符作为对象的属性，出现的次数作为对象的属性值
  21.         */
  23.         let objc = {};
  24.         for (let i = 0; i < str.length; i++) {
  25.             let s = str[i];
  26.             //先判断对象是否有该属性
  27.             if (objc[s] == undefined) {//使用字符串语法对对象取值，如果取出来是undefined，表示对象没有这个属性
  28.                 //既然没有表示这个字符是第一次出现，那么就将这个字符作为对象的属性，属性的值为1 （第一次出现）
  29.                 objc[s] = 1;//动态赋值
  30.             } else {//如果对象有这个属性，则让这个属性的值自身+1  （每出现一次就加1）
  31.                 objc[s]++;
  32.             }
  33.         }
  34.         console.log(objc);//遍历这个对象，就知道哪个字符出现的最多了
  35.     </script>
  36. </body>
  38. </html>

04-课后作业

  1. 今日目标
  2. 对象求和
  3. 新闻列表