js 数组操作方法（ES6）

桃扇骨 2022-01-28 08:29 416阅读 0赞

**1.`Array`数组的方法**

Mutator方法————"突变方法"会改变数组自身的值；
    
    Accessor方法————"访问方法"不会改变数组自身的值；
    
    Iteration方法————"遍历的方法" 
    
    Establish方法————"创建新方法"

**2.`Mutator`方法（**会改变数组自身的值**）**  
1、`[ ].push`  
`作用`：将一个或多个元素添加到数组的末尾，  
`传参`：（单个或多个数组元素）；  
`返回值`：新数组的长度；

//标准用法
     arr.push(el1, el2 ……elN)；
     //合并两个数组
     [].push.apply(arr1, arr2)

2、`[].pop()`，  
`作用`：删除最后一个元素，  
`传参`：无；  
`返回值`：删除的元素。

//标准用法
    let a = [1 ,2 ,3 ];
    a.pop();//3

3、`[ ].unshift`  
`作用`：将一个或多个元素添加到数组的开头，  
`传参`：（单个或多个数组元素）；  
`返回值`：新数组的长度；

//标准用法
     arr.unshift(el1, el2 ……elN)；

4、`[].shift()`，  
`作用`：删除第一个元素，  
`传参`：无；  
`返回值`：删除的元素。

//标准用法
    let a = [1 ,2 ,3 ];
    a.shift();//1

5、`[].reverse()`，  
`作用`：数组元素颠倒位置，  
`传参`：无；  
`返回值`：颠倒后的数组。

//标准用法
    arr.reverse()

6、`[].splice()`，  
`作用: `向/从数组中添加/删除项目，然后返回被删除的项目，  
`传参`：（索引，删除个数【选】，要添加的元素【选】）；  
`返回值`：被删除的元素组成的一个数组。

//标准用法
    array.splice(start)
    array.splice(start, deleteCount) 
    array.splice(start, deleteCount, item1, item2, ...)

`7、[].fill()`，  
`作用`：用一个固定值填充一个数组中从起始索引到终止索引内的全部元素，  
`传参`：（用来填充数组元素的值，起始索引【选】，终止索引【选】）；  
`返回值`：修改后的数组。

//标准用法
    arr.fill(value) 
    arr.fill(value, start) 
    arr.fill(value, start, end)
    
    //例子
    [1, 2, 3].fill(4)            // [4, 4, 4]
    [1, 2, 3].fill(4, 1)         // [1, 4, 4]
    [1, 2, 3].fill(4, 1, 2)      // [1, 4, 3]

8、`[].sort()`，  
`作用`：对数组的元素进行排序，并返回数组，  
`传参`：（指定排列顺序的函数【选】）；  
`返回值`：排列后的数组。

//标准用法
    arr.sort() 
    arr.sort(compareFunction)
    
    //例子
    let numbers = [4, 2, 5, 1, 3];
    numbers.sort((a, b) => {
        return a - b;
    });
    
    // [1, 2, 3, 4, 5]

**3.`Accessor`方法（不会改变数组自身的值）**

`1、[ ].join`  
`作用`：将数组（或一个类数组对象）的所有元素连接到一个字符串中。  
`传参`：（指定一个字符串来分隔数组的每个元素【选】）；  
`返回值`：一个所有数组元素连接的字符串；

//标准用法
    let a = ['Wind', 'Rain', 'Fire'];
    let myVar1 = a.join();      // myVar1的值变为"Wind,Rain,Fire"
    let myVar2 = a.join(', ');  // myVar2的值变为"Wind, Rain, Fire"

`2、[ ].concat`  
`作用`：合并两个或多个数组。  
`传参`：（将数组和/或值连接成新数组【选】）；  
`返回值`：合并后的数组；

//标准用法
    let alpha = ['a', 'b', 'c'];
    let numeric = [1, 2, 3];
    
    alpha.concat(numeric);
    //['a', 'b', 'c', 1, 2, 3]

`3、[ ].slice`  
`作用`：方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组。  
`传参`：（开始索引【选】，结束索引【选】）；  
`返回值`：截取后的数组；

//标准用法
    let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
    let citrus = fruits.slice(1, 3);
    console.info(citrus );     //['Orange','Lemon'] 
    
    //类数组转数组
    function list() {
         return [].slice.call(arguments)
    }
    let list1 = list(1, 2, 3);     //[1, 2, 3]

`4、[ ].toString`  
`作用`：返回一个字符串，表示指定的数组及其元素，  
`传参`：（无）；  
`返回值`：转化成的字符串；（`=[].join()`）

//标准用法
    let monthNames = ['Jan', 'Feb', 'Mar', 'Apr'];
    let myVar = monthNames.toString();     // assigns "Jan,Feb,Mar,Apr" to myVar.

`5、[ ].includes`  
`作用`：判断一个数组是否包含一个指定的值，  
`传参`：（要查找的元素）；  
`返回值`：true或 false；

//标准用法
    let a = [1, 2, 3];
    a.includes(2); // true 
    a.includes(4); // false

`6、[ ].indexOf`  
`作用`：在数组中可以找到一个给定元素的第一个索引，  
`传参`：（要查找的元素）；  
`返回值`：找不到-1，找得到索引；

let array = [2, 5, 9];
    array.indexOf(2);     // 0
    array.indexOf(7);     // -1

> **4.`Iteration`方法**

`1、[ ].forEach`  
`作用`：每个元素执行一次提供的函数，  
`传参`：（callback(当前元素,索引，该数组)）；  
`返回值`：无；

//标准用法
     array.forEach(callback(currentValue, index, array){
     //do something
    }, this)

`2、[ ].find`  
`作用`：返回数组中满足提供的测试函数的第一个元素的值，  
`传参`：（callback(当前元素,索引，该数组)）；  
`返回值`：该元素；（`[].findIndex()`返回索引）

//标准用法
     array.find(callback(currentValue, index, array){
     //do something
    }, this)
      
    let num = [1,2,3];
    console.log(num.find( value => {
        if(value === 2){
            return true;
        }
        return false;
    }));  // 2

`3、[ ].filter`  
`作用`：创建一个新数组, 其包含通过所提供函数实现的测试的所有元素，  
`传参`：（callback(当前元素,索引，该数组)）；  
`返回值`：通过测试的元素的集合的数组；

//标准用法
     let arr = array.filter(callback(currentValue, index, array){
         //do something
     }, this)

`4、[ ].map`  
`作用`：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。  
`传参`：（callback(当前元素,索引，该数组)）；  
`返回值`：一个新数组，每个元素都是回调函数的结果；

//标准用法
     let numbers = [1, 4, 9];
     let roots = numbers.map(Math.sqrt);
     // roots的值为[1, 2, 3], 
     //numbers的值仍为[1, 4, 9]

`5、[ ].every`—`作用`：测试数组的`所有`元素是否都通过了指定函数的测试；  
`传参`：（callback(当前元素,索引，该数组)）；  
`返回值`：`true`或`false`；

//标准用法
    function isBigEnough(element, index, array) {
        return (element >= 10);
    }
    let passed = [12, 5, 8, 130, 44].every(isBigEnough);    // passed is false
        passed = [12, 54, 18, 130, 44].every(isBigEnough);    // passed is true

`6、[ ].some`  
`作用`：测试数组的`某些`元素是否都通过了指定函数的测试；  
`传参`：（callback(当前元素,索引，该数组)）；  
`返回值`：`true`或`false`；

//标准用法
    function isBigEnough(element, index, array) {
        return (element >= 10);
    }
    let passed = [1, 5, 8, 3, 4].some(isBigEnough);    // passed is false
        passed = [2, 4, 18, 13, 4].some(isBigEnough);    // passed is true

`7、[ ].reduce`  
`作用`：对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值；  
`传参`：（callback(累加器accumulator，当前元素,索引，该数组)）；  
`返回值`：函数累计处理的结果；

//标准用法
    let total = [0, 1, 2, 3].reduce((sum, value) => {
        return sum + value;
    }, 0);    
    // total is 6
    
    let flattened = [[0, 1], [2, 3], [4, 5]];
    flattened.reduce((a, b) => {
        return a.concat(b);
    }, []);
    
    // flattened is [0, 1, 2, 3, 4, 5]

`8、[ ].entries`  
`作用`：返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对；  
`传参`：无；  
`返回值`：一个新的 Array 迭代器对象；

//标准用法
       var arr = ["a", "b", "c"];
       var iterator = arr.entries();// undefined
       console.log(iterator);// Array Iterator {}
       console.log(iterator.next().value); // [0, "a"]
       console.log(iterator.next().value); // [1, "b"]
       console.log(iterator.next().value); // [2, "c"]

`9、[ ].values`  
`作用`：数组转对象；  
`传参`：无；  
`返回值`：一个新的 Array 迭代器对象；

//标准用法
       let arr = ['w', 'y', 'k', 'o', 'p'];
       let eArr = arr.values();    // 您的浏览器必须支持 for..of 循环
    
       // 以及 let —— 将变量作用域限定在 for 循环中
      for (let letter of eArr) {
           console.log(letter);
       }

5.Establish方法（创建新方法）

1、[Array.from()][Array.from]

该方法基于一个类数组的对象或可迭代的对象，创建一个新的数组实例。该方法接收一至三个参数，各个参数如下：

1.  参数1是一个类数组对象或可迭代对象，方法基于该对象创建数组。函数的返回值将作为新数组中的每一项的值。必需的参数。
2.  参数2是一个函数，数组的每一项都会调用该函数。非必需参数。
3.  参数3指定在参数2中，this所代表的对象。非必需参数。

类数组对象是具有length属性并含有被编上索引的元素的对象，如NodeList对象。  
可迭代对象是可以获得其中的元素的对象，如[Map][]和[Set][]

var str = "hello";
    Array.from(str, x => x + x);      // ["hh", "ee", "ll", "ll", "oo"]

上面的代码中接收一个字符串为第一个参数，接收箭头函数作为第二个参数。在箭头函数中，对每一项做了复制操作，然后返回得到的值，作为数组的每一项。

### [Array.of()][Array.of] ###

该方法接收一系列参数，并以这些参数为项，创建一个数组，并返回该数组。

var arra = Array.of("red", "green", "blue");
    console.log(arra);         //  ["red", "green", "blue"]

该方法与构造函数`Array()`类似，但有一点不同。当接收到只有**一个**数值类型的参数时，`Array()`会创建一个数值参数指定的长度的数组，而`Array.of()`会将该数值作为数组中的项添加进数组。

var arra1 = new Array(7);
    console.log(arra1);     //  [undefined × 7]
    var arra2 = Array.of(7);
    console.log(arra2);     //  [7]

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[Array.from]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from?v=control
[Map]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
[Set]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
[Array.of]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/of?v=control
[20191229112121499.png]: /images/20220128/bdc42ff50780400d8dfc8189b06a1ac1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220128/eedb172615d742729303378d3dec6d55.png