Maison > Article > interface Web > 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
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()
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()
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
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]; // => trueLe
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é. () => ({})
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
? 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]
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!