JavaScript ES6 Array.from方法总结

本篇文章参考以下博文

• ES6，Array.from()函数的用法
• JavaScript from() 方法
• Array.from()
• Array.from()五个超好用的用途

一、前言

  最近在使用 Set 对象去重的时候，发现 from 函数的一些用法，感觉可以挖掘深入一些，所以写此文章总结记录，方便以后复习查看。

二、定义

   from 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。

三、语法

Array.from(object, mapFunction, thisValue)

• object 要转化成数组的对象
• mapFunction 数组中每个元素要调用的函数
• thisValue 设置 mapFunction 中的 this 对象

四、实例

4.1 结合 Set 去重

  这个方法最常用的应该就是配合 Set 对象，进行去重，写法如下：

Array.from(new Set(arr));

4.2 从 String 生成数组

Array.from('foo'); 
// [ "f", "o", "o" ]

4.3 从 Set 生成数组

const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// [ "foo", "bar", "baz" ]

4.4 从 Map 生成数组

  不光可以把 Map 变成数组，还可以指定把“ 键 ”生成数组，还是把“ 值 ”生成数组。

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

4.5 从类数组对象（arguments）生成数组

function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

// [ 1, 2, 3 ]

4.6 拷贝数组

  浅拷贝

const numbers = [1, 2, 3];
const numbersCopy = Array.from(numbers);

  深拷贝，下面是通过 from 的第二个参数 对数组元素循环调用。

function recursiveClone(val) {
    return Array.isArray(val) ? Array.from(val, recursiveClone) : val;
}

4.7 初始化数组

Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

/****************************/

const result = Array.from({ length：3 }, () => 1);

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

/****************************/

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

result; // => [{}, {}, {}]