最全的JavaScript常见的操作数组的函数方法宝典

矫情吗；* 2022-12-22 05:00 46阅读 0赞

JavaScript在其内部封装了一个`Array`对象，使得我们可以方便地使用**数组**这种简单的数据结构，同时，也在 `Array`对象的原型上定义了一些常用并且很有用的操作数组的函数。

**本文就将详细介绍一下每个操作数组的函数是如何使用的**

##  ##

引言

就问你，你在写JavaScript代码的时候，是不是经常用到像这样的数据结构 `var arr = [1, 2, 3, 4]`，如果是的话，那你可就要好好看下文了，每一个函数方法都给你安排明白了。

##  ##

数组方法

数组的方法一共有很多，见下表

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>join()</td> 
   <td>将数组中所有元素都转化为字符串连接在一起</td> 
  </tr> 
  <tr> 
   <td>sort()</td> 
   <td>将数组中的元素排序</td> 
  </tr> 
  <tr> 
   <td>reverse()</td> 
   <td>将数组中的元素颠倒顺序</td> 
  </tr> 
  <tr> 
   <td>concat()</td> 
   <td>将多个数组或数连接起来，组成一个新的数组</td> 
  </tr> 
  <tr> 
   <td>slice()</td> 
   <td>返回指定数组的一个片段或子数组</td> 
  </tr> 
  <tr> 
   <td>splice()</td> 
   <td>在数组指定位置插入或删除元素</td> 
  </tr> 
  <tr> 
   <td>push()</td> 
   <td>在数组的尾部添加一个或多个元素</td> 
  </tr> 
  <tr> 
   <td>pop()</td> 
   <td>删除数组的最后一个元素，并返回该元素</td> 
  </tr> 
  <tr> 
   <td>unshift()</td> 
   <td>在数组的头部添加一个或多个元素</td> 
  </tr> 
  <tr> 
   <td>shift()</td> 
   <td>删除数组第一个元素，并返回该元素</td> 
  </tr> 
  <tr> 
   <td>toString()</td> 
   <td>返回将数组每个元素转化为字符串并用逗号分隔连接起来的字符串</td> 
  </tr> 
  <tr> 
   <td>forEach()</td> 
   <td>从头至尾遍历数组，为每个元素调用指定的函数</td> 
  </tr> 
  <tr> 
   <td>map()</td> 
   <td>将调用的数组的每个元素传递给指定的函数，并返回一个数组</td> 
  </tr> 
  <tr> 
   <td>filter()</td> 
   <td>根据回调函数内的逻辑判断过滤数组元素，并返回一个新的数组</td> 
  </tr> 
  <tr> 
   <td>every()</td> 
   <td>对数组元素应用指定的函数进行判断，返回true或false</td> 
  </tr> 
  <tr> 
   <td>some()</td> 
   <td>对数组元素应用指定的函数进行判断，返回true或false</td> 
  </tr> 
  <tr> 
   <td>reduce()</td> 
   <td>使用指定的函数将数组元素进行组合</td> 
  </tr> 
  <tr> 
   <td>reduceRigth()</td> 
   <td>使用指定的函数将数组元素进行组合</td> 
  </tr> 
  <tr> 
   <td>indexOf()</td> 
   <td>判断一个数在该数组中的索引位置</td> 
  </tr> 
  <tr> 
   <td>lastIndexOf()</td> 
   <td>判断一个数在该数组中的索引位置</td> 
  </tr> 
  <tr> 
   <td>find()</td> 
   <td>遍历数组，找出第一个符合回调函数的元素</td> 
  </tr> 
  <tr> 
   <td>findIndex()</td> 
   <td>遍历数组，找出第一个符合回调函数的元素的索引</td> 
  </tr> 
  <tr> 
   <td>fill()</td> 
   <td>用于填充数组</td> 
  </tr> 
  <tr> 
   <td>includes()</td> 
   <td>判断一个数是否在该数组中</td> 
  </tr> 
 </tbody> 
</table>

## 1、join() ##

`join()`方法主要是用于将数组内的所有元素连接在一起转化为字符串，并返回这个字符串。

**参数（共1个）：**

1.  第一个参数：为可选参数，该参数表示数组的每个元素之间的连接符号，若省略该参数，则默认为逗号

`join()`方法使用实例

var arr = [1, 2, 3, 4]
    
    arr.join()              //返回 "1,2,3,4"
    
    arr.join('-')           //返回 "1-2-3-4"

## 2、sort() ##

`sort()`方法是将数组中的每个元素按一定条件排序后并返回排序后的新数组（会改变原数组）

**参数（共1个）：**

1.  第一个参数：可选参数，该参数为回调函数，该回调函数需传入两个参数`a`和`b`。当回调函数返回一个小于0的数时，参数`a`将排在前面；当返回一个大于0的数时，参数`b`将排在前面；当返回0时，则这两个值不进行比较排序。若省略该参数，则将每个元素按照字母表的顺序排列。

`sort()`方法使用实例

var arr = ['cherry', 'apple', 'banana']
    
    arr.sort()           //未传入回调函数作为参数
    
    console.log(arr)     //返回  ['apple', 'banana', 'cherry']

该例子中，省略了第一个参数，所以在排序时默认按照字母表顺序进行排列，若首字母相同，则按第二个字母的先后顺序排列。

接下来看一下**第一个参数**的详细使用

var arr = [54, 78, 12, 64]
    
    arr.sort(function (a, b) {
        return a - b
    })
    
    console.log(arr)        //返回  [12, 54, 64, 78]  升序排列

调用`sort()`方法，会每次从数组中取出两个数，分别作为参数`a`和参数`b`，若回调函数`return`一个负数，则参数`a`排在前面；若`return`一个正数，则参数`b`排在前面；若`return 0`，则两个数不进行排序。

该例子就实现了**升序排列**

那么如果把`a - b`改成`b - a`，就能实现**降序排列**了

var arr = [54, 78, 12, 64]
    
    arr.sort(function (a, b) {
        return b - a
    })
    
    console.log(arr)        //返回  [78, 64, 54, 12]  降序排列

## 3、reverse() ##

`reverse()`方法是将数组中的元素颠倒，并返回颠倒后的数组（会改变原数组）

这个方法很简单，直接来看例子

var arr = [54, 78, 12, 64]
    
    arr.reverse()
    
    console.log(arr)       //返回  [64, 12, 78, 54]

该方法无非就是将数组转成了**逆序数组**

## 4、concat() ##

`concat()`方法将调用每一个参数创建并返回一个数组（不会改变原数组）

该方法可以省略参数或者传入多个参数。

当省略参数时，则表示创建一个新的空数组，将原始数组的数据传入这个空数组中，有点类似`copy`的感觉 **；** 当传入1个或多个参数时，则表示创建一个新的空数组，将原始数组的数据和每个参数都添加到这个空数组中。

接下来我们来看看具体的例子，首先是不传入任何参数

var arr = [1,2,3,4]
    
    var new_arr = arr.concat()
    
    console.log(new_arr)       //返回  [1,2,3,4]

再来看传入参数的例子

var arr = [1,2,3,4]
    
    var new_arr = arr.concat(5,6,7,8)
    
    console.log(new_arr)     //返回  [1,2,3,4,5,6,7,8]

跟定义说的一样，传入的参数也被当成新创建的数组中的成员添加了进去

其实我们还可以传入**数组**作为该方法的参数，最后会将数组中每一个元素添加到新的数组中去

var arr = [1,2,3,4]
    
    var new_arr = arr.concat([5,6,7,8])
    
    console.log(new_arr)     //返回  [1,2,3,4,5,6,7,8]

但是，如果数组中还**嵌套**了数组，那么嵌套的那个数组会被当成一个整体添加到新的数组中去。简而言之，也就是说该方法只能拆分一层的数组参数

var arr = [1,2,3,4]
    
    var new_arr = arr.concat([5,6,7,8,[9,10]])
    
    console.log(new_arr)     //返回  [1,2,3,4,5,6,7,8,[9,10]]

可以很清楚地看到，嵌套的数组`[9,10]`并没有被拆开添加到新数组中，而是作为整体添加到了新数组中

## 5、slice() ##

`slice()`方法是返回指定的一个数组片段

该方法有两个参数，分别代表了数组片段的起始位置和结束位置，第一个参数不能省略，第二个参数可以省略

接下来看该方法的使用例子

var arr = [1,2,3,4,5,6,7]
    
    arr.slice(1,3)                //返回  [2,3]
    arr.slice(3)                  //返回  [4,5,6,7]
    arr.slice(4,-1)               //返回  [5,6]
    arr.slice(-3)                 //返回  [5,6,7]
    arr.slice(-3,-2)              //返回  [5]

第二个参数表示的是数组片段的结束位置，所以取到的片段是从第一个参数表示的位置取到第二个参数表示的位置的前一个元素。

若省略第二个参数，则表示从第一个参数表示的位置一直取到最后一个元素

用**负数**表示元素位置时，是从末尾往前数，分别为-1 、-2 、-3……

## 6、splice() ##

`splice()`方法在数组指定位置插入或删除元素，并返回删除元素组成的数组（会改变原数组）

**参数（共3个）：**

1.  **第一个参数**：删除或插入元素的起始位置
2.  **第二个参数**：从起始位置开始往后需要删除的元素个数。若该元素省略，则表示从起始位置开始到最后的所有元素都删除
3.  **第三个参数及之后的所有参数**：将该值作为数组的元素依次插入到第一个参数表示的位置上

我们直接来看几个简单的例子

var arr = [1,2,3,4,5,6,7]
    
    arr.splice(4)             //返回 [5,6,7],此时arr为[1,2,3,4]
    
    arr.splice(1, 2)          //返回 [2,3],此时arr为[1,4]
    
    arr.splice(1, 0, 'new1', 'new2') //返回[],此时arr为[1,'new1','new2',4]

所以这是一个**很方便**并且**功能很全**的数组操作函数，它既可以**删除元素**，又可以**插入元素**

## 7、push() ##

`push()`方法是在数组的**尾部**添加一个或多个元素，并返回数组的长度（会改变原数组）

该函数的有1个或多个参数，函数依次获取每个参数将其插入到数组的末尾

直接来看例子

var arr = []
    
    arr.push(1)       //返回 1, 此时arr为 [1]
    
    arr.push(5)       //返回 2, 此时arr为 [1,5]
    
    arr.push(3,2)     //返回 4, 此时arr为 [1,5,3,2]

## 8、pop() ##

`pop()`方法是删除数组的最后一个元素，并返回该元素（会改变原数组）

该函数不需要传入任何参数

来简单看下例子

var arr = [6,8,7]
    
    arr.pop()          //返回 7, 此时arr为 [6,8]
    
    arr.pop()          //返回 8, 此时arr为 [6]

## 9、unshift() ##

`unshift()`方法是在数组的**头部**添加一个或多个元素，并返回数组的长度（会改变原数组）

该函数的有1个或多个参数，函数依次获取每个参数将其插入到数组的最前面

来看几个例子

var arr = []
    
    arr.unshift(1)       //返回 1, 此时arr为 [1]
    
    arr.unshift(5)       //返回 2, 此时arr为 [5,1]
    
    arr.unshift(3,2)     //返回 4, 此时arr为 [2,3,5,1]

## 10、shift() ##

`shift()`方法是删除数组第一个元素，并返回该元素（会改变原数组）

该函数不需要传入任何参数

来简单看下例子

var arr = [6,8,7]
    
    arr.shift()          //返回 6, 此时arr为 [8,7]
    
    arr.shift()          //返回 8, 此时arr为 [7]
    
    arr.shift()          //返回 7, 此时arr为 []

## 11、toString() ##

`toString()`方法是返回将数组每个元素转化为字符串并用逗号分隔连接起来的字符串（不会改变原数组）

若遇到数组里嵌套数组的话，同样也会将该嵌套数组里的每个元素转化为字符串并连接起来

来看几个例子

[1,2,3].toString()              //返回 '1,2,3'
    
    ['cherry','apple','bannana'].toString()    //返回 'cherry,apple,banana'
    
    [1,2,[6,7]].toString()          //返回 '1,2,6,7'
    
    [1,[3,6,[8,9]]].toString()      //返回 '1,3,6,8,9'

## 12、forEach() ##

`forEach()`方法是ES5新增的，它是用来为每个元素调用指定的函数（可以修改原数组）

该方法只有一个参数，该参数为回调函数，该回调函数有三个参数，这三个参数的含义分别为**数组元素** 、**元素的索引** 、**数组本身**

来看一个例子，现在要求将某一数组内的每个元素都`+2`

var a = [1,2,3,4,5]
    
    a.forEach(function (value, index, arr) {
        arr[index] = value + 2
    })
    
    console.log(a)          // [3,4,5,6,7]

再来看一个例子，计算数组内各元素之和

var a = [1,2,3,4,5]
    var sum = 0
    
    a.forEach(function(value) {
     sum += value
    })
    
    console.log(sum)       // 15

## 13、map() ##

`map()`方法是是ES5新增的，它是将调用的数组的每个元素传递给指定的函数，把每次调用回调函数的**返回值**存入到一个新的数组中，最后返回这个新的数组（不会改变原数组）

该方法只有一个参数，该参数为**回调函数**，该回调函数只有一个参数，该参数的含义是数组的每个元素

来看一个例子，返回一个新的数组，该数组内的每个元素为原数组每个元素的平方

var arr = [1,2,3,4,5]
    
    var new_arr = arr.map(function (value) {
        return value * value
    })
    
    console.log(new_arr)      //  [1, 4, 9, 16, 25]

## 14、filter() ##

`filter()`方法是ES5新增的，相当于一个**过滤器**，它是通过回调函数里的**逻辑判断**来过滤掉不需要的元素，再将剩下的元素都放到一个新的数组中并返回（不会改变原数组）

该方法只有一个参数，该参数为**回调函数**，该回调函数有两个参数，他们的含义分别为**数组中的元素** 、 **元素的索引**

当回调函数的返回值为`true`时，即`return true`时，该元素将被加入到新的数组中；反之，该元素将被不被加入到新的数组中

接下来我们来看一个例子。需求是：挑选出数组中小于6的所有元素，并保存在数组中返回

var arr = [6, 12, 7, 1, 9, 3, 0, 19]
    
    var new_arr = arr.filter(function (value) {
        return value < 6
    })
    
    console.log(new_arr)        // [1, 3, 0]

再来看一个例子。需求是：将一个数组中偶数位置的元素取出来保存在一个新数组中并返回

var arr = [6,12,7,1,9,3,0,19]
    
    var new_arr = arr.filter(function (value, index) {
        return index % 2 === 0
    })
    
    console.log(new_arr)       // [6, 7, 9, 0]

## 15、every() ##

`every()`方法是针对一个数组的逻辑判定（不会改变原数组）

该方法有一个参数，该参数为**回调函数**，该回调函数有一个参数，该参数含义是数组中的每个元素

当**每个元素**调用回调函数的返回值**全部都**为`true`时，最后返回`true`；相反，只要有一个元素调用回调函数，返回的值不为`true`，最后都会返回`false`

我们来看一个例子。需求：判断该数组中每个元素是否都小于10

var arr = [1,2,3,4,5,6,7,8]
    
    var result = arr.every(function (value) {
        return value < 10
    })
    
    console.log(result)          // true, 表示该数组所有元素都小于10

我们把`arr`中的元素改变几个，再来看看代码运行结果

var arr = [1, 2, 3, 4, 5, 6, 12, 8]
    
    var result = arr.every(function (value) {
        return value < 10
    })
    
    console.log(result)       // false, 表示该数组中有某个元素不小于10

## 16、some() ##

`some()`方法跟`every()`方法类似，只是逻辑判断略有不同，前者是当**每个元素**调用回调函数后的返回值中，只要有一个为`true`，则最终返回`true`；反之，只有当**每个元素**调用回调函数后的返回值**全部都**为`false`时，最后才返回`false`

我们直接来看例子。需求是：判断该数组中是否有元素`12`

var arr = [3, 8, 9, 45, 12]
    
    var result = arr.some(function (value) {
        return value === 12
    })
    
    console.log(result)      // true, 表示该数组中有元素12

那当把`arr`数组中的元素`12`删除以后，我们再来看看返回结果

var arr = [3, 8, 9, 45]
    
    var result = arr.some(function (value) {
        return value === 12
    })
    
    console.log(result)      // false, 表示该数组中并没有元素12

## 17、reduce() ##

`reduce()`方法是通过调用指定的回调函数将数组元素进行组合，并返回组合后的值（不会改变原数组）

**参数（共2个）：**

1.  **第一个参数**：为回调函数，用于处理数组元素。该回调函数有两个参数`x`、`y`，这两个参数都为调用数组的元素成员
2.  **第二个参数**：为可选参数，作为传递给回调函数的初始值。若省略该参数，则将数组的第一个数作为初初始值

当省略了第二个参数时，该方法第一次调用回调函数时，将数组的第一个元素作为回调函数的第一个参数`x`的值，将数组的第二个元素作为回调函数的第二个参数`y`的值。然后运行回调函数里的代码，将`return`后的值作为下一次调用回调函数的第一个参数`x`的值，然后将数组的第三个元素作为参数`y`的值……以此类推，直到数组内所有元素都被调用以后，将**最后一次**调用回调函数的`return`值作为最终的返回值。

如果给第二个参数赋值了的话，则在第一次调用回调函数时，是将第二个参数的值作为该回调函数的第一个参数`x`的值，将数组的第一个参数作为该回调函数的第二个参数`y`的值……接下来的操作都跟上述一样，这里不再重述

我们来看一个例子。需求是：将数组中的每一个元素相乘并返回最终的值

var arr = [1,2,3,4,5,6]
    
    var result = arr.reduce(function (x, y) {
        return x * y
    })
    
    console.log(result)          // 720

再来看一个例子。需求是：某数组中存储着一个班级里5个学生的年龄，现在要计算这5个学生的年龄和，并加上老师的年龄，老师的年龄为29

var arr = [10, 11, 13, 14, 12]
    
    var result = arr.reduce(function (x, y) {
        return x + y
    }, 29)         //这里将老师的年龄29作为reduce()方法的第二个参数
    
    console.log(result)             // 89

## 18、reduceRight() ##

`reduceRight()`方法与`reduce()`方法类似，唯一不同的就是，后者在调用数组元素的时候是从左往右调用的；前者是从右往左调用的。这里就不做过多的讲解了。

## 19、indexOf() ##

`indexOf()`方法是获取某元素在数组中的索引，并且只返回**第一个匹配到的元素**的索引；若该元素不在数组中，则返回 -1（不会改变原数组）

**参数（共2个）：**

1.  **第一个参数**：必填，为需要查询的元素
2.  **第二个参数**：为可选参数，表示从数组的哪个位置开始搜索

我们来看一个例子。需求是：一个班级的学生按成绩从高到低排列好存储在数组中，现在查询`张三`在班级里排名第几

var arr = ['小红', '小明', '张三', '李四', '王五']
    
    var index = arr.indexOf('张三') + 1
    
    console.log(index)          // 3, 表示张三成绩排名第三

我们来改变一下上个例子的需求，现在的需求是：班里有两个`张三`，已知成绩好的那个`张三`在班里排名第一，现在要获取另一个成绩差点的`张三`在班级里的排名

var arr = ['张三', '小红', '小明', '张三', '李四', '王五']
    
    //给indexOf()方法的第二个参数赋值1，表示从数组的第二个元素开始找
    var index = arr.indexOf('张三', 1) + 1 
    
    console.log(index)          // 4, 表示成绩差点的张三排名第四

再来看一个例子。需求是：判断这个班级里是否有`小王`这个人，若调用`indexOf()`方法返回-1，则表示`小王`不在这个班级中；否则表示`小王`在这个班级中

var arr = ['小红', '小明', '张三', '李四', '王五']
    
    var index = arr.indexOf('小王')
    
    if(index === -1) {
        console.log('false')
    }
    else {
        console.log('true')
    }
    
    //  false

## 20、lastIndexOf() ##

`lastIndexOf()`方法与`indexOf()`类似，唯一的区别就是，前者是从数组的末尾开始搜索，后者是从数组的开头开始搜索。所以这里就对该方法做过多的讲解了。

## 21、find() ##

`find()`方法是ES6新增的，它是遍历数组，找出并返回第一个符合回调函数的元素（可以通过回调函数的某些参数对原数组进行改动）

该方法只有一个参数，该参数为回调函数，该回调函数有三个参数，它们的含义分别为：**数组元素** 、**元素的索引** 、**数组本身**

该方法是遍历数组的每一个元素，并依次调用回调函数，回调函数最先返回`true`的元素作为最终的返回值

我们来看一个例子。需求是：在一个数组中，找出第一个大于10的元素

var arr = [1, 7, 3, 10, 12, 20]
    
    var result = arr.find(function (value) {
        return value > 10
    })
    
    console.log(result)   // 12, 表示数组中找到的第一个比10大的元素为12

## 22、findIndex() ##

`findIndex()`方法也是ES6新增的方法，它是遍历数组，找出第一个符合回调函数的元素的索引（不会改变原数组）

该方法只有一个参数，那就是数组的元素

直接来看例子。需求是：找出一个数组中，第一个大于9的元素在数组中的索引

var result = [3, 4, 10, 8, 9, 0].findIndex(function (value) {
        return value > 9
    })
    
    console.log(result)   // 2，表示该数组中第一个大于9的元素索引为2

## 23、fill() ##

`fill()`方法是ES6新增方法，它是用于填充数组的（会改变原数组）

**参数（共3个）：**

1.  **第一个参数**：表示用于填充数组的值
2.  **第二个参数**：可选参数，表示填充的起始位置
3.  **第三个参数**：可选参数，表示填充的结束位置，若省略该参数并且填写了第二个参数，则表示从起始位置开始一直到末尾的所有元素都被填充

我们来看几个简单的例子就能理解这个方法的用法了

[1,2,3,4,5].fill(6)         //返回 [6, 6, 6, 6, 6]
    
    [1,2,3,4,5].fill(6, 2)      //返回 [1, 2, 6, 6, 6]
    
    [1,2,3,4,5].fill(6, 2, 3)   //返回 [1, 2, 6, 4, 5]

## 24、includes() ##

`includes()`方法也是ES6新增的非常实用的一个方法，它是判断一个数是否在该数组中的（不会改变原数组）

**参数（共2个）：**

1.  **第一个参数**：该参数为需要判断是否存在于数组中的数
2.  **第二个参数**：表示搜索的起始位置，默认为0，即从头开始搜索。若为负数，则表示从倒数第几个开始搜索，若输入的位置超出了数组长度，则默认还是为0

我们来看个例子。需求是：判断`banana`是否在数组中

var arr = ['chery', 'banana', 'apple', 'watermelon']
    
    var result = arr.includes('banana')
    
    console.log(result)    //true, 表示banana在数组中

我们再来看看，加上第二个参数以后是什么样的

var arr = ['chery', 'banana', 'apple', 'watermelon']
    
    var result = arr.includes('banana', -2) //表示从倒数第二个开始找
    
    console.log(result) //false, 表示从倒数第二个开始找，没有找到banana

##  ##

结束语

之所以整理了一下JavaScript数组的常用函数方法，其实是因为我最近准备写一系列的【数据结构与算法】的文章，发现数组是JS中最常用的数据结构了，那必须得写一篇，这样到时候大家在看我文章的时候可以利用这些函数来完成**数据结构的增删改查**或**算法的实现**。

当然了，这篇文章也是非常的基础，可以供大家在学习JavaScript基础时使用，也可以作为一个宝典，在忘记函数的使用方法或者参数的含义时，可以来查阅。

希望这篇文章能对你们有所帮助，创作不易，喜欢的加个关注，积极转发，给个赞~ 我们一起玩转前端