JS中 map, filter, some, every, forEach, for in, for

yankeys 發布于2019-08-20 15:26 / 456人閱讀

摘要：有返回值，返回一個符合條件的元素數組返回一個，判斷是否有元素符合條件，如果有一個元素符合條件，則循環會終止。返回一個遍歷器對象，用來遍歷鍵名鍵值組成的數組。這三個方法調用后生成的遍歷器對象，所遍歷的都是計算生成的數據結構。

1.map

有返回值，返回一個新的數組，每個元素為調用func的結果。

let list = [1, 2, 3, 4, 5];
let other = list.map((d, i) => {
    return d * 2;
});
console.log(other);
// print: [2, 4, 6, 8, 10]

2.filter

有返回值，返回一個符合func條件的元素數組

let list = [1, 2, 3, 4, 5];
let other = list.filter((d, i) => {
    return d % 2;
});
console.log(other);
// print: [1, 3, 5]

3.some

返回一個boolean，判斷是否有元素符合func條件，如果有一個元素符合func條件，則循環會終止。

let list = [1, 2, 3, 4, 5];
list.some((d, i) => {
    console.log(d, i);
    return d > 3;
});
// print: 1,0 2,1 3,2 4,3
// return false

4.every

返回一個boolean，判斷每個元素是否符合func條件，有一個元素不滿足func條件，則循環終止，返回false。

let list = [1, 2, 3, 4, 5];
list.every((d, i) => {
    console.log(d, i);
    return d < 3;
});
// print: 1,0 2,1 3,2
// return false

5.forEach

沒有返回值，只針對每個元素調用func。
優點：代碼簡介。
缺點：無法使用break，return等終止循環。

let list = [1, 2, 3, 4, 5];
let other = [];
list.forEach((d, i) => {
    other.push(d * 2);
});
console.log(other);
// print: [2, 4, 6, 8, 10]

6.for in

for-in循環實際是為循環”enumerable“對象而設計的，for in也可以循環數組，但是不推薦這樣使用，for–in是用來循環帶有字符串key的對象的方法。
缺點：只能獲得對象的鍵名，不能直接獲取鍵值。

var obj = {a:1, b:2, c:3};
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}
// print:  "obj.a = 1" "obj.b = 2" "obj.c = 3"

7.for of

for of為ES6提供，具有iterator接口，就可以用for of循環遍歷它的成員。也就是說，for of循環內部調用的是數據結構的Symbol.iterator方法。
for of循環可以使用的范圍包括數組、Set和Map結構、某些類似數組的對象（比如arguments對象、DOM NodeList對象）、后文的Generator對象，以及字符串。
有些數據結構是在現有數據結構的基礎上，計算生成的。比如，ES6的數組、Set、Map都部署了以下三個方法，調用后都返回遍歷器對象。

entries

entries() 返回一個遍歷器對象，用來遍歷[鍵名, 鍵值]組成的數組。對于數組，鍵名就是索引值；對于Set，鍵名與鍵值相同。Map結構的iterator接口，默認就是調用entries方法。

keys

keys() 返回一個遍歷器對象，用來遍歷所有的鍵名。

values

values() 返回一個遍歷器對象，用來遍歷所有的鍵值。
這三個方法調用后生成的遍歷器對象，所遍歷的都是計算生成的數據結構。

// 字符串
let str = "hello";
for (let s of str) {
  console.log(s); // h e l l o
}

// 遍歷數組
let list = [1, 2, 3, 4, 5];
for (let e of list) {
    console.log(e);
}
// print: 1 2 3 4 5

// 遍歷對象
obj = {a:1, b:2, c:3};
for (let key of Object.keys(obj)) {
  console.log(key, obj[key]);
}
// print:  a 1 b 2 c 3
說明：對于普通的對象，for...in循環可以遍歷鍵名，for...of循環會報錯。
一種解決方法是，使用Object.keys方法將對象的鍵名生成一個數組，然后遍歷這個數組。

// entries
let arr = ["a", "b", "c"];
for (let pair of arr.entries()) {
  console.log(pair);
}
// [0, "a"]
// [1, "b"]
// [2, "c"]

GPU云服務器云服務器 for-in js js for-in for循環和foreach java中for

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82238.html

JS中some(),every(),forEach(),map(),filter()區別

摘要：在中為新增了幾個方法，，，，，也就是一共有這么多方法了。剛開始接觸這些倒也記得不是很清楚，在此紀錄一下以加深影響。我主要從兩個角度來理解和記憶吧，一個是的使用，一個是內部實現。 JS在1.6中為Array新增了幾個方法map()，filter()，some()，every()，forEach()，也就是一共有這么多方法了。剛開始接觸這些倒也記得不是很清楚，在此紀錄一下以加深影響。我主...

CoderBear 2019-08-23 14:05 評論0 收藏0
JS 數組循環遍歷方法的對比

摘要：循環方法方法不改變原數組方法會給原數組中的每個元素都按順序調用一次函數。篩選出過濾出數組中符合條件的項組成新數組代碼方法方法為數組中的每個元素執行一次函數，直到它找到一個使返回表示可轉換為布爾值的值的元素。 showImg(https://segmentfault.com/img/bV2QTD?w=1600&h=500); 前言 JavaScript 發展至今已經發展出多種數組的循環遍...

BlackFlagBin 2019-08-26 11:31 評論0 收藏0
jS:關于對象遍歷和數組遍歷的那些事

摘要：如圖遍歷數組遍歷數組元素并以某種方式處理每個元素是一個常見的操作。如圖不過，里的功能比較強大，可以遍歷而且返回值是的則被省略掉總結遍歷對象，遍歷出來的是鍵名，而不是鍵值，參數必須是對象。可能是由于職業的關系，下班之后完全不想Open PC，但很多知識點有必要自己做個小小總結。本人之前對原生Array和Object完全沒概念。遍歷對象的方法： Object.keys(Object)...

qingshanli1988 2019-08-20 18:16 評論0 收藏0
關于JS循環遍歷

摘要：關于循環遍歷寫下這篇文章的目的，主要是想總結一下關于對于集合對象遍歷的方式方法，以及在實際應用場景中怎樣去使用它們。的作用主要是去遍歷對象的可枚舉屬性。例如索引，數值打印結果為當第二項不滿足條件式跳出循環，返回。關于JS循環遍歷寫下這篇文章的目的，主要是想總結一下關于JS對于集合對象遍歷的方式方法，以及在實際應用場景中怎樣去使用它們。本文會主要介紹：while,for,forEac...

eternalshallow 2019-08-21 11:38 評論0 收藏0
IE兼容forEach/map/every/some/indexOf/filter/getCompu

摘要：修復兼容等新方法。在第版時，被添加進標準因此在某些實現環境中不被支持。是在最近的標準中新添加的方法所以一些舊版本的瀏覽器可能沒有實現該方法。算法假定和擁有它們的初始值。修復IE兼容forEach、indexOf、filter、getComputedStyle等新方法。補充：此文是從這里搜集來的developer.mozilla.org，只是個人做個筆記，為了方便以后對JSLite萬一...

XUI 2019-08-22 10:55 評論0 收藏0