map、reduce、filter、for...of、for...in等總結

總結初衷

1. 一直缺少寫文章的能力和動力，受大佬啓發，都9102年了也要慢慢改變本身，寒冬來臨只能從自我提高着手了。
2. 另外一方面是出於加深瑣碎知識點印象的考慮，避免下次使用還要想一下。

---

map：

用法說明：

map()方法返回一個新數組，結果爲該數組中的每個元素都調用函數後返回的結果。

語法：

arr.map(callback(currentValue[, index[, array]])[, thisArg])

參數說明：

currentValue  數組當前元素
index(可選)   數組當前元素的下標
array(可選)   map方法調用的數組
thisArg(可選) 執行callback函數時使用的this值
複製代碼

Demo：

// 將原數組統一加上8
const arr1 = [1, 2, 3, 4, 5];
const arr_temp = arr1.map(c => {
  return c + 8;
});
console.log(arr_temp); // [9, 10, 11, 12, 13]
console.log(arr1); // [1, 2, 3, 4, 5]

// 格式化帶對象的數組
const arr_kv = [
  {key: 1, value: 1},
  {key: 2, value: 2},
  {key: 3, value: 3},
];
const arr_format = arr_kv.map(c => {
  let obj = {};
  obj[c.key] = c.value;
  return obj;
});
console.log(arr_format); // [{ '1': 1 }, { '2': 2 }, { '3': 3 }]
console.log(arr_kv); // [{ key: 1, value: 1 }, { key: 2, value: 2 }, { key: 3, value: 3 }]
複製代碼

---

filter：

用法說明：

filter()方法返回一個新數組，新數組中的元素都是經過篩選，符合條件的全部元素，filter()不會對空數組檢測。

語法：

arr.filter(callback(currentValue[, index[, array]])[, thisArg])

參數說明：

currentValue  數組當前元素
index(可選)   數組當前元素的下標
array(可選)   map方法調用的數組
thisArg(可選) 執行callback函數時使用的this值
複製代碼

Demo:

// 返回數組中是奇數的元素
const arr2 = [1, 2, 3, 4, 5];
const arr2_odd = arr2.filter(c => {
  return (c % 2) !== 0;
});
console.log(arr2_odd); // [1, 3, 5]
console.log(arr2); // [1, 2, 3, 4, 5]
複製代碼

---

foreach：

用法說明：

foreach()方法沒有返回值，該方法調用數組的每一個元素，並將元素傳遞給回調函數。
缺點：不能中途控制，沒法break和return終止循環一旦開始只能等循環結束。

語法：

arr.foreach(callback(currentValue[, index[, array]])[, thisArg])
複製代碼

參數說明：

currentValue  數組當前元素
index(可選)   數組當前元素的下標
array(可選)   map方法調用的數組
thisArg(可選) 執行callback函數時使用的this值
複製代碼

Demo:

// 複製一個數組
const arr3 = [1, 2, 3, 4, 5];
const copy = [];
arr3.forEach(c => {
  copy.push(c);
});
console.log(copy); // [1, 2, 3, 4, 5]
複製代碼

---

reduce：

用法說明：

reduce()方法對數組中的每個元素執行一次函數並將結果彙總爲一個值，另外reduce也可做爲高階函數用於函數的compose。

語法：

arr.reduce(callback(accumulator[, currentValue[, currentIndex[, array]]]))[, initialValue]
複製代碼

參數說明：

accumulator          累計器累計回調的返回值或initialValue
currentValue         數組中正在處理的元素
currentIndex(可選)   數組中正在處理的元素的索引
array(可選)          調用reduce()的數組
initialValue(可選)   第一次調用callback函數的第一個參數值
複製代碼

Demo:

// 返回累積值
const arr4 = [1, 2, 3, 4, 5];
const arr4_result = arr4.reduce((a, c) => {
  return a + c;
});
console.log(arr4_result); // 15

const arr5 = [1, 2, 3, 4, 5];
const arr5_result = arr5.reduce((a, c) => {
  return a + c;
}, 10);
console.log(arr5_result); // 25

// 取出對象中的 name 單獨放在一個數組中
const arr6 = [
  {id: 10, name: 'zhangsan'},
  {id: 11, name: 'lisi'},
  {id: 12, name: 'wangwu'},
];
const arr6_result = arr6.reduce((a, c) => {
  return [
    ...a,
    c.name
  ];
}, []);
console.log(arr6_result); // [ 'zhangsan', 'lisi', 'wangwu' ]
複製代碼

---

for...in：

用法說明：

for...in任意順序遍歷一個對象的可枚舉屬性。對於每一個不一樣的屬性，語句都會被執行。可是隻遍歷可枚舉的屬性，須要注意的是枚舉的時候還會枚舉到對象從其構造函數原型中繼承的屬性。for...of讀取的是鍵值 for...in讀取的是鍵名。

語法：

for (variable in object) {...}
複製代碼

參數說明：

variable 屬性名
object   被迭代枚舉其屬性的對象
複製代碼

Demo:

// 遍歷key
const obj = {
  name: 'sonderzzz',
  age: 26,
  sex: 'male',
};
for (let v in obj) {
  console.log(`${v} is ${obj[v]}`);
}

// 注意：有原型方法時，for...in會遍歷到原型鏈上的屬性
const arr7 = [1, 2, 3, 4, 5];
Array.prototype.len = function() {
  return this.length;
};
arr7.len();
for (let v in arr7) {
  console.log(v); // 0 1 2 3 4 len
}
複製代碼

---

for...of：

用法說明：

for...of一個數據結構只要部署了Symbol.iterator屬性，就被視爲具備 iterator 接口，就能夠用for...of循環遍歷它的成員。for...of讀取的是鍵值 for...in讀取的是鍵名。

語法：

for (variable of object) {...}
複製代碼

參數說明：

variable 屬性名
object   被迭代枚舉其屬性的對象
複製代碼

Demo:

const arr8 = ['red', 'green', 'blue'];
for (let v of arr8) {
  console.log(v);
}
複製代碼

---

some：

用法說明：

some()方法用於檢測數組中的元素是否知足指定條件，依次執行數組中的每一個元素，一旦有元素知足則後續再也不執行返回true。

語法：

arr.some(callback(currentValue[, index[, array]])[, thisArg])
複製代碼

參數說明：

currentValue  數組當前元素
index(可選)   數組當前元素的下標
array(可選)   map方法調用的數組
thisArg(可選) 執行callback函數時使用的this值
複製代碼

Demo:

// 判斷數組中是否有大於5的元素
const arr10 = [1, 2, 3, 4, 5];
const arr10_result = arr10.some(c => {
  return c > 5;
});
console.log(arr10_result); // false
複製代碼

---

every：

用法說明：

every()方法用於檢測數組中每個元素是否知足指定條件，有一個元素不知足則後續再也不執行返回false。

語法：

arr.every(callback(currentValue[, index[, array]])[, thisArg])
複製代碼

參數說明：

currentValue  數組當前元素
index(可選)   數組當前元素的下標
array(可選)   map方法調用的數組
thisArg(可選) 執行callback函數時使用的this值
複製代碼

Demo:

// 判斷數組中是否每一個元素都小於5
const arr11 = [1, 2, 3, 4, 5];
const arr11_result = arr11.every(c => {
  return c < 5;
});
console.log(arr11_result); // false
複製代碼

總結

若是須要將數組按照某種規則映射爲另外一個數組應該用 map。 若是須要進行簡單的遍歷，用 forEach 或者 for...of。 若是須要對迭代器進行遍歷，用 for...of。 若是須要過濾出符合條件的項，用 filter。 若是須要先按照規則映射爲新數組，再根據條件過濾，那就用一個 map 加一個 filter。 最後慎用 for...in