JavaScript 数组常用高阶函数总结，包括插入，删除，更新，反转，排序等，如map、splice等

前言

1. 前端开发时，经常用到很多对数组操作的高阶函数。现在特来总结一下，总结时也借鉴了不少其他博客上的见解，特感谢一番。

一、数组遍历方法

1. map();

1. 该方法返回一个新数组，不会改变原始数组。新数组中的元素为原始数组元素调用函数处理后的值。
2. 该方法不会对空数组进行检测。
3. 该方法按照 原始数组元素顺序 依次处理元素。
4. 方法：array.map(function(currentValue,index,arr), thisValue)

参数	可选	含义
currentValue	必须。	当前元素的值
index	可选。	当前元素的索引值
arr	可选。	当前元素属于的数组对象
thisValue	可选。	对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

5. 案例

//原数组
const numbers = [4, 9, 16, 25];

//1. 返回一个数组，数组中元素为原始数组的平方根:
const newArray = numbers.map(Math.sqrt)
console.log('新数组 newArray：',newArray.toLocaleString())

//2. 返回一个数组，数组中每个元素 +1:
const newArray2 = numbers.map((item=>(item+1)))
console.log('新数组 newArray2：',newArray2)
console.log('原数组 numbers：', newArray)

// 输出
//新数组 newArray： 2,3,4,5
//新数组 newArray2： [ 5, 10, 17, 26 ]
//原数组 numbers： [ 2, 3, 4, 5 ]

6. 在react 中，一般用于遍历数组 呈现组件等功能。

2. find()

1. 该方法返回通过测试（函数内判断）的数组的第一个元素的值。
2. 该方法为数组中的每个元素都调用一次函数执行
   i. 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
   ii. 如果没有符合条件的元素返回 undefined
3. 该方法对于空数组，函数是不会执行的。
4. 该方法并没有改变数组的原始值。
5. 方法：array.find(function(currentValue, index, arr),thisValue)

参数	可选	含义
currentValue	必需。	当前元素
index	可选。	当前元素的索引值
arr	可选。	当前元素所属的数组对象
thisValue	可选。	传递给函数的值一般用 “this” 值。如果这个参数为空， “undefined” 会传递给 “this” 值

6. 实例

//1. find获取数组中大于 4 的 第一个元素
const sum = arr.find(a => a>4 )
console.log(sum)  
// 输出9

3. findIndex()

1. 该方法 返回传入一个测试条件（函数）符合条件的 数组第一个元素位置 。
2. 该方法为数组中的每个元素都调用一次函数执行：
   i. 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
   ii. 如果没有符合条件的元素返回 -1
3. 该方法对于空数组，函数是不会执行的。
4. 该方法并没有改变数组的原始值。
5. 方法：array.findIndex(function(currentValue, index, arr), thisValue)

参数	可选	含义
currentValue	必需。	当前元素
index	可选。	当前元素的索引
arr	可选。	当前元素所属的数组对象
thisValue	可选。	传递给函数的值一般用 “this” 值。如果这个参数为空， “undefined” 会传递给 “this” 值

6. 实例

const arr = [3,9,4,3,6,0,9];
// 2. findIndex() 返回符合大于输入框中数字的数组索引：
const index = arr.findIndex(item => item>4);
console.log(index);
// 输出 1

4. reduce()

1. 该方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
2. 该方法可以作为一个高阶函数，用于函数的 compose。
3. 该方法对于空数组是不会执行回调函数的。
4. 方法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数	可选	含义
total	必需。	初始值, 或者计算结束后的返回值。
currentValue	必需。	当前元素
currentIndex	可选。	当前元素的索引
arr	可选。	当前元素所属的数组对象。
initialValue	可选。	传递给函数的初始值

5. 实例

const numbers = [4, 9, 16, 25];
// 计算数组元素相加后的总和：
const sum2 = numbers.reduce((pre, cur)=>pre+cur)
console.log(sum2)
// 输出 54

6. 可以说是一个累加器

5. filter()

1. 该方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
2. filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。filter 不会改变原数组。
3. 该方法 不会对空数组进行检测。
4. 该方法 不会改变原始数组。
5. 方法：array.filter(function(currentValue,index,arr), thisValue)

参数	可选	含义
currentValue	必须。	当前元素的值
index	可选。	当前元素的索引值
arr	可选。	当前元素属于的数组对象
thisValue	可选。	对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

6. 实例

// filter()
// 返回数组 ages 中所有元素都大于指定数值的元素:
const ages = [32, 33, 12, 40];
const newArr = ages.filter(item=> item>32);
console.log('newArr:', newArr);
console.log('oldArr:', ages);
// newArr: [ 33, 40 ]
// oldArr: [ 32, 33, 12, 40 ]

6. forEach()

1. forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
2. forEach() 对于空数组是不会执行回调函数的。
3. 遍历数组全部元素，利用回调函数对数组进行操作，自动遍历整个数组，且无法break中途跳出循环，不可控，不支持return操作输出，return只用于控制循环是否跳出当前循环。
4. 无返回值，不对原来数组进行修改，但是可以自己通过数组的索引来修改原来的数组。
5. 方法：array.forEach(function(currentValue, index, arr), thisValue)

参数	可选	含义
currentValue	必需。	当前元素
index	可选。	当前元素的索引值。
arr	可选。	当前元素所属的数组对象。
thisValue	可选。	传递给函数的值一般用 “this” 值。如果这个参数为空， “undefined” 会传递给 “this” 值

6. 实例

numbers.forEach((item, index)=>{
    console.log(item, index)
});
console.log(numbers);
// 输出
4 0
9 1
16 2
25 3
[ 4, 9, 16, 25 ]

7. some() 和 every()

every()与some()方法都是JS中数组的迭代方法， 只返回布尔值。

• every()

1. 判断数组中是否每个元素都满足条件
2. 只有都满足条件才返回true；
3. 只要有一个不满足就返回false；

• some()

1. 判断数组中是否至少有一个元素满足条件
2. 只要有一个满足就返回true
3. 只有都不满足时才返回false

// 判断数组arr1是否全是偶数
// 判断数组arr2是否至少有一个偶数
 
var arr1=[1, 2, 3, 4, 5];
var arr2=[1, 4, 6, 8, 10];
console.log(
    arr1.every(function(value, index, array){
        return value % 2 == 0;
    })
);    // false
console.log(
    arr2.some(function(value, index, array){
        return value % 2 == 0;
    })
);    // true

二、数组插入方法

1. push()

在数组最后插入

letters = ['aa', 'bb'];
this.letters.push('aaa');

2. splice(start,0, …)

插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素

letters = ['aa', 'bb'];
this.letters.splice(1, 0, 'x', 'y', 'z') // 在bb 后面进行添加

3. unshift()

在数组最前面添加元素

letters = ['aa', 'bb'];
this.letters.unshift('aaa', 'bbb', 'ccc')

三、数组修改方法

1. splice（）

替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素

letters = ['aa', 'bb'];
this.letters.splice(1, 3, 'm', 'n', 'l', 'x')  // 替换

四、数组删除方法

1. pop()

删除数组中的最后一个元素

letters = ['aa', 'bb'];
this.letters.pop();

2. shift()

删除数组中的第一个元素

letters = ['aa', 'bb'];
this.letters.pop();

3. splice(start)

删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)

letters = ['aa', 'bb'];
this.letters.splice(1, num);  //从第 1 个开始，删除num 个数
this.letters.splice(1)      //删除 第1个以后的所有元素

四、数组排序方法

1. sort()

letters = ['aa', 'bb'];
this.letters.sort();

五、数组反转方法

1. reverse()

letters = ['aa', 'bb'];
this.letters.reverse();