幾種遍歷數據方法及性能
forEach()
數組中的每個元素都會通過forEach進行一些改變,會改變原數組。
peoples.forEach(function (people) {
people.doSomething();
});
map()
數組中的元素通過map進行一些改變後返回一個新數組,新數組中的元素都是原數組中的元素doSomething()後的結果,元素順序一一對應。(return是必須的)
var newPeoples = peoples.map(function (people) {
return people.doSomething();
});
以上方法中的回調支持3個參數,value遍歷的每一項;index對應的數組索引,array數組本身。
[].forEach/map(function(value, index, array) {});
reduce()
通常用於數組求和,回調必須接收兩個參數,簡單說就是第一項和第二項相加後的結果再和第三項相加以此類推直到最後一項。
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x + y;
}); // 25
filter()
通常用於過濾,把傳入的函數依次作用於每個元素,然後根據返回值是true還是false決定保留還是丟棄該元素,返回一個過濾後的新數組。
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
for...in
用於遍歷數組下標或者對象的屬性(對數組下標或對象的屬性進行循環操作)
for...of
用於遍歷數組值或者對象的值
for...in / for...of區別演示:
let arr = [3, 5, 7];
arr.foo = "hello";
for (let i in arr) {
console.log(i); // logs "0", "1", "2", "foo"
}
for (let i of arr) {
console.log(i); // logs "3", "5", "7" // 註意這裏沒有 hello
}
性能方面
只談性能,顯然是 for > forEach > map
map 會返回一個等長數組,forEach 不會,所以 forEach 大於 map。
如果你需要將數組按照某種規則映射為另一個數組,就應該用 map。
如果你需要進行簡單的遍歷,用 forEach 或者 for of。
如果你需要對叠代器進行遍歷,用 for of。
如果你需要過濾出符合條件的項,用 filter。
如果你需要先按照規則映射為新數組,再根據條件過濾,那就用一個 map 加一個 filter。不要擔心這樣會慢,你那點數據量瀏覽器根本不 care。
如果你真的需要考慮性能,或者有 break 的需求,就用 for 吧。
幾種遍歷數據方法及性能