ES6 新增的 Array.from 方法

[felix-cao]

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

一、将类数组对象转为真正的数组

具有 length 属性的对象就是类数组对象

var arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
var arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

去掉 length：

var arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
};
var arr = Array.from(arrayLike); // []

对象的属性名为字符串型：

var arrayLike = {
    'a': 'a',
    'b': 'b',
    'c': 'c',
    length: 3
};
var arr = Array.from(arrayLike); // [undefined, undefined, undefined]

长度为4，元素均为 undefined 的数组, 由此可见将一个类数组对象转换为一个真正的数组，必须具备以下条件：

• 该类数组对象必须具有 length 属性，用于指定数组的长度。如果没有 length 属性，那么转换后的数组是一个空数组。

• 该类数组对象的属性名必须为数值型或字符串型的数字.

• 该类数组对象的属性名可以加引号，也可以不加引号.

二、SET 结构数据

var arr = [11, 12,  14, 104, 105]
var set = new Set(arr)
console.log(Array.from(set))  // [11, 12,  14, 104, 105]

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

var arr = [11, 12,  14, 104, 105]
var set = new Set(arr)
console.log(Array.from(set, item => item + 1))  // [12, 13,  15, 105, 106]

三、将字符串转换为数组

var  str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]