Cinq utilisations super utiles d'Array.from() (explication détaillée)

Tout langage de programmation possède des fonctionnalités allant au-delà de l'usage de base, et il bénéficie d'une conception réussie et de tentatives pour résoudre un large éventail de problèmes.

Il existe une telle fonction en JavaScript : Array.from : permet des conversions utiles sur les collections JavaScript (telles que des tableaux, des objets de type tableau ou des objets itérables tels que des chaînes, des cartes, des ensembles, etc.).

【Recommandation de cours connexe : Tutoriel vidéo JavaScript】

Dans cet article, je décrirai 5 cas d'utilisation Array.from() utiles et intéressants.

1. Introduction

Avant de commencer, rappelons le rôle de Array.from(). Syntaxe :

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

• arrayLike : paramètre obligatoire, l'objet pseudo-tableau ou l'objet itérable que vous souhaitez convertir en tableau.

• mapFunction : Paramètre facultatif, mapFunction(item, index){...} est la fonction appelée sur chaque élément de la collection. La valeur renvoyée sera insérée dans la nouvelle collection.

• thisArg : Paramètre facultatif, cet objet lors de l'exécution de la fonction de rappel mapFunction. Ce paramètre est rarement utilisé.

Par exemple, multiplions chaque élément du tableau de classe par 2 :

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

Convertissez le tableau de classe en tableau

Array.from() Première utilisation : Convertissez des objets de type tableau en tableaux.

Habituellement, vous rencontrerez des objets de type tableau : le mot-clé arguments dans une fonction, ou une collection DOM.

Dans l'exemple suivant, additionnons les arguments d'une fonction :

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

Array.from(arguments) Convertissons l'objet de type tableau arguments en un tableau puis utilisons la méthode reduce du tableau addition.

De plus, le premier paramètre de Array.from() peut être n'importe quel objet itérable. Continuons à regarder quelques exemples :

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

Il existe de nombreuses façons de cloner des tableaux en JavaScript. Comme vous pouvez l'imaginer, Array.from() facilite la réalisation de copies superficielles de tableaux.

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

numbers === numbersCopy; // => false

crée une copie superficielle du tableau Array.from(numbers), et le résultat de numbers est numbers === numbersCopy, ce qui signifie que même si false et numbers ont les mêmes éléments, ils sont objet de tableau différent. numbersCopy

Est-il possible d'utiliser

pour créer un clone d'un tableau, y compris tous ceux imbriqués ? Mettez-vous au défi ! 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

peut faire une copie complète d'un tableau en jugeant si le recursiveClone() du tableau est un tableau. S'il s'agit d'un tableau, continuez à appeler item pour obtenir une copie complète de. le tableau. recursiveClone()

Pouvez-vous écrire une copie profonde plus courte d'un tableau qu'en utilisant une

copie récursive ? Si vous le pouvez, veuillez écrire dans la section commentaires ci-dessous. Array.from()

4. Remplissez le tableau avec des valeurs

Si vous devez initialiser le tableau avec les mêmes valeurs, alors

le ferait être un bon choix. Array.from()

Définissons une fonction qui crée un tableau rempli avec les mêmes valeurs par défaut :

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

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

est un nouveau tableau, sa longueur est de 3 et chaque élément du tableau est de 0. Appelez la méthode result, en passant un objet de type tableau Array.from() et une fonction { length } qui renvoie la valeur initialisée. mapFunction

Cependant, il existe une alternative

qui permet d'obtenir la même fonctionnalité. array.fill()

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

fillArray2(0, 3); // => [0, 0, 0]

remplit correctement le tableau avec les valeurs initiales. fill()

4.1 Remplir le tableau avec des objets

Lors de l'initialisation de chaque élément du tableau doit être un nouvel objet,

est une meilleure solution Solution : 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

Le

renvoyé par Array.from est initialisé avec une autre instance d'objet vide. Cela se produit parce que resultA, c'est-à-dire mapFunction ici, renvoie un nouvel objet à chaque fois qu'il est appelé. () => ({})

Ensuite, le

créé par la méthode fill() est initialisé avec la même instance d'objet vide. Les éléments vides ne seront pas ignorés. resultB

4.2 Et si vous utilisiez  ? array.map

peut-il être implémenté en utilisant la méthode

 ? Essayons : array.map()

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

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

La méthode semble anormale. Le tableau créé n'est pas le map() attendu, mais un tableau avec 3 éléments vides. [0, 0, 0]

En effet,

crée un tableau avec 3 éléments vides (également appelé tableau clairsemé), mais la méthode Array(length) ignore les éléments vides. map()

5. Générer une plage de numéros

你可以使用 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教程 栏目，欢迎学习！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!