一、介绍

Array.from：允许在 JavaScript 集合(如: 数组、类数组对象、或者是字符串、map 、set 等可迭代对象) 上进行有用的转换。

语法:

Array.from(arrayLike[, mapFunction[, thisArg]])

arrayLike：必传参数，想要转换成数组的伪数组对象或可迭代对象。
mapFunction：可选参数，mapFunction(item，index){...} 是在集合中的每个项目上调用的函数。返回的值将插入到新集合中。
thisArg：可选参数，执行回调函数 mapFunction 时 this 对象。这个参数很少使用。

例如，让我们将类数组的每一项乘以2：

const someNumbers = { '0': 10, '1': 15, length: 2 };Array.from(someNumbers, value => value * 2); // => [20, 30]

二、将伪数组转换成数组

Array.from() 第一个用途：将类数组对象转换成数组。

通常，你会碰到的类数组对象有：函数中的 arguments 关键字，或者是一个 DOM 集合。

在下面的示例中，让我们对函数的参数求和：

function sumArguments() {return Array.from(arguments).reduce((sum, num) => sum + num);
}sumArguments(1, 2, 3); // => 6

Array.from(arguments) 将类数组对象 arguments 转换成一个数组，然后使用数组的 reduce 方法求和。

此外，Array.from() 的第一个参数可以是任意一个可迭代对象，我们继续看一些例子:

Array.from('Hey');                   // => ['H', 'e', 'y']
Array.from(new Set(['one', 'two'])); // => ['one', 'two']const map = new Map();
map.set('one', 1)
map.set('two', 2);
Array.from(map); // => [['one', 1], ['two', 2]]

三、克隆一个数组

在 JavaScript 中有很多克隆数组的方法。正如你所想，Array.from() 可以很容易的实现数组的浅拷贝。

const numbers = [3, 6, 9];
const numbersCopy = Array.from(numbers);numbers === numbersCopy; // => false

Array.from(numbers) 创建了对 numbers 数组的浅拷贝，numbers === numbersCopy 的结果是 false，意味着虽然 numbers 和 numbersCopy 有着相同的项，但是它们是不同的数组对象。

四、使用值填充数组

如果你需要使用相同的值来初始化数组，那么 Array.from() 将是不错的选择。

我们来定义一个函数，创建一个填充相同默认值的数组：

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

result 是一个新的数组，它的长度为3，数组的每一项都是0。调用 Array.from() 方法，传入一个类数组对象 { length } 和返回初始化值的 mapFunction 函数。

但是，有一个替代方法 array.fill() 可以实现同样的功能。

const length = 3;
const init   = 0;
const result = Array(length).fill(init);fillArray2(0, 3); // => [0, 0, 0]

fill() 使用初始值正确填充数组。

五、生成数字范围

你可以使用 Array.from() 生成值范围。例如，下面的 range 函数生成一个数组，从0开始到 end - 1。

function range(end) {return Array.from({ length: end }, (_, index) => index);
}range(4); // => [0, 1, 2, 3]

在 range() 函数中，Array.from() 提供了类似数组的 {length：end} ，以及一个简单地返回当前索引的 map 函数。这样你就可以生成值范围。

六、数组去重

由于 Array.from() 的入参是可迭代对象，因而我们可以利用其与 Set 结合来实现快速从数组中删除重复项。

function unique(array) {return Array.from(new Set(array));
}unique([1, 1, 2, 3, 3]); // => [1, 2, 3]

首先，new Set(array) 创建了一个包含数组的集合，Set 集合会删除重复项。

因为 Set 集合是可迭代的，所以可以使用 Array.from() 将其转换为一个新的数组。

这样，我们就实现了数组去重。

七、总结

Array.from() 方法接受类数组对象以及可迭代对象，它可以接受一个 map 函数，并且，这个 map 函数不会跳过值为 undefined 的数值项。这些特性给 Array.from() 提供了很多可能。

如上所述，你可以轻松的将类数组对象转换为数组，克隆一个数组，使用初始化填充数组，生成一个范围，实现数组去重。

实际上，Array.from() 是非常好的设计，灵活的配置，允许很多集合转换。

你知道 Array.from() 的其他有趣用例吗？可以写在评论区。

ES6之Array.from()相关推荐

ES6，Array.copyWithin()函数的用法
ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去. Array.prototype.copyWithin(target, star ...
php copy array,ES6中Array.copyWithin()函数用法的详解
ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去.下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的 ...
ES6/07/Array的扩展方法，...扩展运算符,Array.from()，（arr.find(),arr.findIndex()和arr.includes()）模板字符串,Set数据结构
ES6扩展的内置对象 1,Array的扩展方法 -扩展运算符(展开语法) 1,扩展运算可以的将数组或者对象转为用逗号分隔的参数序列: let ary =[1,2,3]; //-ary;//" ...
es6去除重复项_ES5 ES6中Array对象去除重复项的方法总结
输入例子 [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN].uniq() 输出例子 [false, true, unde ...
Array数组ES6方法Array.isArray、Array.of、Array.from；find、findIndex方法
Array构造函数上的三个方法 Array.isArray Array.isArray() 用于确定传递的值是否是一个数组.如果是数组,则返回true,否则为false. // 鲜为人知的事实:其实 ...
ES6~ES12——Array Includes、Object values、Object entries、Object fromEntries、flat、flatMap、空值合并运算符、可选链等
一.ES7 - Array Includes 在ES7之前,如果我们想判断一个数组中是否包含某个元素,需要通过 indexOf 获取结果,并且判断是否为 -1. 在ES7中,我们可以通过include ...
ES6的Array.from方法创建长度为N的undefined数组
//创建一个12个undefined组成的数组Array.from({length:12})等价于[...Array(12)] 一些扩展使用 Array.from({length:12}).forEa ...
ES6基础之Array.fill函数
引子关注「时事」的同学都会注意到,ES6和TypeScript是时下「投资」的热门.作为一位老同学,我也注意到这一点,不断收集一些小东东,以备不时之需. 正题本文中记录的是ES6为Array增加的 ...
ES6面试知识点汇总（全）
近期在复习ES6,针对ES6新的知识点,以问答形式整理一个全面知识和问题汇总.(全干货,适合对ES6有一定理解的同学复习,以及ES6面试.) 一.问:ES6是什么? 答: ES6是新一代的JS语言标准 ...

ES6之Array.from()