ES6学习笔记（十四）之数组的扩展2

Array.from 和 Array.of 方法

1. Array.from()：用于两类对象转为真正的数组。
   注：两类对象分别是类似数组的对象和可遍历对象（包括ES6新增的数据结构Set和Map）。若未部署该方法的浏览器，可用Array.prototype.slice方法替代。

• 只要部署了Iterator接口的数据结构，该方法都能将其转为数组；例如字符串和Set结构。

let strToArr = Array.from('Tom');
console.log(strToArr); //[ 'T', 'o', 'm' ]

let setVal = new Set([1, 2, 3]);
console.log(setVal); // Set { 1, 2, 3 }
let setToArr = Array.from(setVal);
console.log(setToArr); // [ 1, 2, 3 ]

• 若参数是一个真正的数组，该方法会返回相同的新数组。
• 类似数组的对象必须要有length属性才可以通过该方法转为数组（扩展运算符无法转换）。

let obj = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3
};
let newArr = Array.from(obj);
console.log(newArr); //[ 'a', 'b', 'c' ]

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

let arr = ['a', 'b', 'c'];
let newArr = Array.from(arr, v => v + v);
console.log(newArr); // [ 'aa', 'bb', 'cc' ]

• 该方法还可以接受第三个参数，map函数里的this指向。

let sumObj = {
    sum: function (v) {
        return v + v;
    }
};

let newArr2 = Array.from(
    [5, 10],
    function (v) {
        return this.sum(v)
    },
    sumObj
);
console.log(newArr2); //[ 10, 20 ]

• 补充：扩展运算符也可以将某些数据结构转为数组（arguments对象、NodeList对象）；扩展运算符调用的是遍历器接口，若一个对象没有部署该接口则无法转换。

let nodeList = document.querySelectorAll('div');

let newNodeList = Array.from(nodeList);
//或
let newNodeList2 = [...nodeList];

console.log(nodeList);
console.log(newNodeList);
console.log(newNodeList2);

//arguments对象
function test() {
    console.log(arguments); //[Arguments] { '0': 1, '1': 'a', '2': true }
    return Array.from(arguments); //或 return [...arguments]
}

console.log(test(1, 'a', true)); // [ 1, 'a', true ]

2. Array.of()：用于将一组值转换为数组；返回参数值组成的数组，没有参数则返回空数组。

console.log(Array.of()); //[]
console.log(Array.of(1)); //[ 1 ]
console.log(Array.of(1, 's')); //[ 1, 's' ]