ES5中數(shù)組API(every,some),遍歷API(forEach,map),過濾匯總(filter,reduce),bind函數(shù),嚴格模式-14

2016-09-06-day14

1.ES5中數(shù)組API:

1）判斷數(shù)組中的元素是否符合要求
  • arr.every(): 每個元素是否都符合要求,every()是對數(shù)組中每一項運行給定函數(shù)，如果該函數(shù)對每一項返回true,則返回true。
  • arr.some(): 是否包含符合要求的元素,some()是對數(shù)組中每一項運行給定函數(shù)，如果該函數(shù)對任一項返回true，則返回true。
    如何使用:
arr.every(function(val,idx,arr){
  return 判斷條件
});
arr.some(function(val,idx,arr){
  return 判斷條件
});

arr.every()例子：檢測數(shù)組中的所有元素是否都大于 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()例子：檢測數(shù)組中的所有元素是否都由奇數(shù)組成。

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

arr.some()例子：檢測在數(shù)組中是否有元素大于 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()例子：檢測在數(shù)組中是否是按升序排列的。

var arr4 = [1, 2, 3, 2, 1];
var arr5 = [5, 4, 3, 2, 1];
var arr6 = [1, 2, 3, 4, 5];
//判斷哪個數(shù)組是按升序排列的
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,那么可以用以下代碼實現(xiàn)自定義方法。

//如果Array的原型對象中不包含every
if (Array.prototype.every === undefined) {
  Array.prototype.every =
    function (callback) {
      //遍歷當前數(shù)組中每個元素
      for (var i = 0; i < this.length; i++) {
        //防止稀疏數(shù)組
        //如果i位置不是undefined
        //if(this[i]!==undefined){
        if (i in this) {
          //調用callback函數(shù)，傳入:當前元素值,當前位置,當前數(shù)組 三個參數(shù)，將執(zhí)行結果保存在變量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方法，參數(shù)為fun函數(shù)
  Array.prototype.some = function (fun) {
    //遍歷當前數(shù)組:
    for (var i = 0; i < this.length; i++) {
      //如果當前元素不是undefined
      if (this[i] !== undefined) {
        //調用fun函數(shù)，傳入:當前元素值，當前位置，當前數(shù)組，返回結果保存在r中
        var r = fun(this[i], i, this)
        //如果r為true，就返回true
        if (r) {
          return true;
        }
      }
    } //(遍歷結束)
    return false; //返回false
  }
}
2.遍歷API:對數(shù)組中每個元素執(zhí)行相同的操作
  • arr.forEach(): 對原數(shù)組中每個元素，直接做相同的操作——直接修改原數(shù)組
  • arr.map(): 依次取出原數(shù)組中每個元素，執(zhí)行相同操作后，返回新數(shù)組
    如何使用:
   arr.forEach(function(val,index,arr){
      直接修改arr中index位置的當前元素
   });
   arr.map(function(val,index,arr){
      return 一個新值
   });

arr.forEach()例子：對數(shù)組中的每一個元素乘以2

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

arr.map()例子：對數(shù)組中的每一個元素乘以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]

使用map可以重新格式化數(shù)組對象的格式，例子如下：

var kvArray = [{key: 1, value: 10}, 
               {key: 2, value: 20}, 
               {key: 3, value: 30}];

var reformattedArray = kvArray.map(function(obj) { 
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});

// reformattedArray 數(shù)組為： [{1: 10}, {2: 20}, {3: 30}], 

// kvArray 數(shù)組未被修改: 
// [{key: 1, value: 10}, 
//  {key: 2, value: 20}, 
//  {key: 3, value: 30}]

使用map接口數(shù)據(jù)映射，例子如下：

let r = res.map(item => {
    return {
        title: item.name,
        sex: item.sex === 1? '男':item.sex === 0?'女':'保密',
        age: item.age,
        avatar: item.img
    }
})

利用map方法方便獲得對象數(shù)組中的特定屬性值，例子如下

var users = [
  {name: "張含韻", "email": "zhang@email.com"},
  {name: "江一燕",   "email": "jiang@email.com"},
  {name: "李小璐",  "email": "li@email.com"}
];

var emails = users.map(function (user) { return user.email; });

console.log(emails.join(", ")); // zhang@email.com, jiang@email.com, li@email.com

返回一個數(shù)組，數(shù)組中元素為原始數(shù)組的平方根，例子如下：

var numbers = [4, 9, 16, 25];

function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}

如果原型對象中沒有forEach和map，那么可以粘貼以下代碼來實現(xiàn)功能

//如果Array的原型中沒有forEach方法
if(Array.prototype.forEach===undefined){
  //就為Array的原型添加forEach方法，參數(shù)定義為callback
  Array.prototype.forEach=
    function(callback){
      //遍歷當前數(shù)組中每個元素
      for(var i=0;i<this.length;i++){
        //如果當前元素不是undefined
        if(this[i]!==undefined){
          //調用callback，傳入當前元素值,當前位置，當前數(shù)組作為參數(shù)
          callback(this[i],i,this);
        }
      }
    }
}
//如果Array的原型中沒有map方法
if(Array.prototype.map===undefined){
  //就為Array的原型添加map方法，參數(shù)定義為callback
  Array.prototype.map=
    function(callback){
      //創(chuàng)建一個空數(shù)組arr
      var arr=[];
      //遍歷原數(shù)組中每個元素
      for(var i=0;i<this.length;i++){
        //如果原數(shù)組中當前元素不是undefined
        if(this[i]!==undefined){
          //調用callback,傳入當前元素值,當前位置，原數(shù)組，將結果保存到arr的相同位置
          arr[i]=
            callback(this[i],i,this);
        }
      }//(遍歷結束)
      return arr;//返回arr
    }
}
3.過濾和匯總:

arr.filter(): 篩選出原數(shù)組中符合條件的元素，返回新數(shù)組。
arr.reduce()匯總: 將數(shù)組中每個元素統(tǒng)計起來，得出一個結果。
如何使用：

arr.filter(function(val,idx,arr){
  return 判斷條件
});

var r=arr.reduce(
   function(prev,val,idx,arr){
     return prev+val;//prev自動接收截止到目前已經(jīng)統(tǒng)計的臨時匯總結果。
   },
   startVal //startVal是開始匯總前的初始值
)

arr.filter()例子：取出數(shù)組中是偶數(shù)的元素(返回新數(shù)組)

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()例子：計算數(shù)組元素總和

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函數(shù):基于一個現(xiàn)有函數(shù)，創(chuàng)建一個新函數(shù)，并永久綁定this為指定對象，同時，還可提前綁定部分參數(shù)。

何時使用: 在使用回調函數(shù)時，只要希望固定回調函數(shù)中的this時。

鄙視題: call apply bind
call和apply: 臨時借用構造函數(shù)，并臨時替換函數(shù)中的this為指定對象。
立刻執(zhí)行函數(shù)
調用后，this回復原樣
call: 參數(shù)單獨傳入
apply: 參數(shù)以數(shù)組傳入
bind: 創(chuàng)建一個函數(shù)，并永久綁定this
不會立刻執(zhí)行新函數(shù)
一旦被bind創(chuàng)建的函數(shù)，其中的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]);
      //如果函數(shù)類型的原型中沒有bind方法 
      if(Function.prototype.bind===undefined){
        //就在函數(shù)類型的原型中添加bind方法，定義1個參數(shù)obj
        Function.prototype.bind=
          function(obj/*,args1*/){
            var fun=this;//this->原函數(shù)對象
            var args1=//將arguments轉化為純正的數(shù)組，并選取1位置之后的剩余元素
              Array.prototype.slice.call(
                arguments,1
              );//arguments.slice(1)`
            return function(/*args2*/){//返回新函數(shù):
              var args2=
                Array.prototype.slice.call(
                  arguments
                );//arguments.slice();
              //強行調用原函數(shù),臨時替換this為obj
              fun.apply(
                obj,args1.concat(args2)
              );
            }
          }
      }
      //基于calc函數(shù)，創(chuàng)建一個新函數(shù)，并永久綁定新函數(shù)中的this為lilei
      var lilei_calc=calc.bind(lilei,10000);
      //lilei_calc:function(){(閉包:fun->原函數(shù))
        //fun.apply(lilei,arguments);
      //}
      lilei_calc(5000);
      //lilei_calc.call(hmm,9000,7000);
    </script>
  </body>
</html>

執(zhí)行結果：


3. 嚴格模式:

如何使用:
在當前范圍的開頭: "use strice";
寫在2個地方:
1. 寫在一個函數(shù)內(nèi)部的開頭:
僅函數(shù)內(nèi)使用嚴格模式，函數(shù)外依然使用普通模式
2. 寫在一個script元素或js文件的開頭
整個js文件或script代碼段都采用嚴格模式
1. 舊項目升級，先逐個函數(shù)啟用嚴格模式
2. 新項目，開始就使用嚴格模式

規(guī)定:

  1. 將靜默失敗升級為了錯誤！
  2. 不允許對未聲明的變量賦值！
  3. 盡量少的或不使用arguments及其API
  4. 新增了eval作用域:
    在eval中聲明的變量，eval結束后，不能使用。
最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容