for...in、for...of、forEach、some、every、filter、reduce 数组遍历的几种方法

for…in - 语句遍历对象的枚举的属性，以任意顺序

for…of - 语句遍历可迭代对象定义要遍历的数据，可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

for…in

let list = [{ name: "张三", age: 10 }, { name: "李四", age: 20 },  { name: "赵五", age: 30 }]
for (index in list) {
  console.log(list[index])
}

结果:

for…of

注意：for…of不能操作 对象{ }，只能操作数组[ ]

let list = [{ name: "张三", age: 10 }, { name: "李四", age: 20 }, { name: "赵五", age: 30 }]
for (let item of list) {
  console.log(item)
}

forEach

• 注意：forEach有个缺点：不能使用 break, continue 和 return中断运行，只能一直遍历完。

forEach方法中的function回调有三个参数：
第一个参数是遍历的数组内容，
第二个参数是对应的数组索引，
第三个参数是数组本身

let list = [{ name: "张三", age: 10 }, { name: "李四", age: 20 }, ]
list.forEach((item, index) => console.log(item.name))

输出：

张三
李四

第三个参数使用，使用例子：

var arr = [1,2,3,4];
var sum =0;
arr.forEach(function(value,index,array){

 array[index] == value; //结果为true

 sum+=value; 

 });

console.log(sum); //结果为 10

map

map() 返回一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
例子：把age都改成0

let list = [{ name: "张三", age: 10 }, { name: "李四", age: 20 }, { name: "赵五", age: 30 }]

let newList=list.map((item, index, list) => {
  let a={name:item.name,age:0}
  return a   //返回a 给新数组newList
})
console.log(newList)

结果：

some

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

如果age有一个 >10 就返回真.就不会检测后面的了.
全部是假,就是假.

let list = [{ name: "张三", age: 5 }, { name: "李四", age: 20 }, { name: "赵五", age: 30 }]
let bool=list.some((item) => {
  return item.age>=10
})

console.log(bool)

结果:真

true

案例实践:

let list=[{goods_count: 1,
goods_img: "1.png",
goods_name: "上衣",
goods_price: 108,
goods_state: true,
id: 1},
{goods_count: 2,
goods_img: "2.png",
goods_name: "帽子",
goods_price: 100,
goods_state: true,
id: 1}]

//根据已知的e,修改list里面的goods_state属性 =e.value
//先判断id,相等,再修改
let e={id:1,value:false}

this.list.some((item)=>{
	if (item.id===e.id){
		item.goods_state=e.value
		return true
	}
})

every：

every()方法的定义与用法：

every()方法用于检测数组中的所有元素是否都满足指定条件（该条件为一个函数）。
every()方法会遍历数组的每一项，如果有有一项不满足条件，则表达式返回false,剩余的项将不会再执行检测；如果遍历完数组后，每一项都符合条，则返回true。
标准用法：

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

参数说明：

第一个参数为一个回调函数，必传，数组中的每一项都会遍历执行该函数。

currentValue：必传，当前项的值
index：选传，当前项的索引值
arr：选传，当前项所属的数组对象

第二个参数thisValue为可选参数，回调函数中的this会指向该参数对象。

Tips:
every() 不会对空数组进行检测
every() 不会改变原始数组
代码实例：

var arr = [1000, 2000, 3000]
var flag = arr.every(function (a, b, c) {
    console.log(a + "===" + b + "====" + c) //1000===0====1000,2000,3000
    return a > 2000;//数组中的每个元素的值都要大于2000的情况,最后才返回true
})
console.log(flag)   //false

案例：
求数组list里面的item.goods_state属性是否全部是true，
如果全是，就返回true；
如果有其中一个是false就立刻返回false。

let value = this.list.every((item) => item.goods_state == true)
return value

filter 对数组的元素 进行过滤，返回新数组

一、作用
filter用于对数组进行过滤。
它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意：filter()不会对空数组进行检测、不会改变原始数组

二、语法

Array.filter(function(currentValue, indedx, arr), thisValue)

其中，函数 function 为必须，数组中的每个元素都会执行这个函数。且如果返回值为 true，则该元素被保留；
  函数的第一个参数 currentValue 也为必须，代表当前元素的值。

三、实例
返回数组nums中所有大于5的元素。

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let res = nums.filter((num) => {
  return num > 5;
});
console.log(res);  // [6, 7, 8, 9, 10]

reduce 求数组中的某元素 的总和。

一、语法

arr.reduce(function(prev,item,index,arr){
...
}, init);

prev 表示上一次调用回调时的返回值，或者初始值 init;
item 表示当前正在处理的数组元素；
index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；
init 表示初始值。

看上去是不是感觉很复杂？没关系，只是看起来而已，其实常用的参数只有两个：prev 和 cur。接下来我们跟着实例来看看具体用法吧~

二、实例
先提供一个原始数组：

var arr = [3,9,4,3,6,0,9];

实现以下需求的方式有很多，其中就包含使用reduce()的求解方式，也算是实现起来比较简洁的一种吧。

1. 求数组项之和

var sum = arr.reduce(function (prev, item) {
    return prev + item;
},0);

由于传入了初始值0，所以开始时prev的值为0，cur的值为数组第一项3，相加之后返回值为3作为下一轮回调的prev值，然后再继续与下一个数组项相加，以此类推，直至完成所有数组项的和并返回。