数组中的方法

forEach循环

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数

forEach() 方法的特性是: 遍历一旦开始则不能中止,无法使用 return 等方式跳出循环

代码示例:

const arr = ['aaa', 'bbb', 'ccc', 'ddd','eee']
arr.forEach((item, index)=> {
	console.log('OK');
	if(item === 'ccc') {
		console.log(index);
		return
	}
})

运行结果:

在寻找到指定的元素后,没有被 return 跳出循环,而是继续将遍历完成,这样在某些情况下会浪费性能

some循环

some循环在找到指定的项之后,可以通过 return true 固定写法终止 some 循环

代码示例:

arr.some((item,index) => {
	console.log('OK');
	if(item === 'ccc') {
		console.log(index);
		// 在找到对应的项之后 可以通过 return true 固定语法终止 some 循环
		return true
	}
})

运行结果:

every循环

在需要判断例如: 购物车中的商品是否被全选 之类的场景时,可以使用 every 循环来对条件进行判断

代码示例:

const arr = [
	{id: 1, name: '西瓜', state: true},
	{id: 2, name: '榴莲', state: false},
	{id: 3, name: '草莓', state: true}
]

// 需求: 判断数组中 水果是否被全选了 完整写法为 item => item.state === true
const result = arr.every(item => item.state)
console.log(result);

运行结果:

reduce循环

在需要类似于: 购物车计算所选商品总价的情景,可以用到 reduce 方法

代码示例:

const arr = [
	{id: 1, name: '西瓜', state: true, price: 10, count: 1},
	{id: 2, name: '榴莲', state: false, price: 80, count: 2},
	{id: 3, name: '草莓', state: true, price: 20, count: 3}
]

// 需求: 把购物车数组中 已勾选的水果总结累加起来
// 普通写法
// let amt = 0 // 总价
// arr.filter(item => item.state).forEach(item => {
// 	amt += item.price * item.count
// })
// console.log(amt);

// reduce 方法写法
// 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);

循环开始的时候,累加的结果还没有值,就从初始值中获取

每循环一项,都会把当前的总价格累加给 amt,第一次循环 return 出来的值,会作为第二次循环的初始值,即累加的结果,接着往后迭代

运行结果:

简写形式

上述代码可以简写成如下形式:

const result = arr.filter(item => item.state).reduce((amt, item) => amt += item.price * item.count, 0)