【JavaScript】常用的数组方法汇总（含ES6数组方法）

Bertha 。 2022-12-01 03:52 309阅读 0赞

**常用的字符串方法汇总（含ES6字符串方法）**：[链接][Link 1]

### 目录 ###

*   *   *  一、 ES5 中的数组方法
         *   *  1. shift()
             *  2. pop()
             *  3. splice()
             *  4. slice()
             *  5. concat()
             *  6. every()
             *  7. join()
             *  8. push()
             *  9. unshift()
             *  10. reverse()
             *  11. sort()
             *  12. toString()
             *  13. forEach()
             *  14. map()
             *  15. reduce()
         *  二、ES6 中的数组方法
         *   *  1. from()
             *  2. of()
             *  3. copyWithin()
             *  4. find()
             *  5. findIndex()
             *  6. fill()
             *  7. entries()、keys() 、 values()
             *  8. includes()
             *  9. flat()
             *  10. flatMap()

在说这些方法之前，先说一些这些方法的分类，他们可以分为两种：类方法和实例方法。这两种方法在使用时是不一样的。

*  类属性（静态属性）：通过类直接访问，不需要声明类的实例来访问
 *  类方法（静态方法）：通过类直接访问，不需要声明类的实例来访问
 *  实例属性（动态属性）：不能通过类直接访问，需要通过该类声明的实例才能访问
 *  实例方法（动态方法）：不能通过类直接访问，需要通过该类声明的实例才能访问

**类属性和类方法：**

Person = function(){ }
    Persion.sex = "woman";  //类属性
    
    Person.eat= function(){   //类方法
    　　alert("eat");
    }
    var person = new Person();
    
    Person.sex;//静态属性
    Person.eat();//静态方法

**实例属性和实例方法：**

Person = function(){ }
    Person.prototype.age = 10; //实例属性
    
    Person.prototype.dance = function(){  //实例方法
    　　alert("dance");
    }
    var person = new Person();
    person.age;  //实例属性
    person.dance();  //实例方法

简单来说就是，在原型上定义的方法要实例化对象之后才能调用。

### 一、 ES5 中的数组方法 ###

首先看看ES5中常用的数组方法有哪些：

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
   <th>是否改变原数组</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>shift()</td> 
   <td>删除并返回数组的第一个元素。</td> 
   <td>是</td> 
  </tr> 
  <tr> 
   <td>pop()</td> 
   <td>删除并返回数组的最后一个元素。</td> 
   <td>是</td> 
  </tr> 
  <tr> 
   <td>push()</td> 
   <td>向数组的末尾添加一个或更多元素，并返回新的长度。</td> 
   <td>是</td> 
  </tr> 
  <tr> 
   <td>unshift()</td> 
   <td>向数组的开头添加一个或更多元素，并返回新的长度。</td> 
   <td>是</td> 
  </tr> 
  <tr> 
   <td>join()</td> 
   <td>把数组的所有元素放入一个字符串。<br>元素通过指定的分隔符进行分隔</td> 
   <td>否</td> 
  </tr> 
  <tr> 
   <td>toString()</td> 
   <td>把数组转换为字符串，并返回结果。</td> 
   <td>否</td> 
  </tr> 
  <tr> 
   <td>slice()</td> 
   <td>从某个已有的数组返回选定的元素。</td> 
   <td>否</td> 
  </tr> 
  <tr> 
   <td>splice()</td> 
   <td>删除元素，并向数组添加新元素。</td> 
   <td>是</td> 
  </tr> 
  <tr> 
   <td>concat()</td> 
   <td>连接两个或更多的数组，并返回结果。</td> 
   <td>否</td> 
  </tr> 
  <tr> 
   <td>sort()</td> 
   <td>对数组的元素进行排序。</td> 
   <td>是</td> 
  </tr> 
  <tr> 
   <td>reverse()</td> 
   <td>颠倒数组中元素的顺序。</td> 
   <td>是</td> 
  </tr> 
  <tr> 
   <td>every()</td> 
   <td>用于检测数组所有元素是否都符合指定条件。</td> 
   <td>否</td> 
  </tr> 
  <tr> 
   <td>forEach()</td> 
   <td>用于调用数组的每个元素，并将元素传递给回调函数。</td> 
   <td>否</td> 
  </tr> 
  <tr> 
   <td>map()</td> 
   <td>方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。</td> 
   <td>否</td> 
  </tr> 
 </tbody> 
</table>

#### 1. shift() ####

**定义：** shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

**返回值：** 该方法返回数组原来的第一个元素的值。如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。

**注意：** 该方法会改变原数组

#### 2. pop() ####

**定义：** pop() 方法用于删除并返回数组的最后一个元素。

**返回值：** 该方法返回数组原来的最后一个元素的值。如果数组是空的，那么 pop() 方法将不进行任何操作，返回 undefined 值。

**注意：** 该方法会改变原数组

#### 3. splice() ####

**定义：** splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

**语法：**

arrayObject.splice(index,howmany,item1,.....,itemX)

参数如下：

*  `index` ：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
 *  `howmany` ：必需。要删除的项目数量。如果设置为 0，则不会删除项目。
 *  `item1, ..., itemX` ：可选。向数组添加的新项目。

splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

**返回值：** 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

**注意：** 该方法会改变原数组

#### 4. slice() ####

**定义：** slice() 方法可从已有的数组中返回选定的元素。

**语法：** `arrayObject.slice(start,end)`

参数如下：

*  `start` ：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
 *  `end` ：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素

**返回值：** 返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

**注意：** 该方法并不会修改数组，而是返回一个子数组。

#### 5. concat() ####

**定义：** concat() 方法用于连接两个或多个数组。

**语法：**

arrayObject.concat(arrayX,arrayX,......,arrayX)

其参数如下：

*  arrayX：必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个

**返回值：** 返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

**注意：** 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

#### 6. every() ####

**定义：** every() 方法用于检测数组所有元素是否都符合指定条件。

**语法：**

array.every(function(currentValue,index,arr), thisValue)

其参数如下：

*  `function(currentValue, index,arr)` ：必须。函数，数组中的每个元素都会执行这个函数  
    函数参数:
    
     *  `currentValue`：必须。当前元素的值
     *  `index`：可选。当前元素的索引值
     *  `arr`：可选。当前元素属于的数组对象
 *  `thisValue`：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

**返回值：** 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回 true。

**注意：** 该方法不会改变原始数组。并且不会对空数组进行检测。

#### 7. join() ####

**定义：** join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

**语法：** `arrayObject.join(separator)`

其中参数如下：

*  separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

**返回值：** 返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。

#### 8. push() ####

**定义：** push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

**返回值：** 把指定的值添加到数组后的新长度。

**注意：** push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

#### 9. unshift() ####

**定义：** unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

**返回值：** 把指定的值添加到数组前的新长度。

**注意：** unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。该方法不创建新的创建，而是直接修改原有的数组。

#### 10. reverse() ####

**定义：** reverse() 方法用于颠倒数组中元素的顺序。

**返回值：** 该方法会返回颠倒顺序后的数组

**注意：** 该方法会改变原来的数组，而不会创建新的数组。

#### 11. sort() ####

**定义：** sort() 方法用于对数组的元素进行排序。

**语法：** `arrayObject.sort(sortby)`

其中参数如下：

*  sortby 可选。规定排序顺序。必须是函数。

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

*  若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
 *  若 a 等于 b，则返回 0。
 *  若 a 大于 b，则返回一个大于 0 的值。

**返回值：** 返回排序后的数组

**注意：** 数组在原数组上进行排序，不生成副本。

#### 12. toString() ####

**定义：** toString()方法可把数组转换为字符串，并返回结果。

**返回值：** arrayObject 的字符串表示。数组中的元素之间用逗号分隔。返回值与没有参数的 join() 方法返回的字符串相同。

**注意：** 当数组用于字符串环境时，JavaScript 会调用这一方法将数组自动转换成字符串。但是在某些情况下，需要显式地调用该方法。

#### 13. forEach() ####

**定义：** forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

**语法：**

array.forEach(function(currentValue, index, arr), thisValue)

其参数如下：

**注意：** 该方法没有返回值，不会修改原数组

#### 14. map() ####

**定义：** map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

**返回值：** map() 方法按照原始数组元素顺序依次处理元素。

**语法：**

array.map(function(currentValue, index, arr), thisValue)

其参数如下：

**注意：** 该方法没有返回值，不会修改原数组

**注意：** map() 不会对空数组进行检测，并且不会改变原始数组。

#### 15. reduce() ####

**定义：** reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。该方法可以作为一个高阶函数，用于函数的 compose。

**使用方法：** [【JavaScript】数组reduce()方法的妙用][JavaScript_reduce]

**注意：** reduce() 对于空数组是不会执行回调函数的。

### 二、ES6 中的数组方法 ###

再来看看ES6中的数组方法：

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
   <th>是否改变原数组</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>from()</td> 
   <td>将类数组转化为真正的数组</td> 
   <td>/</td> 
  </tr> 
  <tr> 
   <td>of()</td> 
   <td>用于将一组值，转换为数组</td> 
   <td>否</td> 
  </tr> 
  <tr> 
   <td>copyWithin()</td> 
   <td>当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员）</td> 
   <td>是</td> 
  </tr> 
  <tr> 
   <td>find()</td> 
   <td>返回第一个符合条件的数组成员</td> 
   <td>否</td> 
  </tr> 
  <tr> 
   <td>findIndex()</td> 
   <td>返回第一个符合条件的数组成员的位置</td> 
   <td>否</td> 
  </tr> 
  <tr> 
   <td>fill()</td> 
   <td>使用给定值，填充一个数组</td> 
   <td>是</td> 
  </tr> 
  <tr> 
   <td>entries()</td> 
   <td>用于遍历数组，遍历键名</td> 
   <td>否</td> 
  </tr> 
  <tr> 
   <td>keys()</td> 
   <td>用于遍历数组，遍历键值</td> 
   <td>否</td> 
  </tr> 
  <tr> 
   <td>values()</td> 
   <td>用于遍历数组，遍历键值对</td> 
   <td>否</td> 
  </tr> 
  <tr> 
   <td>includes()</td> 
   <td>判断数组中是否包含给定的值</td> 
   <td>否</td> 
  </tr> 
  <tr> 
   <td>flat()</td> 
   <td>数组扁平化</td> 
   <td>否</td> 
  </tr> 
  <tr> 
   <td>flatMap()</td> 
   <td>数组扁平化</td> 
   <td>否</td> 
  </tr> 
 </tbody> 
</table>

#### 1. from() ####

**定义：** Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

let arrayLike = { 
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
    };
    
    // ES5的写法
    var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
    
    // ES6的写法
    let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。

// NodeList对象
    let ps = document.querySelectorAll('p');
    Array.from(ps).filter(p => { 
      return p.textContent.length > 100;
    });
    
    // arguments对象
    function foo() { 
      var args = Array.from(arguments);
      // ...
    }

Array.from()的另一个应用是，将字符串转为数组，然后返回字符串的长度。因为它能正确处理各种 Unicode 字符，可以避免 JavaScript 将大于\\uFFFF的 Unicode 字符，算作两个字符的 bug。

function countSymbols(string) { 
      return Array.from(string).length;
    }

**注意：** 该方法产生的数组是一个拷贝的值，不会改变原类数组对象。

#### 2. of() ####

**定义：** Array.of()方法用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
    Array.of(3) // [3]
    Array.of(3).length // 1

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组

**返回值：** 返回参数值组成的数组。如果没有参数，就返回一个空数组。

**注意：** 该方法返回的是新的Array实例

#### 3. copyWithin() ####

**定义：** 该方法会在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。

**语法：**

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三个参数。

*  target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
 *  start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
 *  end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

// 将3号位复制到0号位
    [1, 2, 3, 4, 5].copyWithin(0, 3, 4)
    // [4, 2, 3, 4, 5]
    
    // -2相当于3号位，-1相当于4号位
    [1, 2, 3, 4, 5].copyWithin(0, -2, -1)
    // [4, 2, 3, 4, 5]
    
    // 将3号位复制到0号位
    [].copyWithin.call({ length: 5, 3: 1}, 0, 3)
    // {0: 1, 3: 1, length: 5}
    
    // 将2号位到数组结束，复制到0号位
    let i32a = new Int32Array([1, 2, 3, 4, 5]);
    i32a.copyWithin(0, 2);
    // Int32Array [3, 4, 5, 4, 5]

**注意：** 该方法会修改当前数组。

#### 4. find() ####

**定义：** 该方法用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

[1, 4, -5, 10].find((n) => n < 0)
    // -5

**语法：**

arr.find(callback[, thisArg])

其参数如下：

*  callback：在数组每一项上执行的函数，接收 3 个参数：
    
     *  element：当前遍历到的元素。
     *  index：可选，当前遍历到的索引。
     *  array：可选，数组本身。
 *  thisArg：可选，执行回调时用作this 的对象。

**注意：** find方法不会改变数组。

#### 5. findIndex() ####

**定义：** 数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) { 
      return value > 9;
    }) // 2

其语法和find()方法一样。

**注意：** findIndex()方法不会改变数组。

#### 6. fill() ####

**定义：** fill方法使用给定值，填充一个数组。

['a', 'b', 'c'].fill(7)
    // [7, 7, 7]
    
    new Array(3).fill(7)
    // [7, 7, 7]

上面代码表明，fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。

**语法：**

arr.fill(value[, start[, end]])

其参数如下：

*  value：用来填充数组元素的值。
 *  start ：可选，起始索引，默认值为0。
 *  end ：可选，终止索引，默认值为 this.length。

**返回值：** 返回修改过的数组

**注意：** 该方法会修改原数组。

#### 7. entries()、keys() 、 values() ####

这三个方法都用于遍历数组。它们都返回一个遍历器对象，可以用for…of循环进行遍历，唯一的区别是**keys()是对键名的遍历**、**values()是对键值的遍历**，**entries()是对键值对的遍历**。

for (let index of ['a', 'b'].keys()) { 
      console.log(index);
    }
    // 0
    // 1
    
    for (let elem of ['a', 'b'].values()) { 
      console.log(elem);
    }
    // 'a'
    // 'b'
    
    for (let [index, elem] of ['a', 'b'].entries()) { 
      console.log(index, elem);
    }
    // 0 "a"
    // 1 "b"

#### 8. includes() ####

**定义：** includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。

[1, 2, 3].includes(2)     // true
    [1, 2, 3].includes(4)     // false
    [1, 2, NaN].includes(NaN) // true

**语法：**

arr.includes(searchElement)
    arr.includes(searchElement, fromIndex)

其参数如下

*  searchElement 必须。需要查找的元素值。
 *  fromIndex 可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

**返回值：** 布尔值。如果找到指定值返回 true，否则返回 false。

#### 9. flat() ####

**定义：** flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

**语法：**

var newArray = arr.flat([depth])