国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

ES5新增 數(shù)組操作forEach()、map()、filter()、some()、every()

13651657101 / 951人閱讀

摘要:方法,還有一個特性,當(dāng)缺省或是為,和方法一樣,通常我用對數(shù)組的每個元素進(jìn)行一定操作映射后,會返回一個新的數(shù)組該方法對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)。

1. 前言

ES5中新增的一些處理數(shù)組(Array)的方法, 對于用JavaScript處理數(shù)據(jù)非常有用。我總結(jié)了一下,給這些方法分了類,大體如下:

2個索引方法:indexOf() 和 lastIndexOf();

5個迭代方法:forEach()、map()、filter()、some()、every();

2個歸并方法:reduce()、reduceRight();

下面我們來具體看一看這些方法怎么用吧!

2、索引方法

索引方法包含indexOf()和lastIndexOf()兩個方法,這兩個方法都接收兩個參數(shù),第一個參數(shù)是要查找的項(xiàng),第二個參數(shù)是查找起點(diǎn)位置的索引,該參數(shù)可選,如果缺省或是格式不正確,那么默認(rèn)為0。兩個方法都返回查找項(xiàng)在數(shù)組中的位置,如果沒有找到,那么返回-1。區(qū)別就是一個從前往后找,一個從后往前找。

讓我們來看一個具體列子吧,首先定義一個數(shù)組:

var dataArray = [1, 7, 5, 7, 1, 3];
 

indexOf():該方法從數(shù)組的開頭開始向后查找。

console.log(dataArray.indexOf(7));              // 1     缺省, 從第一項(xiàng)開始查找

lastIndexOf(): 該方法從數(shù)組的末尾開始向前查找。

console.log(dataArray.lastIndexOf (7));       // 3     缺省, 從末尾第一項(xiàng)開始查找

值得注意的是,在比較第一個參數(shù)與數(shù)組中的每一項(xiàng)時,會使用全等操作符, 要求必須完全相等,否則返回-1。

console.log(dataArray .lastIndexOf ("7"));   // -1,因?yàn)檫@里是字符串,并不是數(shù)值類型
三、迭代方法

迭代方法包含some()、every()、filter()、map()和forEach()五個方法,這些方法都接收兩個參數(shù),第一個參數(shù)是一個函數(shù),他接收三個參數(shù),數(shù)組當(dāng)前項(xiàng)的值、當(dāng)前項(xiàng)在數(shù)組中的索引、數(shù)組對象本身。第二個參數(shù)是執(zhí)行第一個函數(shù)參數(shù)的作用域?qū)ο螅簿褪巧厦嬲f的函數(shù)中this所指向的值。注意,這幾種方法都不會改變原數(shù)組。

every()和 some() 方法有些類似,我們放在一起比較。

every(): 該方法對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù),如果該函數(shù)對每一項(xiàng)都返回 true,則返回true。

some(): 該方法對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù),如果該函數(shù)對任何一項(xiàng)返回 true,則返回true。

var arr = [ 1, 2, 3, 4, 5, 6 ];  
  
    console.log( arr.some( function( item, index, array ){  
        console.log( "item=" + item + ",index="+index+",array="+array );  
        return item > 3;  
    }));  
  
    console.log( arr.every( function( item, index, array ){  
        console.log( "item=" + item + ",index="+index+",array="+array );  
        return item > 3;  
    }));  

可以看到,some方法是碰到一個返回true的值時候就返回了,并沒有繼續(xù)往下運(yùn)行,而every也一樣,第一個值就是一個false,所以后面也沒有進(jìn)行下去的必要了,就直接返回結(jié)果了

filter() : 該方法對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù),返回該函數(shù)會返回 true 的項(xiàng)組成的數(shù)組。利用這個方法可對數(shù)組元素進(jìn)行過濾篩選。

var arr = [
  {"name":"apple", "count": 2},
  {"name":"orange", "count": 5},
  {"name":"pear", "count": 3},
  {"name":"orange", "count": 5},
];
   
var newArr = arr.filter(function(item){
  return item.name === "orange";
});
 
 
console.log("Filter results:",newArr);

[{"name":"orange", "count": 5},{"name":"orange", "count": 5}]

grep(array, function[, invert])方法,還有一個特性,當(dāng)invert缺省或是為false,和filter方法一樣,通常我用filter

map(): 對數(shù)組的每個元素進(jìn)行一定操作(映射)后,會返回一個新的數(shù)組

var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];
?
function getNewArr(){
?????
??return oldArr.map(function(item,index){
????item.full_name = [item.first_name,item.last_name].join(" ");
????return item;
??});
???
}
?
console.log(getNewArr());

-------------
 {first_name: "Colin", last_name: "Toh", full_name: "Colin Toh"}
 {first_name: "Addy", last_name: "Osmani", full_name: "Addy Osmani"}
 {first_name: "Yehuda", last_name: "Katz", full_name: "Yehuda Katz"} 

forEach(): 該方法對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)。這個方法沒有返回值。這個方法其實(shí)就是遍歷循環(huán),和for循環(huán)沒有太大差別。jquery()也提供了相應(yīng)的方法each()方法。

var arr = [1,2,3,4,5,6,7,8];
 
// Uses the usual "for" loop to iterate
for(var i= 0, l = arr.length; i< l; i++){
console.log(arr[i]);
}
 
console.log("========================");
 
//Uses forEach to iterate
arr.forEach(function(item,index){
console.log(item);
});
四、歸并方法

歸并方法包含reduce()和reduceRight()兩個方法,這兩個方法都會迭代數(shù)組中的所有項(xiàng),然后生成一個最終返回值。他們都接收兩個參數(shù),第一個參數(shù)是每一項(xiàng)調(diào)用的函數(shù),函數(shù)接受是個參數(shù)分別是初始值,當(dāng)前值,索引值,和當(dāng)前數(shù)組,函數(shù)需要返回一個值,這個值會在下一次迭代中作為初始值。第二個參數(shù)是迭代初始值,參數(shù)可選,如果缺省,初始值為數(shù)組第一項(xiàng),從數(shù)組第一個項(xiàng)開始疊加,缺省參數(shù)要比正常傳值少一次運(yùn)算。

reduce():該方法從數(shù)組的第一項(xiàng)開始,逐個遍歷到最后一項(xiàng)。

用for循環(huán)來寫
var arr = ["apple","orange","apple","orange","pear","orange"];
 
function getWordCnt(){
  var obj = {};
   
  for(var i= 0, l = arr.length; i< l; i++){
    var item = arr[i];
    obj[item] = (obj[item] +1 ) || 1;
  }
   
  return obj;
}
 
console.log(getWordCnt());
應(yīng)用reduce
    var arr = ["apple","orange","apple","orange","pear","orange"];
     
    function getWordCnt(){
      return arr.reduce(function(prev,next){
        prev[next] = (prev[next] + 1) || 1;
        return prev;
      },{});
    }
console.log(getWordCnt());
reduce 傳入。reduce(callback, initialValue)會傳入兩個變量。回調(diào)函數(shù)(callback)和初始值(initialValue)。假設(shè)函數(shù)它有個傳入?yún)?shù),prev和next,index和array。prev和next你是必須要了解的。

一般來講prev是從數(shù)組中第一個元素開始的,next是第二個元素。但是當(dāng)你傳入初始值(initialValue)后,第一個prev將是initivalValue,next將是數(shù)組中的第一個元素。

var arr = ["apple","orange"];
 
function noPassValue(){
  return arr.reduce(function(prev,next){
    console.log("prev:",prev);
    console.log("next:",next);
     
    return prev + " " +next;
  });
}
function passValue(){
  return arr.reduce(function(prev,next){
    console.log("prev:",prev);
    console.log("next:",next);
     
    prev[next] = 1;
    return prev;
  },{});
}
 
console.log("No Additional parameter:",noPassValue());
console.log("----------------");
console.log("With {} as an additional parameter:",passValue());

顧名思義,reduceRight()就是最后一位往前面算,就不詳細(xì)說了。

五、兼容性問題

ES5里這些處理數(shù)組的新方法,在IE6-IE8瀏覽器還未得到支持,所以我們需要在IE這些低版本瀏覽器中引入這個es5-shim補(bǔ)丁,這樣我們就可以使用它了。

補(bǔ)丁地址:https://github.com/es-shims/e...

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/82566.html

相關(guān)文章

  • JavaScript數(shù)組迭代(遍歷)方法

    摘要:正文和中新增的的數(shù)組迭代方法如下其中,是新增的,其余都是新增的。指數(shù)組后,返回過濾后的新數(shù)組。它的參數(shù)跟方法是一樣的所有數(shù)組成員依次執(zhí)行回調(diào)函數(shù),直到找出第一個返回值為的成員,然后返回該成員。 前言 ES5和ES6中新增了不少東西,對于數(shù)組而言,新增了不少迭代方法,讓我們可以拋棄for循環(huán),更方便的寫JS代碼。 正文 ES5和ES6中新增的的數(shù)組迭代方法如下: forEach map...

    light 評論0 收藏0
  • 一起來實(shí)現(xiàn)es5新增數(shù)組方法

    摘要:再將其返回,注意是返回一個新的數(shù)組,而不是將原數(shù)組直接改變使用方式和類似也是接受一個回調(diào)函數(shù),一個改變內(nèi)部指向的對象。 前言 一直以來想寫一篇關(guān)于es5中新增數(shù)組的使用方法與源碼實(shí)現(xiàn)的文章,拖了挺久了,趁著這夜深人靜,大腦清醒,又困意不在的時刻寫下來。也許有人會問,現(xiàn)如今es6都大行其道了,還學(xué)es5是不是有些過時了,?,溫故而知新,可以從中多學(xué)點(diǎn)嘛,而且我們是要自己實(shí)現(xiàn)這些方法,知其...

    LiuRhoRamen 評論0 收藏0
  • 細(xì)說數(shù)組常用遍歷的方法

    摘要:需要返回值,如果不給,默認(rèn)返回使用場景假定有一個數(shù)值數(shù)組將數(shù)組中的值以雙倍的形式放到數(shù)組寫法方法使用場景假定有一個對象數(shù)組將數(shù)中對象某個屬性的值存儲到數(shù)組中三從數(shù)組中找出所有符合指定條件的元素檢測數(shù)值元素,并返回符合條件所有元素的數(shù)組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

    阿羅 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<