Utilisation de Array.from dans JavaScript ES6

ES6 ajoute la fonction from à Array pour convertir d'autres objets en tableaux.

Bien sûr, d'autres objets ont également des exigences, et tous ne peuvent pas être convertis en tableaux.

1. Déployez des objets avec l'interface Iterator, tels que : Set, Map, Array.

2. Objet de type tableau. Qu'est-ce qu'un objet de type tableau ? Cela signifie qu'un objet doit avoir un attribut de longueur, le résultat sera un tableau vide.

Convertir la carte

Convertissez les paires clé-valeur de l'objet Map en un tableau unidimensionnel.

En fait, la séquence des éléments du tableau convertis est key1, value1, key2, value2, key3, value3....

const map1 = new Map();
map1.set('k1', 1);
map1.set('k2', 2);
map1.set('k3', 3);
console.log('%s', Array.from(map1))

Résultat :

k1,1,k2,2,k3,3

Convertir un ensemble

Convertir les éléments de l'objet Set en un tableau.

const set1 = new Set();
set1.add(1).add(2).add(3)
console.log('%s', Array.from(set1))

Résultat

1,2,3

Convertir la chaîne

Vous pouvez désassembler la chaîne ascii en une seule. Les données peuvent également décomposer avec précision les chaînes Unicode en tableaux.

console.log('%s', Array.from('hello world'))
console.log('%s', Array.from('\u767d\u8272\u7684\u6d77'))

Résultat :

h,e,l,l,o, ,w,o,r,l,d
白,色,的,海

Objet de type tableau

Un objet de type tableau doit avoir une longueur , Leurs noms d'attributs d'élément doivent être des valeurs numériques ou des caractères pouvant être convertis en valeurs numériques.

Remarque : le nom de l'attribut représente le numéro d'index du tableau. S'il n'y a pas un tel numéro d'index, l'élément correspondant dans le tableau transféré sera vide.

console.log('%s', Array.from({  0: '0',  1: '1',  3: '3',
  length:4}))

Résultat :

0,1,,3

Si l'objet n'a pas l'attribut length, alors il sera converti en un tableau vide.

console.log('%s', Array.from({  0: 0,  1: 1}))

Le résultat est un tableau vide.

Lorsque le nom d'attribut de l'objet ne peut pas être converti en numéro d'index.

console.log('%s', Array.from({
  a: '1',
  b: '2',
  length:2}))

Le résultat est également un tableau vide

Array.from peut accepter trois paramètres

Regardons la définition :

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

arrayLike : l'objet converti.

mapFn : fonction de carte.

thisArg : l'objet pointé par this dans la fonction map.

Le deuxième paramètre, la fonction map

est utilisé pour traiter chaque élément dans la conversion, et le résultat traité est utilisé comme valeurs d'élément ​​du tableau de résultats.

console.log('%s', Array.from([1, 2, 3, 4, 5], (n) => n + 1))

Résultat :

La fonction map ci-dessus ajoute en fait 1 à chaque valeur du tableau.

2,3,4,5,6

Le troisième paramètre, l'objet pointé par celui-ci dans la fonction map

Ce paramètre est très utile, on peut Le les données traitées et les objets de traitement sont séparés et diverses méthodes de traitement des données sont encapsulées dans différents objets. Les méthodes de traitement utilisent le même nom.

Lors de l'appel à Array.from pour convertir l'objet de données, différents objets de traitement peuvent être injectés en fonction de la situation réelle pour obtenir des résultats différents, ce qui convient au découplage.

Cette approche est l'application d'un modèle de conception de modèle, qui est quelque peu similaire à l'injection de dépendances.

let diObj = n + 2'%s'1, 2, 3, 4, 5

Résultat :

3,4,5,6,7

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!