JavaScript 整理了27个常用数组方法，点赞加关注内容持续更新~

1、splice()数组增删

• 数组名.splice(起时索引,删除元素个数,要添加的元素,要添加的元素,…)
• 返回值：被删除的元素组成的数组
• 会改变原数组

      const arr = ['a', 'b']
       //（增加）在a和b之间增加俩个元素c和d
      const res = arr.splice(1, 0, 'c', 'd')
      console.log(res)   // ['a', 'c', 'd', 'b']

      //（删除）删除序号为1的元素
      const res2 = arr.splice(1, 1)
      console.log(arr)   // ['a', 'c', 'd', 'b']
      console.log(res2)  // ['a']

      //（替换） 把b->e
      const res3 = arr.splice(1, 1, 'e')
      console.log(res3)  //['a', 'b']
      console.log(res3)  //['a', 'e']

2、sort()数组排序

• sort()方法是数组对象的一个方法，用于对数组的元素进行排序
• 不生成新数组，会改变原数组的顺序
• 默认情况下，sort()方法按照字符串Unicode码点顺序进行排序。也就是说，它把每个元素都转换成字符串，然后按照每个字符串的Unicode编码顺序进行排序
• 如果你想按照自定义的规则进行排序，你可以提供一个比较函数作为sort()方法的参数。这个比较函数应该接收两个参数，如果第一个参数应该排在第二个参数前面，那么比较函数应该返回一个负数。如果两个参数相等，那么比较函数应该返回0。如果第一个参数应该排在第二个参数后面，那么比较函数应该返回一个正数。

 const arr = [10, 2, 5, 1, 9, 3]
      // sort排序  默认按照字符串排序
      // arr.sort()
      const r = arr.sort(function (a, b) {
        // return a - b  从小到大排序
        return b - a // 从大到小排序
      })
      console.log(arr)  // [10,9,5,3,2,1] 原数组已经被改变
      console.log(r === arr)  // true

3、数组操作（数组的增删改查）

.unshift(参数) 数组最前方增加

• unshift方法
• 语法 数组名.unshift(参数)
• 功能：在数组的前面追加一个或多个元素（在原数组添加）
• 参数、一个或多个要追加的元素
• 返回值：元素添加之后的数组总长度
• 会改变原数组

 // 例子
const arr = [1,2]
arr.unshift(3, 4)   // 在arr最前方增加3和4
console.log(arr)    // [3,4,1,2]

.push(参数)数组末尾增加元素

• push方法
• 语法 数组名.push(参数)
• 功能：在数组的末尾追加一个或多个元素（在原数组添加）
• 参数、一个或多个要追加的元素
• 返回值 ：元素添加之后的数组总长度
• 会改变原数组

 // 例子
 const arr = [1,2]
 const num = arr.push(3,4,5)   //在arr末尾增加3和4，可以添加一个数据，也可以添加一组数据
 console.log(arr)   // [1,2,3,4,5]
 console.log(num)   // 5  （返回改变后的数组长度）

.shift() 删除数组第一个元素

• 语法 数组名.shift()
• 功能：删除数组第一个元素，括号里不需要传入参数
• 参数、无
• 返回值：被删除的元素
• 会改变原数组

// 例子
const arr = [1,2,3]      // 使用const是因为const不能重新赋值，但是可以用方法增删改
const num = arr.shift()   // 1  
console.log(arr)    // [2,3] （会改变原数组）
console.log(num)    // 1  （返回删除的arr的第一个元素1）

.pop() 删除数组末尾元素

• 语法 数组名.pop()
• 功能：每次只能删除数组末尾的元素，括号内不需要传入参数
• 参数、无
• 返回值：被删除的元素
• 会改变原数组

// 例子
const arr = [1,2,3]
const num = arr.pop()  //删除arr末尾的元素2
console.log(arr)    // [1,2] （会改变原数组）
console.log(num)  

4、数组其它方法

concat() 连接俩个数组

//concat() 可以连接两个数组，不改变原有数组，而是返回一个新数组
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const array3 = [7, 8, 9]
const newArr= array1.concat(array2).concat(array3)
console.log(newArr)   // [1,2,3,4,5,6,7,8,9]
console.log(array1)   // [1,2,3]

includes()查找数组里是否包含一个值

 // includes() 此方法用来判定一个数组是否包含一个值，包含返回true,不包含返回 false
 const array1 = [1, 2, 3] 
 console.log(array1.includes(2))   // true
    
 const pets = ['cat', 'dog', 'bat', 'dog']
 console.log(pets.includes('cat'))   // true
 console.log(pets.includes('at'))    // false
      

indexOf ()正向查找数组元素返回索引

// indexOf() 从左向右查找元素在数组中第一次出现的索引
// 能找到该元素返回第一次出现的索引，找不到该元素返回 -1
const pets = ['cat', 'dog', 'bat', 'dog']
console.log(pets.indexOf('dog'))    // 返回1

lastIndexOf () 反向查找数组元素返回索引

//lastIndexOf() 从右向左查找元素在数组中第一次出现的索引
// 能找到该元素返回第一次出现的索引，找不到该元素返回 -1
const pets = ['cat', 'dog', 'bat', 'dog']
console.log(pets.lastIndexOf('dog'))   //返回3

join()指定分隔符连接数组元素为字符串

//join()是一个数组方法，用于将数组中的所有元素连接到一个字符串中，不会改变原数组。这个方法会使用指定的分隔符（如果没有提供，则默认为逗号）来分隔数组中的每个元素。
const arr = ['小学', '中学', '大学']
console.log(arr.join()) // 小学,中学,大学 不传参数，默认会用逗号把元素拼接成一个字符串 
console.log(arr.join('-')) // 小学-中学-大学
console.log(arr.join(':')) // 小学:中学:大学

forEach()数组遍历

• forEach() 方法对数组的每个元素执行一次给定的函数。
• **forEach()**不会改变原数组，也不会返回一个新数组。它只是简单地遍历数组并执行函数。如果你需要在遍历过程中改变原数组或者创建一个新数组，你可能需要使用其它方法，如map()或reduce()等
• 除非抛出异常，否则没有办法停止或中断 forEach() 循环。如果有这样的需求，则不应该使用 forEach() 方法
• 无返回值

以下是forEach()的基本语法：

arr.forEach(function(item , index , array){} , thisArg)

参数说明：

• function(){}：为数组中每个元素执行的函数，该函数接收三个参数：
  • index：数组中正在处理的当前元素
  • index（可选）：数组中正在处理的当前元素的索引
  • array（可选）：被forEach()调用的原始数组arr
• thisArg（可选）：执行回调函数时用作this的值

let numbers = [1, 2, 3, 4, 5];  
  
numbers.forEach(function(item, index) {  
  console.log('数组元素：' + item + '，索引：' + index);  
});
/*数组元素：1，索引：0
  数组元素：2，索引：1
  数组元素：3，索引：2
  数组元素：4，索引：3
  数组元素：5，索引：4*/

forEach()和map() 的区别

都是用于遍历数组的函数，但它们有一些重要的区别。

1. 函数参数：forEach接收一个回调函数作为参数，这个回调函数对数组的每个元素执行一次

   ​ map也接收一个回调函数作为参数，但返回一个新数组，该新数组是由每次回调返回的结果组成的

2. 返回值：forEach没有返回值，它只是对数组的每个元素执行一次提供的函数

   ​ map返回一个新的数组，该数组是由每次回调返回的结果组成的

3. 对原始数组的影响：forEach不会改变原始数组，只会遍历数组中每个元素

   ​ map也不会改变原始数组，但会创建一个新数组，该数组包含由每次回调返回的结果组成的元素

下面是一个简单的示例来展示这两者的区别：

let numbers = [1, 2, 3, 4, 5];  
  
// 使用forEach  
numbers.forEach(function(num) {  
  console.log(num * num) 
})
// 输出: 1, 4, 9, 16, 25 (这是每个数字的平方)  
  
// 使用map  
let squares = numbers.map(function(num) {  
  return num * num
}); 
console.log(squares); // 输出: [1, 4, 9, 16, 25] (这是每个数字的平方组成的数组)

​ 在这个例子中，我们可以看到forEach只是简单地打印出每个数字的平方，而map创建了一个新的数组squares，其中包含了每个数字的平方。

find()发现

• 查找满足条件的第一个元素，找到就返回该元素，并且终止遍历
• 找不到返回undefined

 const arr = [1, 3, 5, 7, 9, 7]
      const item = arr.find(function (item, index, arr) {
        console.log(item, index, arr)
        return item === 7
      })
      console.log(item) // 7

findIndex()查找满足条件的第一个元素的索引

• 查找满足条件的第一个元素的索引，找到就返回该元素的索引，并且终止循环
• 找不到返回-1 （和查找索引有关的，查不到都是返回-1）

const arr = [1, 3, 5, 7, 9, 7]
      const index = arr.findIndex(function (item, index, arr) {
        console.log(111)
        return item > 5
      })
      console.log(index) // 3

some()一些

• 对数组进行循环，发现满足条件的第一个元素则循环结束，返回true，假如所有元素不满足，返回false
• 回调函数形参的位置有不同的功能，第一个形参为每一项，第二个新参为下标，第三个形参为原始数组，与形参的命名无关

以下是some()方法的语法：

arr.some(function(item, index, array), thisArg)

参数说明：

• function(item, index, arr){}：必需参数，用于测试每个元素的函数
  • item：必需参数，当前正在处理的元素
  • index：可选参数，当前正在处理的元素的索引
  • array：可选参数，some()被调用的数组
• thisArg：可选参数，执行回调函数时用作 this 的值

const arr = [1, -3, 20, 9, 11, 12]
const flag = arr.some(function (item) {
        return item % 2 === 0
      })
      console.log(flag) // true

every()每个

• every()是一个数组方法，对数组进行循环,用于检查数组中的所有元素是否都满足测试函数中的条件
• 如果所有元素都通过测试，则返回true；否则返回false
• 回调函数形参的位置有不同的功能，第一个形参为每一项，第二个新参为下标，第三个形参为原始数组，与形参的命名无关
• 特点：只要找不符合条件的数据就会终止查找，直接返回结果

以下是every()方法的语法：

arr.every(function(item , index , array){}, thisArg) 

参数说明：

• function(){}：必需参数，用于测试每个元素的函数
  • item：必需参数，当前正在处理的元素
  • index：可选参数，当前正在处理的元素的索引
  • array：可选参数，被every()调用的原始数组arr
• thisArg：可选参数，执行回调函数时用作 this 的值

 const arr = [1, -3, 20, 9, 11, 12]
 const flag = arr.every(function (item) {
        console.log(item)  // 1
        return item > 9
      })
      console.log(flag) // false

reverse() 翻转

• 是一个数组方法，用于反转数组的元素顺序
• 这意味着，如果你有一个数组，例如[1, 2, 3, 4, 5]，使用reverse()方法后，数组将变为[5, 4, 3, 2, 1]
• reverse()方法会直接修改原始数组，而不是创建一个新的反向数组
• 如果你不想修改原始数组，你可以先使用slice()或concat()方法创建一个副本，然后再对副本使用reverse()方法
• 返回值：翻转的数组

示例：

let array = [1, 2, 3, 4, 5]
const r = array.reverse()
console.log(rray) // 输出：[5, 4, 3, 2, 1]
console.log(r===rray) // true

filter() 过滤

• filter()是一个数组对象方法，该数组中的元素是通过检查指定函数中的条件而符合条件的所有元素
• filter()方法接收一个回调函数作为参数，该函数会被数组的每个元素调用，返回一个布尔值来决定是否保留该元素。如果回调函数返回true，则该元素会被保留在新的数组中；如果返回false，则会被排除
• 没有符合条件的元素，那就只返回一个空数组
• 返回一个新数组，不会改变原数组

示例：

// 用filter()和indexOf()去重
    const arr = [1,1,2,2,3,3,3]
    const newArr = arr.filter(function(item,index){
      // 如果当前元素的索引与它在数组中首次出现的索引相同，则保留它 
        return arr.indexOf(item) === index
    })
    console.log(newArr)  // [1,2,3]

reduce()减少

用于将数组中的元素从左到右合并，以便将其减少为单个值。这个方法通过遍历数组中的每个元素并执行一个提供的reducer函数来工作，将数组中的所有值合并为一个值

reduce()方法接收两个参数：

1. 回调函数：这是一个执行每个数组元素上的操作的函数，它接受四个参数：累加器、当前值、当前索引、源数组
2. 初始值（可选）：这是传递给reducer函数的初始值。如果没有提供初始值，则将使用数组的第一个元素作为初始值，并从第二个元素开始进行迭代

示例1：

const numbers = [1, 2, 3, 4, 5]
const sum = numbers.reduce(function(old, item){  
  return old + item
}, 0)
console.log(sum)   // 15

示例2:

const scores = [
    {
        subject: 'math',
        score: 88
    },
    {
        subject: 'chinese',
        score: 95
    },
    {
        subject: 'english',
        score: 80
    }
];
const dis = {
    math: 0.5,
    chinese: 0.3,
    english: 0.2
}
const sum = scores.reduce((pre,item) => {
    return pre + item.score * dis[item.subject]
},0)
console.log(sum)   // 88.5

map()ES6映射

• map()是一个数组方法，返回一个新的数组，不会修改原始数组
• 返回后的新数组中的每一项，是该数组中的每个元素都调用一个提供的函数后的返回值

map()方法的语法如下：

let newArray = arr.map(function(item , index , array){} , thisArg)

其中：

• newArray：新数组，每个元素都是回调函数的结果。
• arr：需要调用map()方法的数组。
• function(item,index,array){}：数组中每个元素都要执行的函数，接收三个参数：
  • element：数组中正在处理的当前元素
  • index（可选）：数组中正在处理的当前元素的索引
  • array（可选）：map()方法被调用的数组
• thisArg（可选）：执行回调函数时使用的 this 值

这是一个更详细的使用例子：

let numbers = [1, 2, 3, 4, 5]
  
let doubled = numbers.map(function(num) {  
    return num * 2 
}) 
console.log(doubled)   // 输出：[2, 4, 6, 8, 10]

在这个例子中，我们不仅对数组中的每一个元素进行了平方根运算，还使用了所有的参数，并在map()函数中使用了箭头函数。同时，我们也指定了thisArg，尽管在这个例子中它并未被用到

flat() ES6 数组扁平化

• flat(depth)，depth指定要提取嵌套数组的结构深度，默认值为 1
• 按照一个可指定的深度递归遍历数组，将所有元素与遍历到的子数组中的元素合并为一个新数组返回
• 该方法返回一个新数组，对原数据没有影响

let arr1 = [1, 2, [3, 4]]
arr1.flat()
// [1, 2, 3, 4]

let arr2 = [1, 2, , 4, 5].flat()
// [1, 2, 4, 5]  如果原数组有空位，flat()方法会跳过空位

let arr3 = [1, 2, [3, 4, [5, 6]]]
arr2.flat()
// [1, 2, 3, 4, [5, 6]]

let arr4 = [1, 2, [3, 4, [5, 6]]]
arr3.flat(2)
// [1, 2, 3, 4, 5, 6]

//使用 Infinity，可展开任意深度的嵌套数组
let arr5 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]
arr4.flat(Infinity)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

flatMap()ES6

• 它与 map() 连着深度值为 1 的 flat()几乎相同，但 flatMap() 通常在合并成一种方法的效率稍微高一些
• flatMap() 方法返回新数组，不改变数据
• 其中每个元素都是回调函数的结果，并且结构深度 depth 值只能为 1，只能展开一层数组

// 语法
array.flatMap(function (item[, index[, array]]{}[,thisArg])
// 当前数组成员、当前数组成员的下标（从0开始）、原数组、this指向

let obj = [{
             name: "A",
             list: ["鞍山", "安庆", "安阳"]
           },
           {
             name: "B",
             list: ["北京", "保定", "包头"]
           }
         ]
console.log(obj.flatMap(item => item.list))   // ['鞍山', '安庆', '安阳', '北京', '保定', '包头']

Array.from()ES6

Array.from() 静态方法从可迭代或类数组对象创建一个新的浅拷贝的数组实例，不改变源类数组对象

**Array.from()**方法的基本语法如下：

Array.from(arrayLike[, mapFn[, thisArg]])

参数说明：

• arrayLike：必需参数，一个类似数组的对象或者可迭代对象

• mapFn：可选参数，用于对每个元素进行操作并返回一个新数组

  • element数组当前正在处理的元素
  • index数组当前正在处理的元素的索引

• thisArg：可选参数，用作 mapFn 回调函数中的 this 值

下面是一些示例：

// 字符串转化为数组  
let str = 'hello'
let arr = Array.from(str)
console.log(arr) // ['h', 'e', 'l', 'l', 'o']  
  
// 伪数数组的对象转化为数组  
let arrayLike = {0: 'a', 1: 'b', length: 2}
let arr2 = Array.from(arrayLike)
console.log(arr2)  // ['a', 'b']  
  
// 使用mapFn函数转化元素  
let arr3 = Array.from([1, 2, 3, 4], x => x * x)
console.log(arr3)  // [1, 4, 9, 16]

Array.isArray ()ES6

// Array.isArray() 判断是不是数组，如果是数组就返回true ，不是数组返回 false
// 通过构造函数直接调用的方法-静态方法
console.log(Array.isArray(10)) // false
console.log(Array.isArray([])) // true

Array.of()ES6

 // 将一组值转化为数组,即新建数组
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

fill()ES6

fill 充满

使用自己想要的参数替换原数组内容，会改变原来的数组

参数	描述
value	必需，填充的值。
start	可选，开始填充位置。
end	可选，停止填充位置 (默认为 array.length)，到end为止之前结束

    let arr1 = ['a', 'b', 'c']
    console.log(arr1.fill(7))   // [7, 7, 7] 始末位置不写，会将所有值替换
    console.log(arr1)   // [7, 7, 7]   会改变原数组

   let arr2 = new Array(3).fill(7)   
    console.log(arr2)   // [7, 7, 7] 将创建的空数组中值，全部替换

let arr = ['a', 'b', 'c']
console.log(arr.fill(7,1,2))   // ['a', 7, 'c']

//上面代码表示，fill方法从 1 号位开始，向原数组填充 7，到 2 号位之前结束

注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象