ES6中 forEach() map() some() every() filter() reduce() find() 的區別

背景介紹

使用JavaScript數組經常須要對數組進行遍歷、迭代操做。而咱們經常使用的就是for語句對數組進行迭代。然而在ECMAscript5已經爲數組定義了不少迭代的方法，如：foreach、map、some、every、filter、reduce、find，如今咱們就來說講這些api的用法。

let arr = [1,2,3,4,5,6,7];
複製代碼

foreach()

/* * 沒有返回值，只針對每一個元素調用func。 * 優勢：代碼簡介。 * 缺點：沒法使用break，return等終止循環 */
//ES5寫法
arr.forEach(function(item,index){
    console.log(item);   // 1 2 3 4 5 6 7
})
//ES6寫法
arr.forEach((item,index) => {
    console.log(item); // 1 2 3 4 5 6 7
    return item
})
複製代碼

map()

/* * 有返回值，返回一個新的數組，每一個元素爲調用func的結果。 */
let newArr = arr.map((item,index) => {
    return item*2
})
console.log(newArr);  // [2,4,6,8,10,12,14]
複製代碼

some()

/* * 返回一個Boolean，判斷是否有元素符合func，若是有一個符合條件，就會終止循環，返回true。 */
 arr.some((item,index) => {
    return item > 5;  // true
 })
複製代碼

every()

/* * 返回一個Boolean，判斷每個元素是否都符合func，若是有一個不符合，就會終止循環，返回false。 */
arr.every((item,index) => {
    return item < 10;  //true
})
複製代碼

filter()

/* * 有返回值，返回一個符合func條件的數組的集合 */
 let newArr = arr.filter((item,index) => {
    return item > 3;
 })
 console.log(newArr);  // [4,5,6,7]
複製代碼

reduce()

/* * 讓數組中的前項和後項作某種運算，並返回運算結果 */
 let res = arr.reduce((prev,next) => {
    return prev + next;
 })
 console.log(res);  // 28
複製代碼

find()

/* * 不建立新數組，不改變元素組 * 在判斷中一旦某個元素符合func，立馬跳出循環，返回當前符合條件的元素 */
let res = arr.find((item,index) => {
    console.log( 'arr[' + index + '] = ' item );   // arr[3] = 4 
    return item > 3;
})
console.log(res);  // 4
複製代碼

總結

這也是我最近在面試中遇到的問題總結，若有任何建議和疑問，歡迎小夥伴提出並指正！ QQ ： 1062256583 郵箱 ： 1062256583@qq.com