数组的常用循环 map、reduce、filter、forEach

forEach map filter some every(参数都是一样的)

arr.forEach(回调函数，this指向) 一般第二个参数 this指向不使用

回调函数的参数一般是：value index arr(原始数组)

一般都会配合return使用

arr.forEach()和arr.map()的区别

arr.forEach()是和for循环一样，是代替for；

arr.map()是修改数组其中的数据，并返回新的数据

arr.forEach() 没有return ， arr.map() 有return

1. arr.forEach(callback) ： 遍历数组,无return，不修改原数组；相当于普通的for循环

let arr = [1, 2, 3, 4, 5]

arr.forEach((value, index, arr) => {

console.log(`value:${value},index:${index},arr:${arr}`)

})

// value:1, index:0, arr:1,2,3,4,5

// value:2, index:1, arr:1,2,3,4,5

// value:3, index:2, arr:1,2,3,4,5

// value:4, index:3, arr:1,2,3,4,5

// value:5, index:4, arr:1,2,3,4,5

复制代码

2. arr.map(callback)： 映射数组(遍历数组)，有return，返回一个新的数组

映射，返回一个由原数组中的 每个元素 调用一个 指定方法后 的返回值所组成的新数组

//案例1

let arr = [1, 2, 3, 4, 5]

let newArr=arr.map((value, index, array) => {

value = value * 2

})

console.log(arr) // [1, 2, 3, 4, 5]

console.log(newArr) // [2,4,6,8,10]

复制代码

3. arr.filter(callback) ：过滤数组，返回一个满足要求的新数组，原数组不变

一般是过滤一些不合格的数据，如果回调函数返回true，那么数据中符合条件的数据就会被保存下来

//案例一

let arr = [1, 2, 3, 4, 5]

//返回value小于3的值

let arr1 = arr.filter(value => value < 3)

console.log(arr1) // [1, 2]

//案例二

let arr = [

{title: 'aa', hot: false},

{title: 'bb', hot: true},

{title: 'cc', hot: false},

]

//返回hot为true的数据

let newArr = arr.filter(val => val.hot);

console.table(newArr);

复制代码

4. arr.every(callback)： 依据判断条件，数组的元素是否全满足，若满足则返回ture

类似于查找功能，如果数组中的每一个元素都符合条件，那么会返回true

let arr = [1,2,3,4,5]

let arr1 = arr.every( (i, v) => i < 3)

console.log(arr1) // false

let arr2 = arr.every( (i, v) => i < 10)

console.log(arr2) // true

复制代码

5. arr.some() 依据判断条件，数组的元素是否有一个满足，只要有一个满足则返回ture

类似于查找功能，如果数组中的 某一个元素 符合条件，那么会返回true

let arr = [1,2,3,4,5]

let arr1 = arr.some( (i, v) => i < 3)

console.log(arr1) // true

let arr2 = arr.some( (i, v) => i > 10)

console.log(arr2) // false

复制代码

6. arr.indexOf() 查找某个元素的索引值，若有重复的，则返回第一个查到的索引值，若不存在，则返回 -1

let arr = [1,2,3,4,5,2]

let arr1 = arr.indexOf(2)

console.log(arr1) // 1

let arr2 = arr.indexOf(9)

console.log(arr2) // -1

复制代码

7. arr.lastIndexOf() 和arr.indexOf()的功能一样，不同的是从后往前查找

8. arr.reduce(callback, initialValue)：累加器 汇总数据

迭代数组的所有项，数组中的每个值(从左到右)的合并，最终计算为一个值

复制代码

8.1 callback回调函数的参数:上一个计算的值、当前值、当前值下标、原始数组

previousValue 必选，上一次调用回调返回的值，或者是提供的初始值(initialValue)

currentValue 必选 --数组中当前被处理的数组项

index 可选 --当前数组项在数组中的索引值

array 可选 --原数组

8.2 initialValue：初始化值(可选)

8.3 reduce执行过程

回调函数第一次执行时，preValue 和 curValue 可以是一个值

如果 initialValue 在调用 reduce() 时被提供，那么第一个 preValue 等于 initialValue ，并且curValue 等于数组中的第一个值；

如果initialValue 未被提供，那么preValue 等于数组中的第一个值

let arr = [1, 2, 3, 4, 5]

//计算数组中数据的和

let arr1 = arr.reduce((preValue, curValue) => preValue + curValue)

console.log(arr1) // 15

//计算数组中数据的和 设置了一个初始化数据 5

let arr2 = arr.reduce((preValue, curValue) => preValue + curValue, 5)

console.log(arr2) // 20

复制代码