2021.04.27（Array.from()、Array.of()、数组实例的 copyWithin()）

Array.from()

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

下面是一个类似数组的对象， Array.from  将它转为真正的数组。

1.  let arrayLike = {
2.  '0': 'a',
3.  '1': 'b',
4.  '2': 'c',
5.  length: 3
6.  };
7.
8.  // ES5的写法
9.  var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
10.
11.  // ES6的写法
12.  let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

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

1.  // NodeList对象
2.  let ps = document.querySelectorAll('p');
3.  Array.from(ps).filter(p => {
4.  return p.textContent.length > 100;
5.  });
6.
7.  // arguments对象
8.  function foo() {
9.  var args = Array.from(arguments);
10.  // ...
11.  }

上面代码中， querySelectorAll  方法返回的是一个类似数组的对象，可以将这个对象转为真正的数
组，再使用 filter  方法。
只要是部署了 Iterator 接口的数据结构， Array.from  都能将其转为数组。

1.Array.from('hello')
2.  // ['h', 'e', 'l', 'l', 'o']
3.
4.  let namesSet = new Set(['a', 'b'])
5.  Array.from(namesSet) // ['a', 'b'

Array.of()

Array.of  方法用于将一组值，转换为数组。

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

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

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

上面代码中， Array  方法没有参数、一个参数、三个参数时，返回结果都不一样。只有当参数个数不
少于 2 个时， Array()  才会返回由参数组成的新数组。参数个数只有一个时，实际上是指定数组的
长度。

Array.of  基本上可以用来替代 Array()  或 new Array()  ，并且不存在由于参数不同而导致的
重载。它的行为非常统一。

1.  Array.of() // []
2.  Array.of(undefined) // [undefined]
3.  Array.of(1) // [1]
4.  Array.of(1, 2) // [1, 2]

Array.of  总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

数组实例的 copyWithin()

数组实例的 copyWithin()  方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有
成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

 

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

 

它接受三个参数。

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

这三个参数都应该是数值，如果不是，会自动转为数值。

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

上面代码表示将从 3 号位直到数组结束的成员（4 和 5），复制到从 0 号位开始的位置，结果覆盖
了原来的 1 和 2。

下面是更多例子。

1.  // 将3号位复制到0号位
2.  [1, 2, 3, 4, 5].copyWithin(0, 3, 4)
3.  // [4, 2, 3, 4, 5]
4.
5.  // -2相当于3号位，-1相当于4号位
6.  [1, 2, 3, 4, 5].copyWithin(0, -2, -1)
7.  // [4, 2, 3, 4, 5]
8.
9.  // 将3号位复制到0号位
10.  [].copyWithin.call({length: 5, 3: 1}, 0, 3)
11.  // {0: 1, 3: 1, length: 5}
12.
13.  // 将2号位到数组结束，复制到0号位
14.  let i32a = new Int32Array([1, 2, 3, 4, 5]);
15.  i32a.copyWithin(0, 2);
16.  // Int32Array [3, 4, 5, 4, 5]
17.
18.  // 对于没有部署 TypedArray 的 copyWithin 方法的平台
19.  // 需要采用下面的写法
20.  [].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
21.  // Int32Array [4, 2, 3, 4, 5

 

2021-04-27  10:38:55