Array.from()巧用

Array.from()：从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

1. 将类数组转换成数组

常见的类数组对象：

函数中的arguments关键字 

一个DOM集合（比如：document.getElementsByTagName("p")可以获取文档中所有的p元素，这就是一个DOM集合）

类数组对象可以用索引引用也可以使用length，但是没有数组的一些方法，比如pop(),push(),reduce()等，通过Array.from()将类数组对象转换成一个数组。就可以使用数组的那些方法了。

2. 克隆一个数组(浅拷贝)

// 引用类型直接赋值的话，是将指向引用类型的指针进行赋值，享有同一个内存地址，修改其中一个数据也会干扰到另一个数据的值
const person = [1,3,2,4]
const me = person;
console.log(person===me)  // true

me[1]=4;
console.log(person)  // [1, 4, 2, 4]
console.log(me)      // [1, 4, 2, 4]

浅拷贝：只复制指向引用类型的指针，而不复制引用类型本身，新旧引用类型还是共享同一块内存。浅拷贝的引用类型若包含子引用类型，当新的引用类型对子引用类型发生改变时则会使原引用类型子引用类型一同改变，若新的引用类型只改变第一层的数据，则原引用类型不会改变。

深拷贝：会另外创造一个一模一样的引用类型，新引用类型跟原引用类型不共享内存，修改新引用类型不会改到原引用类型。

const person = [1,[2,[4,5],3]]
const me = Array.from(person);
console.log(person===me)    // false
// 如果修改子引用类型，则：
me[1]=4;
console.log(person)    // [1,[2,[4,5],3]]
console.log(me)        // [1, 4]

// 如果修改子基本类型，则：
me[0]=9;
console.log(person)    // [1,[2,[4,5],3]]
console.log(me)        // [9,[2,[4,5],3]]

3. 使用值填充数组

可以使用Array.from()来模仿fill()实现数组填充

const length = 3;
const init   = 0;
const result = Array.from({ length }, () => init);

result; // => [0, 0, 0]

//  arr.fill(value[, start[, end]])
console.log(Array(6).fill(6));    // => [6, 6, 6, 6, 6, 6]

4.使用对象填充数组

如果要求初始化的每一项都是一个新对象，使用Array.from()是个不错的选择。

const length = 3;
const resultA = Array.from({ length }, () => ({}));
const resultB = Array(length).fill({});

resultA; // => [{}, {}, {}]
resultB; // => [{}, {}, {}]

resultA[0] === resultA[1]; // => false
resultB[0] === resultB[1]; // => true

5.数组去重

结合Set来实现数组去重

function unique(array) {
  return Array.from(new Set(array));
}

unique([1, 1, 2, 3, 3]); // => [1, 2, 3]

当然数组去重比较好用的方法还有...运算符：

const ar = [6,6,6,6,1,2];
const a=[...new Set(ar)]

console.log(a);    // =>[6, 1, 2]