ES6 en action: nouveau tableau. * Et array.prototype. * Méthodes

Cet article explore plusieurs nouvelles méthodes ES6 améliorant la manipulation du tableau, catégorisé comme Array.* (méthodes de classe) et Array.prototype.* (méthodes d'instance). Nous examinerons leur utilisation avec des exemples et discuterons des polyfills pour une compatibilité plus large. es6-shim par Paul Miller propose une solution complète pour polyfilant ces méthodes.

Concepts clés:

• es6 introduit de nombreuses méthodes de tableau, y compris Array.from(), Array.prototype.find(), Array.prototype.findIndex(), Array.prototype.keys(), Array.prototype.values(), et Array.prototype.fill().
• Array.from() Construit un nouveau tableau à partir d'objets de type tableau ou itérables, résolvant efficacement les défis courants avec des structures de type tableau. Il est largement pris en charge, sauf dans Internet Explorer.
• Array.prototype.find() et Array.prototype.findIndex() Localisez le premier élément de tableau satisfaisant une fonction de test donnée. find() renvoie l'élément lui-même; findIndex() renvoie son index. Les deux ont un bon support, à l'exclusion d'Internet Explorer.
• Array.prototype.keys() et Array.prototype.values() générer des itérateurs de tableau fournissant respectivement les clés et les valeurs du tableau. Array.prototype.fill() remplit un tableau avec une valeur spécifiée dans une plage donnée. Ces méthodes ont un large soutien, à l'exclusion de l'explorateur Internet.

Array.from()

Array.from() Crée un tableau à partir de sources de type tableau ou itérables. Cela traite de la solution de contournement traditionnelle: [].slice.call(arrayLike).

Syntaxe:

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

Paramètres:

• arrayLike: objet en forme de tableau ou itérable.
• mapFn: fonction appliquée à chaque élément.
• thisArg: contexte (this) pour mapFn.

Exemple: doubler les arguments de la fonction:

function double(...args) {
  return Array.from(args, elem => elem * 2);
}

console.log(double(1, 2, 3, 4)); // Output: [2, 4, 6, 8]

Prise en charge: largement pris en charge sauf Internet Explorer. Les polyfills sont disponibles sur MDN et à partir de Mathias Bynens.

Array.prototype.find()

Array.prototype.find() Renvoie le premier élément satisfaisant une fonction de test fournie.

Syntaxe:

Array.prototype.find(callback[, thisArg])

Paramètres de rappel:

• element: élément actuel.
• index: Index de l'élément actuel.
• array: le tableau.

Exemple: trouver le premier élément supérieur à 2:

const arr = [1, 2, 3, 4];
const result = arr.find(elem => elem > 2);
console.log(result); // Output: 3

Prise en charge: largement pris en charge sauf Internet Explorer. Un polyfill est disponible sur mdn.

Array.prototype.findIndex()

similaire à find(), mais renvoie l'index du premier élément correspondant, ou -1 si aucun n'est trouvé.

Exemple: trouver l'index du premier élément supérieur à 2:

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

Prise en charge: largement pris en charge sauf Internet Explorer. Un polyfill est disponible sur mdn.

Array.prototype.keys() et Array.prototype.values()

Ces méthodes renvoient respectivement les itérateurs du tableau pour les clés et les valeurs.

Exemples:

function double(...args) {
  return Array.from(args, elem => elem * 2);
}

console.log(double(1, 2, 3, 4)); // Output: [2, 4, 6, 8]

Assistance: keys() a un bon support à l'exception d'Internet Explorer. values() peut nécessiter une transpilation (par exemple, Babel).

Array.prototype.fill()

Array.prototype.fill() remplit un tableau avec une valeur spécifiée.

Syntaxe:

Array.prototype.find(callback[, thisArg])

Exemple:

const arr = [1, 2, 3, 4];
const result = arr.find(elem => elem > 2);
console.log(result); // Output: 3

Prise en charge: largement pris en charge sauf Internet Explorer. Les polyfills sont disponibles sur MDN et à partir d'Oddy Osmani.

Conclusion:

Les méthodes de tableau de

ES6 améliorent considérablement les capacités de manipulation du tableau de JavaScript. Alors que la plupart bénéficient d'un support généralisé, considérez les polyfills pour les navigateurs plus âgés.

Questions fréquemment posées (reformatées pour la clarté et la concision):

La section FAQ fournie est déjà assez complète. Pour l'améliorer, je dirais:

1. Consolidation: Combinez des questions similaires (par exemple, celles de la compatibilité des navigateurs).
2. Concision: Raccourcir les réponses tout en conservant des informations essentielles.
3. Exemples de code: Inclure des extraits de code illustratif plus concis pour chaque méthode.

Voici un exemple de la façon de restructurer quelques questions et réponses:

Q: Quelles sont les principales méthodes de tableau ES6 et comment fonctionnent-ils?

a: es6 présente plusieurs méthodes de tableau puissantes:

• find(): Renvoie le premier élément satisfaisant à une fonction de test fournie. arr.find(x => x > 5)
• findIndex(): Renvoie l'index du premier élément correspondant. arr.findIndex(x => x > 5)
• fill(): remplace les éléments du tableau par une valeur statique dans une plage spécifiée. arr.fill(0, 2, 4)
• copyWithin(): Copie une séquence d'éléments de tableau vers une autre position dans le même tableau. arr.copyWithin(0, 3, 4)
• keys(): Renvoie un itérateur pour les clés du tableau.
• values(): Renvoie un itérateur pour les valeurs du tableau.
• from(): Crée un nouveau tableau à partir d'un objet en forme de tableau ou itérable.

Q: Compatibilité du navigateur et polyfills?

a: La plupart des navigateurs modernes prennent en charge ces méthodes. Cependant, pour les navigateurs plus âgés (en particulier Internet Explorer), vous aurez besoin de polyfills (par exemple, es6-shim). MDN fournit des polyfills pour plusieurs de ces méthodes.

En restructurant la FAQ de cette manière, vous pouvez le rendre plus efficace et plus facile à comprendre. N'oubliez pas d'appliquer des principes similaires aux questions et réponses restantes.

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!