JS 高级（五）ES5新增函数

ES5（ECMAScript 第5个版本）

数组中新增函数

• 判断函数

every()，专门判断一个数组中是否所有元素都符合要求。

 var 判断结果=数组.every(
      function(当前元素值n,当前下标i,当前数组arr){//回调函数
        return 检查当前元素值是否符合要求，并返回检查结果
      }
    );

        every 内自带 for 循环，自动遍历数组中每个元素，每遍历一个元素，就自动调用一次回调函数；每次调用回调函数时，都自动传入三个值：当前元素值 n、当前下标 i、当前数组对象 arr。

        如果本次回调函数判断结果为 true，则至少说明当前元素符合要求，every 会自动遍历下一个元素，直到所有元素遍历完成。如果都没有碰到不符合要求的元素，则结束循环，整体返回 true，说明当前数组中所有元素都符合要求。

        如果本次回调函数判断结果为 false，则说明当前元素不符合要求，every 立刻退出循环，直接返回 false，表明当前数组中不是所有元素都符合要求。

举例：判断哪个数组全部由偶数组成；

<script>
    var arr1 = [1, 3, 5, 7, 9];
    var arr2 = [2, 4, 6, 6, 4];

    var result1 = arr1.every(
      function (n, i, arr) {
        console.log(`
        arr1.every自动调用了一次回调函数；
        收到实参值:n=${n}i=${i}arr=${arr}；
        回调函数执行结果返回${n%2==0}
        `);
        return n % 2 == 0;
      }
    );
    var result2 = arr2.every(
      function (n, i, arr) {
        console.log(`
        arr2.every自动调用了一次回调函数；
        收到实参值:n=${n}i=${i}arr=${arr}；
        回调函数执行结果返回${n%2==0}
        `);
        return n % 2 == 0;
      }
    );
    console.log(result1, result2); //false true
  </script>

some()，专门检查一个数组中是否包含符合要求的元素；

var 判断结果=数组.some(
      function(当前元素值, 当前下标位置, 当前数组){
        return 判断当前元素值是否符合要求
      }
    )

        some 内自带 for 循环，自动遍历数组中每个元素，每遍历一个元素，就自动调用一次回调函数；每次调用回调函数时，都自动传入三个值：当前元素值、当前下标 i、当前数组对象 arr，在回调函数内，判断当前元素值是否符合要求，并返回判断结果给some函数。

        如果本次回调函数判断结果为 true，则说明至少当前元素符合要求，some 立刻退出循环，直接返回 true，说明当前数组中包含至少一个符合要求的元素。

        如果本次回调函数判断结果为 false，则说明当前元素不符合要求，some 只能继续遍历下一个元素。如果直到遍历结束都没有发现符合要求的元素，则返回 false。说明当前数组中不包含符合要求的元素。

举例：判断哪个数组中包含奇数；

<script>
    var arr1 = [1, 3, 5, 7, 9];
    var arr2 = [2, 4, 6, 6, 4];

    var result1 = arr1.some(
      function (n, i, arr) {
        console.log(`
        arr1.some自动调用了一次回调函数；
        收到实参值:n=${n}i=${i}arr=${arr}；
        回调函数执行结果返回${n%2==1}
        `);
        return n % 2 == 1;
      }
    );
    var result2 = arr2.some(
      function (n, i, arr) {
        console.log(`
        arr2.some自动调用了一次回调函数；
        收到实参值:n=${n}i=${i}arr=${arr}；
        回调函数执行结果返回${n%2==1}
        `);
        return n % 2 == 1;
      }
    );
    console.log(result1, result2); //true false 
  </script>

• 遍历函数

forEach()，专门遍历函数代替 for 循环来简化遍历索引数组的特殊函数；

数组.forEach(function(当前元素值, 当前下标i, 当前数组){
       对当前元素值执行操作
    })

        在回调函数内，对当前元素执行规定的操作，不需要返回值。

举例：点名；

<script>
    var arr = ["汤米", "鲍勃", "朱丽叶", "巴啦啦"];
    // for循环遍历写法
    for (i = 0; i < arr.length; i++) {
      console.log(`${arr[i]} - 到！`);
    }
    // forEach写法
    arr.forEach(function (n) {
      console.log(`${n} - 到！`);
    })
    // forEach简写
    arr.forEach(n => console.log(`${n} - 到！`))
  </script>

map()，专门读取原数组中每个元素值，进行修改后，生成一个新数组返回，格式如下：

var 新数组=原数组.map(
      function(当前元素值, 当前下标i, 当前数组){
        return 当前元素值修改后的新值
      }
    )

        在回调函数内，对当前元素值进行修改，并将修改后的新值返回给map函数；map函数接到新值后，自动放入新数组中对应的位置；遍历结束，map返回新数组。原数组保持不变。

举例：将数组中所有元素*2，返回新数组；

<script>
    var arr1 = [1, 2, 3, 4, 5, 6, 7];
    var arr2 = arr1.map(
      function (n, i) {
        return n * 2;
      }
    )
    console.log(arr1);//[1, 2, 3, 4, 5, 6, 7]
    console.log(arr2);//[2, 4, 6, 8, 10, 12, 14]
  </script>

Filter()，过滤，复制出数组中符合要求的个别元素，放入新数组中返回。格式如下：

var 新数组=数组.filter(
    function(当前元素值, 当前下标i, 当前数组){
      return 判断当前元素值是否符合要求
    }
   )

        在回调函数内，判断当前元素值是否符合要求，并返回判断结果，如果当前元素的判断结果为 true，说明当前元素符合条件，则 filter 会将当前元素追加到新数组中保存，如果当前元素的判断结果为 false，说明当前元素不符合要求，则 filter 什么也不干，继续遍历下一个元素。

举例：过滤出数组中的偶数；

<script>
    var arr1 = [1, 2, 3, 4, 5, 6];
    var arr2 = arr1.filter(
      function (n, i) {
        console.log(`arr.filter()自动调用一次回调函数。接收到元素值=${n}。判断后结果为${n%2==0}`);
        return n % 2 == 0
      }
    )
    console.log(arr1);//[1, 2, 3, 4, 5, 6]
    console.log(arr2);//[2, 4, 6]
  </script>

• 数组汇总 

reduce()，汇总，对数组中所有元素进行统计，并返回统计结果的函数；

var 结果=数组.reduce(
    function(捐款箱, 当前元素值n, 当前下标i, 当前数组arr){
	  return捐款箱+当前元素值
    },
    起始值
  )

        reduce 先在内部创建一个变量，保存汇总的起始值（捐款箱变量）；自带 for 循环，自动遍历原数组中每个元素，每遍历一个元素，就自动调用一次回调函数，每次调用回调函数时，都自动传入4个值：捐款箱变量中的临时汇总值、当前元素值 n、当前下标 i、当前数组对象 arr。

        在回调函数内，将临时汇总值与当前元素值相加，算出新的汇总值，再返回给 reduce，reduce 拿到新的汇总值之后，放回捐款箱变量中暂存，为继续累加下一个值做准备。

举例：对数组内容求和；

<script>
    var arr = [1, 2, 3, 4, 5, 6, 7];
    var result = arr.reduce(
      function (box, n) {
        console.log(`
          arr.reduce自动调用一次回调函数，
          初始值为：${box}，
          当前元素值为：${n}，
          返回值：${box + n}
          `);
        return box + n;
      },
      0 //起始值
    )
    console.log(result); //28
  </script>

补充：this 5种

（1）obj.fun()  fun中的this指 .前的obj对象（谁调用指谁）；

（2）new Fun()  Fun中的this指new创建的新对象；

（3）fun() 或 (function(){ ... })() 或 回调函数 thisz默认指windozw；

（4）原型对象(prototype)中的this指将来调用这个共有函数的.前的某个子对象（谁调用指谁）；

（5）访问器属性中的this指代访问器属性所在的当前对象。

往期JavaScript高级博文链接：

JavaScript高级（一）

JavaScript高级（二）

JavaScript高级（三）

JavaScript高级（四）

文章来源: majinjian.blog.csdn.net，作者：Developer 小马，版权归原作者所有，如需转载，请联系作者。

原文链接：majinjian.blog.csdn.net/article/details/120048215