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

前言

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

一、数组遍历方法

1. map();

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

1. 案例

//原数组
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 ]

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

2. find()

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

1. 实例

//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)

1. 实例

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)

1. 实例

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

1. 可以说是一个累加器

5. filter()

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

1. 实例

// 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)

1. 实例

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();