[15天] Array.from() 五个使用技巧

前言

Array.from：允许在 JavaScript 集合(如: array、arrayLike、或者是string、map 、set 等可迭代对象) 上进行有用的转换。

在开始之前，我们先回想一下 Array.from() 的作用。语法:

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

一、克隆一个数组

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

二、使用值填充数组

如果你需要使用相同的值来初始化数组，那么 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]

使用 array.map 怎么样？

const length = 3;
const init   = 0;
const result = Array(length).map(() => init);

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

map() 方法似乎不正常，创建出来的数组不是预期的 [0, 0, 0]，而是一个有3个空项的数组。 

这是因为 Array(length) 创建了一个有3个空项的数组(也称为稀疏数组)，但是 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() 生成值范围。例如，下面的 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 函数 。这样你就可以生成值范围。

参考: https://juejin.cn/post/6844903926823649293