ES5中数组API(every,some),遍历API(forE

2016-09-06-day14

---

1.ES5中数组API:

1）判断数组中的元素是否符合要求

• arr.every(): 每个元素是否都符合要求,every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。
• arr.some(): 是否包含符合要求的元素,some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。
  如何使用:

arr.every(function(val,idx,arr){
  return 判断条件
});
arr.some(function(val,idx,arr){
  return 判断条件
});

arr.every()例子：检测数组中的所有元素是否都大于 10。

function isBigEnough(val, index, array) {
  return (val>= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
console.log(passed)//false
var passed2 = [12, 54, 18, 130, 44].every(isBigEnough);
console.log(passed2)//true

arr.every()例子：检测数组中的所有元素是否都由奇数组成。

var arr1 = [1, 3, 5, 7, 9];
var arr2 = [2, 4, 6, 8, 10];
var arr3 = [1, , 3, , 5];
//判断哪个数组全由奇数组成:
function isOdd(val) {
  return val % 2 == 1;
}
arr1.some(isOdd) //true
arr2.some(isOdd) //false
arr3.some(isOdd) //true

arr.some()例子：检测在数组中是否有元素大于 10。

function isBiggerThan10(val, index, array) {
  return val> 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

arr.some()例子：检测在数组中是否是按升序排列的。

var arr4 = [1, 2, 3, 2, 1];
var arr5 = [5, 4, 3, 2, 1];
var arr6 = [1, 2, 3, 4, 5];
//判断哪个数组是按升序排列的
function isAscending(val, index, arr) {
  //当前元素是否<=下一个元素
  return index < arr.length - 1 ? val <= arr[index + 1] : true;
}
arr4.every(isAscending) //false
arr4.every(isAscending) //false
arr4.every(isAscending) //true

如果Array的原型对象中不包含every和some,那么可以用以下代码实现自定义方法。

//如果Array的原型对象中不包含every
if (Array.prototype.every === undefined) {
  Array.prototype.every =
    function (callback) {
      //遍历当前数组中每个元素
      for (var i = 0; i < this.length; i++) {
        //防止稀疏数组
        //如果i位置不是undefined
        //if(this[i]!==undefined){
        if (i in this) {
          //调用callback函数，传入:当前元素值,当前位置,当前数组 三个参数，将执行结果保存在变量r中
          var r = callback(this[i], i, this);
          if (!r) { //如果r为false
            return false; //返回false
          }
        }
      } //(遍历结束)
      return true; //返回true
    }
}
//如果Array的原型对象中不包含some
if (Array.prototype.some === undefined) {
  //在Array的原型对象中添加some方法，参数为fun函数
  Array.prototype.some = function (fun) {
    //遍历当前数组:
    for (var i = 0; i < this.length; i++) {
      //如果当前元素不是undefined
      if (this[i] !== undefined) {
        //调用fun函数，传入:当前元素值，当前位置，当前数组，返回结果保存在r中
        var r = fun(this[i], i, this)
        //如果r为true，就返回true
        if (r) {
          return true;
        }
      }
    } //(遍历结束)
    return false; //返回false
  }
}

2.遍历API:对数组中每个元素执行相同的操作

• arr.forEach(): 对原数组中每个元素，直接做相同的操作——直接修改原数组
• arr.map(): 依次取出原数组中每个元素，执行相同操作后，返回新数组
  如何使用:

   arr.forEach(function(val,index,arr){
      直接修改arr中index位置的当前元素
   });
   arr.map(function(val,index,arr){
      return 一个新值
   });

arr.forEach()例子：对数组中的每一个元素乘以2

var arr=[1,,3,,5];
arr.forEach(function(val,idx,arr){
  arr[idx]=val*2;
});
console.log(arr) //[2, ,6, ,10]

arr.map()例子：对数组中的每一个元素乘以2

var arr_odd=[1,3,5,7,9];
var arr_even=arr_odd.map(function(val){
  return val*2;
});
console.log(arr_odd) //[1,3,5,7,9]
console.log(arr_even) //[2,6,10,14,18]

如果原型对象中没有forEach和map，那么可以粘贴以下代码来实现功能

//如果Array的原型中没有forEach方法
if(Array.prototype.forEach===undefined){
  //就为Array的原型添加forEach方法，参数定义为callback
  Array.prototype.forEach=
    function(callback){
      //遍历当前数组中每个元素
      for(var i=0;i<this.length;i++){
        //如果当前元素不是undefined
        if(this[i]!==undefined){
          //调用callback，传入当前元素值,当前位置，当前数组作为参数
          callback(this[i],i,this);
        }
      }
    }
}
//如果Array的原型中没有map方法
if(Array.prototype.map===undefined){
  //就为Array的原型添加map方法，参数定义为callback
  Array.prototype.map=
    function(callback){
      //创建一个空数组arr
      var arr=[];
      //遍历原数组中每个元素
      for(var i=0;i<this.length;i++){
        //如果原数组中当前元素不是undefined
        if(this[i]!==undefined){
          //调用callback,传入当前元素值,当前位置，原数组，将结果保存到arr的相同位置
          arr[i]=
            callback(this[i],i,this);
        }
      }//(遍历结束)
      return arr;//返回arr
    }
}

3.过滤和汇总:

arr.filter(): 筛选出原数组中符合条件的元素，返回新数组。
arr.reduce()汇总: 将数组中每个元素统计起来，得出一个结果。
如何使用：

arr.filter(function(val,idx,arr){
  return 判断条件
});

var r=arr.reduce(
   function(prev,val,idx,arr){
     return prev+val;//prev自动接收截止到目前已经统计的临时汇总结果。
   },
   startVal //startVal是开始汇总前的初始值
)

arr.filter()例子：取出数组中是偶数的元素(返回新数组)

var arr=[1,2,3,4,5];
var even=arr.filter(function(val){
  return val%2==0;
});
console.log(arr); //[1,2,3,4,5]
console.log(even); //[2,4]

arr.reduce()例子：计算数组元素总和

var arr=[1,2,3,4,5];
var sum=arr.reduce(function(prev,val){
  return prev+val;
});
console.log(sum);//1+2+3+4+5=15

var start=15;
var arr2=[6,7,8,9,10];
sum2=arr2.reduce(function(prev,val){
  return prev+val;
},start);
console.log(sum2);//15+6+7+8+9+10=55

2. bind函数:基于一个现有函数，创建一个新函数，并永久绑定this为指定对象，同时，还可提前绑定部分参数。

何时使用: 在使用回调函数时，只要希望固定回调函数中的this时。

鄙视题: call apply bind
call和apply: 临时借用构造函数，并临时替换函数中的this为指定对象。
立刻执行函数
调用后，this回复原样
call: 参数单独传入
apply: 参数以数组传入
bind: 创建一个函数，并永久绑定this
不会立刻执行新函数
一旦被bind创建的函数，其中的this，无法再被call/apply替换

<!doctype html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
  </head>
  <body>
    <script>
      //计算器: 计算总工资: 底薪+奖金
      function calc(base,bonus){
        document.write(
          this.name+"的总工资是"+(base+bonus)
          +"<br>"
        );
      }
      var lilei={name:"Li Lei"};
      var hmm={name:"Han Meimei"};
      //lilei临时借用calc
      calc.call(lilei,10000,5000);
      //相当于lilei.calc(10000,5000)
      //hmm临时借用calc
      calc.apply(hmm,[9000,7000]);
      //如果函数类型的原型中没有bind方法 
      if(Function.prototype.bind===undefined){
        //就在函数类型的原型中添加bind方法，定义1个参数obj
        Function.prototype.bind=
          function(obj/*,args1*/){
            var fun=this;//this->原函数对象
            var args1=//将arguments转化为纯正的数组，并选取1位置之后的剩余元素
              Array.prototype.slice.call(
                arguments,1
              );//arguments.slice(1)`
            return function(/*args2*/){//返回新函数:
              var args2=
                Array.prototype.slice.call(
                  arguments
                );//arguments.slice();
              //强行调用原函数,临时替换this为obj
              fun.apply(
                obj,args1.concat(args2)
              );
            }
          }
      }
      //基于calc函数，创建一个新函数，并永久绑定新函数中的this为lilei
      var lilei_calc=calc.bind(lilei,10000);
      //lilei_calc:function(){(闭包:fun->原函数)
        //fun.apply(lilei,arguments);
      //}
      lilei_calc(5000);
      //lilei_calc.call(hmm,9000,7000);
    </script>
  </body>
</html>

执行结果：

3. 严格模式:

如何使用:
在当前范围的开头: "use strice";
写在2个地方:
1. 写在一个函数内部的开头:
仅函数内使用严格模式，函数外依然使用普通模式
2. 写在一个script元素或js文件的开头
整个js文件或script代码段都采用严格模式
1. 旧项目升级，先逐个函数启用严格模式
2. 新项目，开始就使用严格模式

规定:

1. 将静默失败升级为了错误！
2. 不允许对未声明的变量赋值！
3. 尽量少的或不使用arguments及其API
4. 新增了eval作用域:
   在eval中声明的变量，eval结束后，不能使用。