在前端代码中总能见到forEach、some、map、filter、reduce、every、some、find等字段,这些字段具体是什么含义,怎么使用,又有什么区别呢?
JS中常常需要对数组进行遍历、迭代操作。而我们常用的就是for语句对数组进行迭代
1.for[ES1]
- JavaScript 中的
for
循环,它用途广泛,但是当我们要遍历数组时也很麻烦。
- 如果我们不想从第一个数组元素开始循环时它仍然很有用,用其他的循环机制很难做到这一点。
- JavaScript 中的
for
循环很古老,它在 ECMAScript 1 中就已经存在了。for
循环记录arr
每个元素的索引和值:
const arr = ['a', 'b', 'c']; arr.prop = 'property value'; for (let index=0; index < arr.length; index++) { const elem = arr[index]; console.log(index, elem); } // Output: // 0, 'a' // 1, 'b' // 2, 'c'
- 2.for-in[ES1]
- 不是循环遍历数组的好方法,它访问的是属性键,而不是值,作为属性键,数组元素的索引是字符串,而不是数字。
- 它访问的是所有可枚举的属性键(自己的和继承的),而不仅仅是 Array 元素的那些。
for-in
访问继承属性的实际用途是:遍历对象的所有可枚举属性。
for-in
循环与for
循环一样古老,同样在 ECMAScript 1中就存在了。下面的代码用for-in
循环输出 arr 的 key:
const arr = ['a', 'b', 'c']; arr.prop = 'property value'; for (const key in arr) { console.log(key); } // Output: // '0' // '1' // '2' // 'prop'
3.forEach() [ES5]
forEach会遍历数组, 没有返回值, 不允许在循环体内写return, 不会改变原来数组的内容.forEach()也可以循环对象。
let array = [1,2,3,4]; array.forEach((item, index, array) => { console.log(item); });//output
//1
//2
//3 //4
4.
for-of
[ES6]
for-of
在循环遍历数组时非常有效:用来遍历数组元素。
可以使用
await。
const arr = ['chocolate', 'vanilla', 'strawberry']; for (const [index, elem] of arr.entries()) { console.log(index, elem); } // Output: // 0, 'chocolate' // 1, 'vanilla' // 2, 'strawberry'
for-of
不仅可以遍历数组,还可以遍历可迭代对象,例如遍历 Map:
const myMap = new Map() .set(false, 'no') .set(true, 'yes') ; for (const [key, value] of myMap) { console.log(key, value); } // Output: // false, 'no' // true, 'yes'
5.map()[ES6]
map 遍历数组, 会返回一个新数组, 不会改变原来数组里的内容
let array = [1, 2, 3, 4]; let temp = array.map((item, index, array) => { return item * 10; }); console.log(temp); // [10, 20, 30, 40]; console.log(array); // [1, 2, 3, 4]
6.filter()[ES6]
filter 会过滤掉数组中不满足条件的元素, 把满足条件的元素放到一个新数组中, 不改变原数组
let array = [1, 2, 3, 4]; let temp = array.filter((item, index, array) => { return item > 3; }); console.log(temp); // [4] console.log(array); // [1, 2, 3, 4]
7.reduce()[ES6]
x 是上一次计算过的值, 第一次循环的时候是数组中的第1个元素
y 是数组中的每个元素, 第一次循环的时候是数组的第2个元素
//reduce 循环(购物车案例) const arr = [ { id: 2, name: "你", state: true, price: 30, count: 2 }, { id: 2, name: "我", state: true, price: 10, count: 4 }, { id: 2, name: "他", state: false, price: 32, count: 6 }, ]; // arr.filter(item=>item.state).reduce((累加的结果,当前循环项)=>{ },初始值) const result = arr .filter((item) => item.state) //过滤 .reduce((amt, item) => { //累加计算 return (amt += item.price * item.count); }, 0); console.log(result);//100
8.every()[ES6]
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
every() 方法使用指定函数检测数组中的所有元素:
如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
如果所有元素都满足条件,则返回 true。let array = [1, 2, 3, 4]; let bo = array.every((item, index, array) => { return item > 2; }); console.log(bo); // false;
9.some()[ES6]
some() 方法用于检测数组中的有些元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:
如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素,则返回false。let array = [1, 2, 3, 4]; let temp = array.some((item, index, array) => { return item > 5; }); console.log(temp); // false
10.find()[ES6]
find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。
var ages = [3, 10, 18, 20]; function checkAdult(age) { return age >= 18; } console.log(ages.find(checkAdult)) //18
some、every返回true、false。
map、filter返回一个新数组。
reduce让数组的前后两项进行某种计算,返回最终操作的结果。
find 返回符合条件的第一个数组元素
forEach 无返回值