ES6新增:创建数组的静态方法from()和of()

489 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

创建一个数组的方式,除了Array构造函数方式(new Array())和数组字面量方式([1,2,3])的方式,还有ES6新增的用于创建数组的静态方法:from()和of()。

注意:

与对象一样,在使用数组字面量表示法创建数组不会调用Array构造函数。

from()

from()用于将类数组结构转换为数组实例。

Array.from()的第一个参数是一个类数组对象,即任何可迭代的结构,或者有一个length属性和可索引元素的结构。

用法

(1)拆分字符串

let s = "hello";
console.log(Array.from(s)); //["h", "e", "l", "l", "o"]

(2)对现有数组进行浅复制

let a1 = [1,2,3];
let a2 = Array.from(a1);
console.log(a1===a2);//false

(3)arguments 对象可转换为数组

function getArgsArray(){
    console.log(Array.isArray(arguments)); //false
    let arr = Array.from(arguments);
    console.log(Array.isArray(arr)); //true
}

(4)将集合和映射转换为一个新数组

const m=new Map().set(1,2).set(3,4);
const s = new Set().add(1).add(2).add(3).add(4);
console.log(Array.from(m));//[[1,2],[3,4]]
console.log(Array.from(s));//[1,2,3,4]

of()

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

这个方法用于替代在ES6之前常用的Array.prototype. slice.call(arguments),一种异常笨拙的将arguments对象转换为数组的写法:

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

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

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

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

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

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

Array.of()方法总是返回参数值组成的数组。如果没有参数,就返回一个空数组。

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

function ArrayOf(){
  return [].slice.call(arguments);
}