JavaScript專題---JavaScript之數組五大迭代方法總結

COVER:
https://blog.csdn.net/u010323023/article/details/52759801
如果去問一個不太了解JavaScript數組的開發(fā)人員,JavaScript的數組有多少種迭代方法,你可能得到的答案為,for/while/do-while...等等,這個是循環(huán)中的方法,和我們數組的迭代還是有一些區(qū)別的。雖然在數組中我們也可以用這些方法去迭代。但是,為了裝逼為了飛,我們就來寫一點帶有腳本味道的代碼吧!

1、every(): 對數組中的每一項運行給定的函數,如果該函數對每一項都返回true,則結果返回true。
2、filter(): 對數組中的每一項運行給定函數,返回該函數會返回true的項組成的數組。
3、forEach(): 對數組中的每一項運行給定函數,這個方法沒有返回值。
4、map(): 對數組中的每一項運行給定函數,返回每次函數調用的結果組成的數組。
5、some(): 對數組中的每一項運行給定函數,如果該函數任意一項返回true,則返回true。

以上的方法都不會修改數組中包含的值。
在這些方法中,最相似的是every()和some()。他們都用于查詢數組中的項是否滿足某個條件。對every來說,傳入的函數必須對數組中的每一項都返回true,這個方法才返回true;否則,他就返回false。在這里我們總結為有假則假,都真才真。而some()方法則是只要傳入的函數對數組中的任何一項返回true,就返回true。請看下面例子:

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

var everyResult = numbers.every(function(item, index, array) {
    return (item > 2);
});

var someResult = numbers.some(function(item) {
    return (item > 2);
});

console.log(everyResult);      //false
console.log(someResult);        //true

需要提醒的是,在some()方法的函數中我并沒有傳入三個參數,而是不在函數體內用不到后兩個參數,所以我省略了。以上的迭代調用了every()和some(),傳入的函數只要給定項大于2就會返回true。對于every(),它返回false,因為數組中只有部分滿足條件。對于some(),結果返回true,因為數組中至少有一項是大于2的。

下面再來看看filter()函數,他利用指定的函數確定是否在返回的數組中包含某一項,就是說根據指定的函數來篩選符合條件的項組成新的數組并返回。例如,要返回一個所有值都大于2的數組,可以使用下面的代碼:

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var filterResult = numbers.filter(function(item) {
    return (item > 2);
});

console.log(filterResult);  \\[3, 4, 5, 4, 3]

這里,通過調用filter()方法創(chuàng)建并返回了包含3、4、5、4、3的數組,因為傳入的函數對它們每一項都返回true。這個方法對查詢符合某些條件的所有數組項非常有用。

map()方法也返回一個數組,而這個數組的每一項都是在原始數組中的對應項上運行傳入函數的結果。例如,可以給數組中的每一項乘以2,然后返回這些乘積組成的數組,如下所示:

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var mapResult = numbers.map(function(item) {
    return (item * 2);
});

console.log(mapResult);     //[2, 4, 6, 8, 10, 8, 6, 4, 2]

以上代碼返回的數組中包含給每個數乘以2之后的結果。這個方法適合創(chuàng)建包含的項與另一個數組一一對應的數組。

最后一個方法就是forEach()。它只是對數組中的每一項運行傳入的函數。這個方法沒有返回值,本質上與用for循環(huán)迭代數組一樣,來看一個例子:

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach(function(item, index, arr) {
    //這里執(zhí)行一些操作
});

這些數組方法通過執(zhí)行不同的操作,可以大大方便處理數組的任務。還是那句話,在自己的腳本里面寫一些有腳本味道的代碼,能夠提高代碼的質量和可讀性,甚至減少代碼量。支持這些迭代方法的瀏覽器有IE9+、FireFox 2+、Safari 3+、Opera 9.5+和chrome。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創(chuàng)建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,268評論 0 4
  • ??引用類型的值(對象)是引用類型的一個實例。 ??在 ECMAscript 中,引用類型是一種數據結構,用于將數...
    霜天曉閱讀 1,088評論 0 1
  • 數組是值的有序集合。每個值叫做一個元素,而每個元素在數組中有一個位置,以數字表示,稱為索引。 JavaScript...
    劼哥stone閱讀 1,142評論 6 20
  • 本文總結了數組所有的方法。 1. 檢測對象是不是數組 instanceof操作符 Array.isArray()方...
    胡不歸vac閱讀 692評論 0 1
  • 二十一天寫作營快要結束的時候,我著實困惑了幾天,主要是怕沒動力寫不下去,這二十多天不是白學了嗎? 我刻意地去看別人...
    掃云閱讀 175評論 26 13