ECMAScript 6（12）数组的扩展

野性酷女 2021-09-19 15:14 286阅读 0赞

**目录**

1.  Array扩展方法

1.1  扩展运算符 ...

1.2  转换数组 Array.from()

1.3 生成数组 Array.of()

2.  数组实例的扩展方法

2.1  数组内复制 copyWithin()

2.2  查找元素和元素索引 find(), findIndex()

2.3  填充数组 fill()

2.4  entries()，keys()和values()

2.5  包含  includes()

2.6  拉平数组 flat(),flatMap()

2.7  数组的空位

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

## 1.  Array扩展方法 ##

### 1.1  扩展运算符 ... ###

之前已经介绍过了,简单上几个demo熟悉一下用法

var arr = [1, 2, 3];
    var arr2 = [4, 5];
    console.log(...arr)  // 1 2 3
    console.log(0,...arr,...arr2)  // 0 1 2 3 4 5
    // 数组合并
    arr.push(...arr2)  //arr [1,2,3,4,5]
    [...arr,...arr2]   //[1,2,3,4,5]
    // 日期
    new Date(...[2019,10,01])  //Fri Nov 01 2019 00:00:00 GMT+0800 (中国标准时间)
    // 字符串
    [...'hello']  // ["h", "e", "l", "l", "o"]

### 1.2  转换数组 Array.from() ###

> 1.  将两类对象转为真正的数组
> 
> 2.  一种是 类似数组的对象（array-like object,必须有`length`属性）, 此时扩展运算符就无法转换。,
> 
> 3.  另一种是可遍历（具有 Iterator 接口）的对象（包括 ES6 新增的数据结构 Set 和 Map）
> 
> 4.  如果参数是一个真正的数组，`Array.from`会返回一个一模一样的新数组。
> 
> 参数1：被用于转换为数组的对象；不能省略  
> 参数2：可选，处理函数，将数组的每个元素通过本函数处理后再返回。如果没有return内容，数组该位置元素的值将是undefined（而不是跳过这个元素）；  
> 参数3：参数2函数里this指向的目标，默认是window对象；

常见数据转换 :

*  1. undefined和null会抛出TypeError；
 *  2. number会返回一个空数组；
 *  3. boolean类型返回空数组；
 *  4. 字符串会以单个字符为单位分拆为数组，例如”ab”变为\[“a”, “b”\]；
 *  5. 数组还是数组（是一个新的数组，但是浅复制，而不是深度复制，即按引用传递的元素保持不变）；
 *  6. 类似数组的对象，会被转为数组，比如Array.from(\{'0':"1",length:2\})输出\["1", undefined\]，注意，必须有length属性才成立。其他情况会返回空数组；
 *  7. 函数返回空数组（无论函数有没有返回值）；
 *  8. NodeList转为数组，如代码：
 *  9. 其他有Iterator接口的类型

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']
    
    // 类数组对象
    Array.from({ length: 3 });
    // [ undefined, undefined, undefined ]

第二个参数 :

Array.from(arrayLike, x => x * x);
    // 等同于
    Array.from(arrayLike).map(x => x * x);
    
    Array.from([1, 2, 3], (x) => x * x)
    // [1, 4, 9]

兼容低版本方法 :

const toArray = (() =>
      Array.from ? Array.from : obj => [].slice.call(obj)
    )();

### 1.3 生成数组 Array.of() ###

Array.of(element0[, element1[, …[, elementN]]])

> 1.  生成一个新数组，然后将参数依次添加到该数组中，返回该数组。

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

与 Array 的区别

new Array()；    //[]
    new Array(1);    //[undefined]
    new Array(2);    //[undefined, undefined]
    new Array(1, 2);    //[1, 2]
    new Array("1");    //["1"]

> **`Array`方法没有参数 (空数组)、**
> 
> **一个参数 (length唯一的,值为undefined的数组)、**
> 
> **两个及两个以上的参数时 (数组)**
> 
> **`Array.of`总是返回参数值组成的数组。如果没有参数，就返回一个空数组。**

## 2.  数组实例的扩展方法  ##

### 2.1  数组内复制 `copyWithin()` ###

语法 :

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

> 它接受三个参数, 这三个参数都应该是数值，如果不是，会自动转为数值。
> 
>  *  target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
>  *  start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
>  *  end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。

因为是实例方法, 不能直接通过Array.copyWithin来访问，而是需要通过prototype来访问。例如：

typeof Array.copyWithin;    //"undefined"
    typeof new Array().copyWithin;    //"function"
    typeof Array.prototype.copyWithin;    //"function"

方法说明 :

[1,2,3,4,5].copyWithin(1)   // [1, 1, 3, 4, 5]
    // 参数1代码要替换的下标, 如果第二个参数不填默认等于0, 长度默认为数组长度, 那么要复制的数组就是[1,2,3,4,5] ,从下标为 1 的位置开始替换, 就是从2开始替换,结果就是[1, 1, 3, 4, 5]
    
    
    [1,2,3,4,5].copyWithin(2,3)  // [1, 2, 4, 5, 5]
    // 第一个参数2表示从下标2也就是3开始替换, 要复制的数组是从下标3开始到结束,也就是 [4,5],
    // 所以结果是 [1, 2, 4, 5, 5]

### ** 2.2  查找元素和元素索引 find(), findIndex()** ###

**语法 : **

arr.find(callback[, thisArg])

通过回调函数,找出第一个符合条件的元素, 并返回

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

语法 :

arr.findIndex(callback[, thisArg])

用法同上 ,只不过返回当前元素索引

但相对来说，find和findIndex，扩展性更强（因为可以用回调函数），并且支持对NaN的查找（因为逻辑可以自己写）。

### 2.3  填充数组 fill() ###

语法 :

arr.fill(value, start, end)

> 三个参数 :
> 
> value : 要填充的值, 如果不填默认填入undefined
> 
> start :  指定填充的起始位置 (含)
> 
> end : 指定填充的结束位置 (不含)

直接上代码 :

[1,2,3].fill()  // [undefined,undefined,undefined]
    [1,2,3].fill(1)  // [1,1,1]
    [1,2,3].fill(0,2,3)  // [1,2,0]
    new Array(3).fill(1)   //[1,1,1]

如果按引用传递类型的话，填充的时候是同一个值。

var a = {};
    var arr = new Array(3).fill(a);
    arr;    //[{}, {}, {}]
    arr[0] === arr[1];    //true

### 2.4  `entries()`，`keys()`和`values()` ###

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

###  2.5  包含  includes() ###

语法 :

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

通过作为参数的函数的返回值，来返回你需要的元素、或元素的索引，比较类似arr.indexOf()。

而这个更加类似indexOf()，这个方法直接传你要查找的元素，他只告诉你有(true)、或没有(false)。

indexOf()当有的时候返回非负整数，没有的时候返回-1。

> 注意 : 
> 
> 1. 可以判断NaN是否包含（indexOf()不行）；
> 
> 2. 永远记住按引用传递类型，查看的是引用的对象是否一致。例如：\[\{\}\].includes(\{\}); //false；

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

### 2.6  拉平数组 flat(),flatMap() ###

简单说就是把多维数组(数组嵌套)转化成一维数组或者低纬数组, 返回新的数组

[1, 2, [3, 4]].flat()
    // [1, 2, 3, 4]
    
    
    [1, 2, [3, [4, 5]]].flat()
    // [1, 2, 3, [4, 5]]
    
    [1, 2, [3, [4, 5]]].flat(2)

如果不管有多少层嵌套，都要转成一维数组，可以用`Infinity`关键字作为参数。

[1, [2, [3]]].flat(Infinity)
    // [1, 2, 3]

`flat()`方法会跳过空位。

[1, 2, , 4, 5].flat()

`flatMap()`方法对原数组的每个成员执行一个函数（相当于执行`Array.prototype.map()`），然后对返回值组成的数组执行`flat()`方法。该方法返回一个新数组，不改变原数组。

[2, 3, 4].flatMap((x) => [x, x * 2])

### 2.7  数组的空位  ###

数组的空位指，数组的某一个位置没有任何值。比如，`Array`构造函数返回的数组都是空位。

注意，空位不是`undefined`，一个位置的值等于`undefined`，依然是有值的。

Array(3) // [, , ,]

上面代码中，`Array(3)`返回一个具有 3 个空位的数组。

ES5 对空位的处理，已经很不一致了，大多数情况下会忽略空位。

*  `forEach()`, `filter()`, `reduce()`, `every()` 和`some()`都会跳过空位。
 *  `map()`会跳过空位，但会保留这个值
 *  `join()`和`toString()`会将空位视为`undefined`，而`undefined`和`null`会被处理成空字符串。

ES6 则是明确将空位转为`undefined`。

`entries()`、`keys()`、`values()`、`find()`和`findIndex()`会将空位处理成`undefined`。

简单来说是 :

注意代码习惯, 不留为空, 如果有空位,使用undefined占位.

var arr = [undefined, undefined, undefined];
    //或
    var arr = new Array(10);
    arr.fill(undefined);