總結初衷
- 一直缺乏寫文章的能力和動力，受大佬啟發，都9102年了也要慢慢改變自己，寒冬來臨只能從自我提升著手了。
- 另一方面是出於加深瑣碎知識點印象的考慮，避免下次使用還要想一下。
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