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

2016-09-06-day14


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

1)判斷數(shù)組中的元素是否符合要求
  • arr.every(): 每個(gè)元素是否都符合要求,every()是對(duì)數(shù)組中每一項(xiàng)運(yùn)行給定函數(shù)巡通,如果該函數(shù)對(duì)每一項(xiàng)返回true,則返回true薪缆。
  • arr.some(): 是否包含符合要求的元素,some()是對(duì)數(shù)組中每一項(xiàng)運(yùn)行給定函數(shù),如果該函數(shù)對(duì)任一項(xiàng)返回true,則返回true片部。
    如何使用:
arr.every(function(val,idx,arr){
  return 判斷條件
});
arr.some(function(val,idx,arr){
  return 判斷條件
});

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

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

arr.some()例子:檢測(cè)在數(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()例子:檢測(cè)在數(shù)組中是否是按升序排列的。

var arr4 = [1, 2, 3, 2, 1];
var arr5 = [5, 4, 3, 2, 1];
var arr6 = [1, 2, 3, 4, 5];
//判斷哪個(gè)數(shù)組是按升序排列的
function isAscending(val, index, arr) {
  //當(dāng)前元素是否<=下一個(gè)元素
  return index < arr.length - 1 ? val <= arr[index + 1] : true;
}
arr4.every(isAscending) //false
arr4.every(isAscending) //false
arr4.every(isAscending) //true

如果Array的原型對(duì)象中不包含every和some,那么可以用以下代碼實(shí)現(xiàn)自定義方法降允。

//如果Array的原型對(duì)象中不包含every
if (Array.prototype.every === undefined) {
  Array.prototype.every =
    function (callback) {
      //遍歷當(dāng)前數(shù)組中每個(gè)元素
      for (var i = 0; i < this.length; i++) {
        //防止稀疏數(shù)組
        //如果i位置不是undefined
        //if(this[i]!==undefined){
        if (i in this) {
          //調(diào)用callback函數(shù)恩闻,傳入:當(dāng)前元素值,當(dāng)前位置,當(dāng)前數(shù)組 三個(gè)參數(shù),將執(zhí)行結(jié)果保存在變量r中
          var r = callback(this[i], i, this);
          if (!r) { //如果r為false
            return false; //返回false
          }
        }
      } //(遍歷結(jié)束)
      return true; //返回true
    }
}
//如果Array的原型對(duì)象中不包含some
if (Array.prototype.some === undefined) {
  //在Array的原型對(duì)象中添加some方法剧董,參數(shù)為fun函數(shù)
  Array.prototype.some = function (fun) {
    //遍歷當(dāng)前數(shù)組:
    for (var i = 0; i < this.length; i++) {
      //如果當(dāng)前元素不是undefined
      if (this[i] !== undefined) {
        //調(diào)用fun函數(shù)幢尚,傳入:當(dāng)前元素值,當(dāng)前位置翅楼,當(dāng)前數(shù)組尉剩,返回結(jié)果保存在r中
        var r = fun(this[i], i, this)
        //如果r為true,就返回true
        if (r) {
          return true;
        }
      }
    } //(遍歷結(jié)束)
    return false; //返回false
  }
}
2.遍歷API:對(duì)數(shù)組中每個(gè)元素執(zhí)行相同的操作
  • arr.forEach(): 對(duì)原數(shù)組中每個(gè)元素毅臊,直接做相同的操作——直接修改原數(shù)組
  • arr.map(): 依次取出原數(shù)組中每個(gè)元素理茎,執(zhí)行相同操作后,返回新數(shù)組
    如何使用:
   arr.forEach(function(val,index,arr){
      直接修改arr中index位置的當(dāng)前元素
   });
   arr.map(function(val,index,arr){
      return 一個(gè)新值
   });

arr.forEach()例子:對(duì)數(shù)組中的每一個(gè)元素乘以2

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

arr.map()例子:對(duì)數(shù)組中的每一個(gè)元素乘以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ù)組對(duì)象的格式,例子如下:

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方法方便獲得對(duì)象數(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

返回一個(gè)數(shù)組宠蚂,數(shù)組中元素為原始數(shù)組的平方根式撼,例子如下:

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

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

如果原型對(duì)象中沒(méi)有forEach和map,那么可以粘貼以下代碼來(lái)實(shí)現(xiàn)功能

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

arr.filter(): 篩選出原數(shù)組中符合條件的元素项栏,返回新數(shù)組浦辨。
arr.reduce()匯總: 將數(shù)組中每個(gè)元素統(tǒng)計(jì)起來(lái),得出一個(gè)結(jié)果沼沈。
如何使用:

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

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

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()例子:計(jì)算數(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ù):基于一個(gè)現(xiàn)有函數(shù),創(chuàng)建一個(gè)新函數(shù)列另,并永久綁定this為指定對(duì)象芽腾,同時(shí),還可提前綁定部分參數(shù)页衙。

何時(shí)使用: 在使用回調(diào)函數(shù)時(shí)摊滔,只要希望固定回調(diào)函數(shù)中的this時(shí)。

鄙視題: call apply bind
call和apply: 臨時(shí)借用構(gòu)造函數(shù)店乐,并臨時(shí)替換函數(shù)中的this為指定對(duì)象艰躺。
立刻執(zhí)行函數(shù)
調(diào)用后,this回復(fù)原樣
call: 參數(shù)單獨(dú)傳入
apply: 參數(shù)以數(shù)組傳入
bind: 創(chuàng)建一個(gè)函數(shù)响巢,并永久綁定this
不會(huì)立刻執(zhí)行新函數(shù)
一旦被bind創(chuàng)建的函數(shù)描滔,其中的this,無(wú)法再被call/apply替換

<!doctype html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
  </head>
  <body>
    <script>
      //計(jì)算器: 計(jì)算總工資: 底薪+獎(jiǎng)金
      function calc(base,bonus){
        document.write(
          this.name+"的總工資是"+(base+bonus)
          +"<br>"
        );
      }
      var lilei={name:"Li Lei"};
      var hmm={name:"Han Meimei"};
      //lilei臨時(shí)借用calc
      calc.call(lilei,10000,5000);
      //相當(dāng)于lilei.calc(10000,5000)
      //hmm臨時(shí)借用calc
      calc.apply(hmm,[9000,7000]);
      //如果函數(shù)類型的原型中沒(méi)有bind方法 
      if(Function.prototype.bind===undefined){
        //就在函數(shù)類型的原型中添加bind方法踪古,定義1個(gè)參數(shù)obj
        Function.prototype.bind=
          function(obj/*,args1*/){
            var fun=this;//this->原函數(shù)對(duì)象
            var args1=//將arguments轉(zhuǎn)化為純正的數(shù)組含长,并選取1位置之后的剩余元素
              Array.prototype.slice.call(
                arguments,1
              );//arguments.slice(1)`
            return function(/*args2*/){//返回新函數(shù):
              var args2=
                Array.prototype.slice.call(
                  arguments
                );//arguments.slice();
              //強(qiáng)行調(diào)用原函數(shù),臨時(shí)替換this為obj
              fun.apply(
                obj,args1.concat(args2)
              );
            }
          }
      }
      //基于calc函數(shù),創(chuàng)建一個(gè)新函數(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í)行結(jié)果:


3. 嚴(yán)格模式:

如何使用:
在當(dāng)前范圍的開(kāi)頭: "use strice";
寫(xiě)在2個(gè)地方:
1. 寫(xiě)在一個(gè)函數(shù)內(nèi)部的開(kāi)頭:
僅函數(shù)內(nèi)使用嚴(yán)格模式拘泞,函數(shù)外依然使用普通模式
2. 寫(xiě)在一個(gè)script元素或js文件的開(kāi)頭
整個(gè)js文件或script代碼段都采用嚴(yán)格模式
1. 舊項(xiàng)目升級(jí),先逐個(gè)函數(shù)啟用嚴(yán)格模式
2. 新項(xiàng)目枕扫,開(kāi)始就使用嚴(yán)格模式

規(guī)定:

  1. 將靜默失敗升級(jí)為了錯(cuò)誤陪腌!
  2. 不允許對(duì)未聲明的變量賦值!
  3. 盡量少的或不使用arguments及其API
  4. 新增了eval作用域:
    在eval中聲明的變量,eval結(jié)束后诗鸭,不能使用染簇。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市强岸,隨后出現(xiàn)的幾起案子锻弓,更是在濱河造成了極大的恐慌,老刑警劉巖蝌箍,帶你破解...
    沈念sama閱讀 206,311評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件青灼,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡妓盲,警方通過(guò)查閱死者的電腦和手機(jī)杂拨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)悯衬,“玉大人弹沽,你說(shuō)我怎么就攤上這事〗畲郑” “怎么了贷币?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,671評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)亏狰。 經(jīng)常有香客問(wèn)我役纹,道長(zhǎng),這世上最難降的妖魔是什么暇唾? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,252評(píng)論 1 279
  • 正文 為了忘掉前任促脉,我火速辦了婚禮,結(jié)果婚禮上策州,老公的妹妹穿的比我還像新娘瘸味。我一直安慰自己,他們只是感情好够挂,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布旁仿。 她就那樣靜靜地躺著,像睡著了一般孽糖。 火紅的嫁衣襯著肌膚如雪枯冈。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,031評(píng)論 1 285
  • 那天办悟,我揣著相機(jī)與錄音尘奏,去河邊找鬼。 笑死病蛉,一個(gè)胖子當(dāng)著我的面吹牛炫加,可吹牛的內(nèi)容都是我干的瑰煎。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼俗孝,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼酒甸!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起赋铝,我...
    開(kāi)封第一講書(shū)人閱讀 36,973評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤烘挫,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后柬甥,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,466評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡其垄,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評(píng)論 2 323
  • 正文 我和宋清朗相戀三年苛蒲,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片绿满。...
    茶點(diǎn)故事閱讀 38,039評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡臂外,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出喇颁,到底是詐尸還是另有隱情漏健,我是刑警寧澤,帶...
    沈念sama閱讀 33,701評(píng)論 4 323
  • 正文 年R本政府宣布橘霎,位于F島的核電站蔫浆,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏姐叁。R本人自食惡果不足惜瓦盛,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望外潜。 院中可真熱鬧原环,春花似錦、人聲如沸处窥。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,259評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)滔驾。三九已至谒麦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間哆致,已是汗流浹背弄匕。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留沽瞭,地道東北人迁匠。 一個(gè)月前我還...
    沈念sama閱讀 45,497評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親城丧。 傳聞我的和親對(duì)象是個(gè)殘疾皇子延曙,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容