ES6 数组的扩展

Posted 2020-09-26

Array.from()

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

 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都可以将它们转为真正的数组。

// NodeList对象
let ps = document.querySelectorAll(‘p‘);
Array.from(ps).forEach(function (p) {
  console.log(p);
});

// arguments对象
function foo() {
  var args = Array.from(arguments);
  // ...
}

上面代码中，querySelectorAll方法返回的是一个类似数组的对象，只有将这个对象转为真正的数组，才能使用forEach方法。

只要是部署了Iterator接口的数据结构，Array.from都能将其转为数组。

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

 

Array.of()

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

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

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

//Array.of方法可以用下面的代码模拟实现。

function ArrayOf(){
  return [].slice.call(arguments);   // ES5的写法

}