Array.from()의 매우 유용한 5가지 용도(자세한 설명)

모든 프로그래밍 언어는 기본 사용법 이상의 기능을 갖추고 있으며 성공적인 설계와 다양한 문제 해결 시도에서 이점을 얻습니다.

JavaScript에는 다음과 같은 함수가 있습니다. Array.from: JavaScript 컬렉션(예: 배열, 유사 배열 개체 또는 문자열, 맵, 집합과 같은 반복 가능한 개체) 변환에 대한 유용한 작업을 허용합니다. . Array.from：允许在 JavaScript 集合(如: 数组、类数组对象、或者是字符串、map 、set 等可迭代对象) 上进行有用的转换。

【相关课程推荐：JavaScript视频教程】

在本文中，我将描述5个有用且有趣的 Array.from() 用例。

1. 介绍

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

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]

2.将类数组转换成数组

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]]

3.克隆一个数组

在 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() 创建数组的克隆，包括所有嵌套的？挑战一下！

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

const numbers = [[0, 1, 2], ['one', 'two', 'three']];
const numbersClone = recursiveClone(numbers);

numbersClone; // => [[0, 1, 2], ['one', 'two', 'three']]
numbers[0] === numbersClone[0] // => false

recursiveClone() 能够对数组的深拷贝，通过判断 数组的 item 是否是一个数组，如果是数组，就继续调用 recursiveClone() 来实现了对数组的深拷贝。

你能编写一个比使用 Array.from() 递归拷贝更简短的数组深拷贝吗？如果可以的话，请写在下面的评论区。

4. 使用值填充数组

如果你需要使用相同的值来初始化数组，那么 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() 使用初始值正确填充数组。

4.1 使用对象填充数组

当初始化数组的每个项都应该是一个新对象时，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

由 Array.from 返回的 resultA 使用不同空对象实例进行初始化。之所以发生这种情况是因为每次调用时，mapFunction，即此处的 () => ({}) 都会返回一个新的对象。

然后，fill() 方法创建的 resultB 使用相同的空对象实例进行初始化。不会跳过空项。

4.2 使用 array.map 怎么样？

是不是可以使用 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()

【관련 강좌 추천: JavaScript 동영상 튜토리얼]

이 글에서는, Array.from()의 유용하고 흥미로운 사용 사례 5가지를 설명하겠습니다.

1. 소개🎜🎜🎜🎜시작하기 전에 Array.from()의 역할을 떠올려 보겠습니다. 구문: 🎜

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

• 🎜arrayLike: 필수 매개 변수, 배열로 변환하려는 의사 배열 개체 또는 반복 가능한 개체입니다. 🎜
• 🎜mapFunction: 선택적 매개변수인 mapFunction(item, index){...}는 컬렉션의 각 항목에 대해 호출되는 함수입니다. 반환된 값은 새 컬렉션에 삽입됩니다. 🎜
• 🎜thisArg: 선택적 매개변수, 콜백 함수 mapFunction을 실행할 때 이 개체입니다. 이 매개변수는 거의 사용되지 않습니다. 🎜

🎜예를 들어, 클래스 배열의 각 항목에 2를 곱해 보겠습니다: 🎜

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

🎜🎜🎜2. 클래스 배열을 배열로 변환 🎜🎜🎜🎜Array.from() 첫 번째 사용: 배열과 유사한 객체를 배열로 변환합니다. 🎜🎜일반적으로 배열과 유사한 객체에는 함수의 <code>arguments 키워드 또는 DOM 컬렉션이 포함됩니다. 🎜🎜다음 예에서는 함수의 인수를 합산해 보겠습니다. 🎜rrreee🎜Array.from(arguments) 배열과 유사한 객체 arguments를 배열로 변환합니다. 그런 다음 배열의 reduce 메서드를 사용하여 합산합니다. 🎜🎜또한 Array.from()의 첫 번째 매개변수는 반복 가능한 객체일 수 있습니다. 계속해서 몇 가지 예를 살펴보겠습니다. 🎜rrreee🎜🎜🎜3. JavaScript에서 배열을 복제하는 방법에는 여러 가지가 있습니다. 상상할 수 있듯이 Array.from()을 사용하면 배열의 얕은 복사본을 쉽게 수행할 수 있습니다. 🎜rrreee🎜Array.from(numbers)는 numbers 배열의 얕은 복사본을 생성하고 numbers ===numberCopy의 결과는 false, 즉 number와 numbersCopy에 동일한 항목이 있더라도 서로 다른 배열 객체임을 의미합니다. 🎜🎜Array.from()을 사용하여 모든 중첩 배열을 포함하여 배열의 복제본을 생성할 수 있나요? 도전해보세요! 🎜rrreee🎜recursiveClone()은 배열의 item이 배열인지 판단하여 배열의 전체 복사본을 만들 수 있습니다. 배열인 경우 recursiveClone() 을 사용하여 배열의 전체 복사본을 구현합니다. 🎜🎜 Array.from()을 사용하여 재귀적으로 복사하는 것보다 더 짧은 배열 전체 복사를 작성할 수 있나요? 가능하다면 아래 댓글란에 적어주세요. 🎜🎜🎜🎜4. 배열을 값으로 채웁니다. ​​🎜🎜🎜🎜같은 값으로 배열을 초기화해야 한다면 Array.from()을 선택하는 것이 좋습니다. 🎜🎜동일한 기본값으로 채워진 배열을 생성하는 함수를 정의해 보겠습니다. 🎜rrreee🎜result는 길이가 3인 새 배열이고 배열의 각 항목은 0입니다. 배열과 유사한 객체 { length }와 초기화된 값을 반환하는 mapFunction 함수를 전달하여 Array.from() 메서드를 호출합니다. 🎜🎜그러나 동일한 기능을 구현하는 대체 array.fill()이 있습니다. 🎜rrreee🎜fill()은 배열을 초기 값으로 올바르게 채웁니다.
🎜🎜🎜4.1 객체로 배열 채우기 🎜🎜🎜 초기화된 배열의 각 항목이 새 객체여야 하는 경우 Array.from()이 더 나은 솔루션입니다. 🎜rrreee🎜The Array.from에서 반환된 code>resultA는 다른 빈 개체 인스턴스로 초기화됩니다. 이는 mapFunction(여기서는 () => ({}))이 호출될 때마다 새 객체를 반환하기 때문에 발생합니다. 🎜🎜그런 다음 fill() 메서드로 생성된 resultB는 동일한 빈 개체 인스턴스로 초기화됩니다. 빈 항목은 건너뛰지 않습니다. 🎜🎜🎜4.2 array.map을 사용하는 것은 어떻습니까? 🎜🎜🎜이를 달성하기 위해 array.map() 메서드를 사용할 수 있나요? 시도해 보세요: 🎜rrreee🎜 map() 메서드가 비정상적인 것 같습니다. 생성된 배열이 예상한 [0, 0, 0]이 아니고 다음을 포함하는 배열입니다. 3 빈 항목의 배열입니다. 🎜🎜이는 Array(length)가 3개의 빈 항목이 있는 배열(희소 배열이라고도 함)을 생성하지만 map() 메서드가 빈 항목 항목을 건너뛰기 때문입니다. 🎜🎜🎜🎜5. 숫자 범위 생성🎜🎜🎜

你可以使用 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 函数 。这样你就可以生成值范围。

6.数组去重

由于 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() 将其转换为一个新的数组。

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

7.结论

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

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

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

英文原文地址：https://dmitripavlutin.com/javascript-array-from-applications/

本文来自 js教程 栏目，欢迎学习！

위 내용은 Array.from()의 매우 유용한 5가지 용도(자세한 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!