Javascript循环总结：filter(), find(), forEach(), map(), every(), some(), reduce()

公用

// 相同的陣列 var people = [ { name: 'Casper', like: '鍋燒意麵', age: 18 }, { name: 'Wang', like: '炒麵', age: 24 }, { name: 'Bobo', like: '蘿蔔泥', age: 1 }, { name: '滷蛋', like: '蘿蔔泥', age: 3 } ];

Array.prototype.filter()

filter() 會回傳一個陣列，其條件是 return 後方為 true 的物件

语法：

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg]) 参数 参数解释callback此函式為一個斷言，用於測試陣列中的每個元素。回傳值為 true 時將當前的元素保留至新陣列中，若為 false 則不保留。可傳入三個參數

element

原阵列目前所迭代处理中的元素index原阵列目前所迭代处理中的元素索引

array

呼叫filter方法的阵列thisArg可选的。执行callback回呼函式的this值

 

var filterEmpty = people.filter(function (item, index, array) { }); console.log(filterEmpty); // 沒有條件，會是一個空陣列 var filterAgeThan5 = people.filter(function (item, index, array) { return item.age > 5; // 取得大於五歲的 }); console.log(filterAgeThan5); // Casper, Wang 這兩個物件 var filterDouble = people.filter(function (item, index, array) { return index % 2 === 1; // 取得陣列中雙數的物件 }); console.log(filterDouble); // Wang, 滷蛋 這兩個物件

 

結果： 

Array filter() 方法、Array.prototype.filter()、filter

 

Array.prototype.find()

find() 與 filter() 很像，但 find() 只會回傳一次值，且是第一次為 true 的值。若元素通過測試則為其值；否則為 undefined。

语法：

arr.find(callback[, thisArg]) 参数 参数 element在陣列中正被處理的元素index索引array呼叫find的阵列thisArg执行callback函式时被当做this的物件callback会处理阵列中每个元素的函数，它使用三个参数

 

var findEmpty = people.find(function(item, index, array){}); console.log(findEmpty); // 沒有條件，會是 undefined var findAgeThan5 = people.find(function(item, index, array){ return item.age > 5; // 取得大於五歲的 }); console.log(findAgeThan5); // 雖然答案有兩個，但只會回傳 Casper 這一個物件 var findLike = people.find(function(item, index, array){ return item.like === '蘿蔔泥'; // 取得陣列 like === '蘿蔔泥' }); console.log(findLike); // 雖然答案有兩個，但只會回傳第一個 Bobo 物件

結果：

Array.prototype.find()

 

Array.prototype.forEach()

forEach 是這幾個陣列函式最單純的一個，不會額外回傳值，只單純執行每個陣列內的物件或值。

語法

arr.forEach(function callback(currentValue[, index[, array]]) { //your iterator }[, thisArg]); var forEachIt = people.forEach(function(item, index, array){ console.log(item, index, array); // 物件, 索引, 全部陣列 return item; // forEach 沒在 return 的，所以這邊寫了也沒用 }); console.log(forEachIt); // undefined people.forEach(function(item, index, array){ item.age = item.age + 1; // forEach 就如同 for，不過寫法更容易 }); console.log(people); // 全部 age + 1

 

結果：

JS-为什么forEach无法跳出循环、Array.prototype.forEach

 

Array.prototype.map()

如果不回傳則是 undefined回傳數量等於原始陣列的長度 map() 不会对空数组进行检测。map() 不会改变原始数组map() 方法按照原始数组元素顺序依次处理元素。map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

语法

array.map(function(currentValue,index,arr), thisValue)

参数说明

参数描述function(currentValue, index,arr)必须。函数，数组中的每个元素都会执行这个函数 函数参数: 参数描述currentValue必须。当前元素的值index可选。当前元素的索引值arr可选。当前元素属于的数组对象thisValue可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。 var mapEmpty = people.map(function (item, index, array) {}); console.log(mapEmpty); // [undefined, undefined, undefined, undefined] var mapAgeThan5 = people.map(function (item, index, array) { return item.age > 5; // 比較大於五歲的 }); console.log(mapAgeThan5); // [true, true, false, false] var mapAgeThan5_2 = people.map(function (item, index, array) { // 錯誤示範 if (item.age > 5) { return item; // 回傳大於五歲的 } return false; // 別以為空的或是 false 就不會回傳 }); console.log(mapAgeThan5_2); // [{name: 'Casper'...}, {name: 'Wang'...}, false, false] var mapEat = people.map(function (item, index, array) { if (item.like !== '蘿蔔泥') { return `${item.like} 好吃`; } else { return `${item.like} 不好吃`; } }); console.log(mapEat); // ["鍋燒意麵 好吃", "炒麵 好吃", "蘿蔔泥 不好吃", "蘿蔔泥 不好吃"]

const arr=[ { title: 'aa' }, { title: 'bb' }, { title: 'cc' }, { title: 'dd' } ].map((e, index) => ({ ...e, icon: `${index}.svg` })) console.log(arr)

概念轉自：JavaScript Array map() 方法、map、Array.prototype.map()

map()可以用來做數組的加減乘除

forEach与map()有什么区别

for...of

 

Array.prototype.every()

every() 可以檢查所有的陣列是否符合條件，這僅會回傳一個值 true or false，可以用來檢查陣列中的內容是否符合特定條件。

語法

arr.every(callback[, thisArg]) var ans = people.every(function (item, index, array) { console.log(item, index, array); // 物件, 索引, 全部陣列 return item.age > 10 // 當全部 age 大於 10 才能回傳 true }); console.log(ans); // false: 只要有部分不符合，則為 false var ans2 = people.every(function (item, index, array) { return item.age < 25 }); console.log(ans2); // true: 全部 age 都小於 25

Array.prototype.every()

 

Array.prototype.some()

some() 與 every() 非常接近，都是回傳 true or false，差異僅在 every() 需完全符合，some() 僅需要部分符合。

語法

arr.some(callback[, thisArg]) var ans = people.some(function (item, index, array) { return item.age > 10 // 當全部 age 大於 10 才能回傳 true }); console.log(ans); // true: 只要有部分符合，則為 true var ans2 = people.some(function (item, index, array) { return item.age < 25 }); console.log(ans2); // true: 只要有部分符合，則為 true var ans2 = people.some(function (item, index, array) { return item.age > 25 }); console.log(ans2); // false: 全部都不符合則為 false

 

Array.prototype.some()

 

Array.prototype.reduce()

reduce() 和其他幾個差異就很大了，他可以與前一個回傳的值再次作運算，參數包含以下：

accumulator: 前一個參數，如果是第一個陣列的話，值是以另外傳入或初始化的值currentValue: 當前變數currentIndex: 當前索引array: 全部陣列

語法

arr.reduce(callback[accumulator, currentValue, currentIndex, array], initialValue) var reduceEmpty = people.reduce(function(accumulator, currentValue, currentIndex, array){ }); console.log(reduceEmpty); // 沒有條件，會是 undefined var reducePlus = people.reduce(function(accumulator, currentValue, currentIndex, array){ // 分別為前一個回傳值, 目前值, 當前索引值 console.log(accumulator, currentValue, currentIndex); return accumulator + currentValue.age; // 與前一個值相加 }, 0); // 傳入初始化值為 0 console.log(reducePlus); // 總和為 46 var reducePlus = people.reduce(function(accumulator, currentValue, currentIndex, array){ console.log('reduce', accumulator, currentValue, currentIndex) return Math.max( accumulator, currentValue.age ); // 與前一個值比較哪個大 }, 0); console.log(reducePlus); // 最大值為 24

 

JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()] 、所有循环类型、Array.prototype.reduce()

 

參考： Array.of()和Array.from()的用法、for...of循环、所有循环类型、不数不知道，一数吓一跳，JS里循环竟高达10多种 ！