


Quelles sont les différences entre les méthodes JavaScript pour les tableaux ?
Nov 18, 2017 pm 05:39 PMEn JavaScript, il existe de nombreuses méthodes pour ajouter, supprimer et remplacer des éléments de tableau. De nombreuses méthodes peuvent réaliser la même fonction, mais elles sont très différentes. Aujourd'hui, nous allons les comparer. Quel est le secret de la méthode tableau ?
JavaScript fournit une variété de méthodes pour ajouter, supprimer et remplacer des éléments de tableau, mais certaines affecteront le tableau d'origine ; d'autres non et créeront un nouveau tableau.
Remarque : Distinguez les différences entre les deux méthodes suivantes :
array.splice() affecte le tableau d'origine
array.slice() n'affecte pas le tableau d'origine
I. Nouveau : affecter le tableau d'origine
L'utilisation de array.push() et array.ushift() pour ajouter de nouveaux éléments affectera le tableau d'origine.
let mutatingAdd = ['a', 'b', 'c', 'd', 'e']; mutatingAdd.push('f'); // ['a', 'b', 'c', 'd', 'e', 'f'] mutatingAdd.unshift('z'); // ['z', 'b', 'c', 'd', 'e' 'f']
II. Nouveau : n'affecte pas le tableau d'origine
Deux façons d'ajouter des éléments n'affecteront pas le tableau d'origine, la première est array.concat().
const arr1 = ['a', 'b', 'c', 'd', 'e']; const arr2 = arr1.concat('f'); // ['a', 'b', 'c', 'd', 'e', 'f'] (注:原文有误,我做了修改 “.” ---> “,”) console.log(arr1); // ['a', 'b', 'c', 'd', 'e']
La deuxième méthode consiste à utiliser l'opérateur de propagation de JavaScript. L'opérateur de propagation est à trois points (…)
const arr1 = ['a', 'b', 'c', 'd', 'e']; const arr2 = [...arr1, 'f']; // ['a', 'b', 'c', 'd', 'e', 'f'] const arr3 = ['z', ...arr1]; // ['z', 'a', 'b', 'c', 'd', 'e']
L'opérateur de propagation copiera le tableau d'origine, prendra tous les éléments de le tableau d'origine et les stocker dans le nouvel environnement.
III. Suppression : affectant le tableau d'origine
Lors de l'utilisation de array.pop() et array.shift() pour supprimer des éléments du tableau, le tableau d'origine est supprimé. sera affecté.
let mutatingRemove = ['a', 'b', 'c', 'd', 'e']; mutatingRemove.pop(); // ['a', 'b', 'c', 'd'] mutatingRemove.shift(); // ['b', 'c', 'd']
array.pop() et array.shift() renvoient l'élément supprimé, vous pouvez obtenir l'élément supprimé via une variable.
let mutatingRemove = ['a', 'b', 'c', 'd', 'e']; const returnedValue1 = mutatingRemove.pop(); console.log(mutatingRemove); // ['a', 'b', 'c', 'd'] console.log(returnedValue1); // 'e' const returnedValue2 = mutatingRemove.shift(); console.log(mutatingRemove); // ['b', 'c', 'd'] console.log(returnedValue2); // 'a'
array.splice() peut également supprimer des éléments d'un tableau.
let mutatingRemove = ['a', 'b', 'c', 'd', 'e']; mutatingRemove.splice(0, 2); // ['c', 'd', 'e']
Comme array.pop() et array.shift(), array.splice() renvoie également les éléments supprimés.
let mutatingRemove = ['a', 'b', 'c', 'd', 'e']; let returnedItems = mutatingRemove.splice(0, 2); console.log(mutatingRemove); // ['c', 'd', 'e'] console.log(returnedItems) // ['a', 'b']
IV. Suppression : n'affecte pas le tableau d'origine
JavaScript 的 array.filter() 方法基于原数组创建一个新数组,新数组仅包含匹配特定条件的元素。 const arr1 = ['a', 'b', 'c', 'd', 'e']; const arr2 = arr1.filter(a => a !== 'e'); // ['a', 'b', 'c', 'd'](注:原文有误,我做了修改) // 或者 const arr2 = arr1.filter(a => { return a !== 'e'; }); // ['a', 'b', 'c', 'd'](注:原文有误,我做了修改)
La condition du code ci-dessus est "non égale à 'e'", donc le nouveau tableau (arr2 ) ne contient pas de « e ».
Le caractère unique des fonctions fléchées :
Fonction flèche sur une seule ligne, le mot-clé 'retour' est livré par défaut et n'a pas besoin d'être écrit manuellement.
Cependant, les fonctions fléchées multilignes doivent renvoyer une valeur explicitement.
Une autre façon de procéder sans affecter le tableau d'origine est array.slice() (à ne pas confondre avec array.splice()).
const arr1 = ['a', 'b', 'c', 'd', 'e']; const arr2 = arr1.slice(1, 5) // ['b', 'c', 'd', 'e'] const arr3 = arr1.slice(2) // ['c', 'd', 'e']
Remplacement V. : affecte le tableau d'origine
Si vous savez quel élément remplacer, vous pouvez utiliser array.splice() .
let mutatingReplace = ['a', 'b', 'c', 'd', 'e']; mutatingReplace.splice(2, 1, 30); // ['a', 'b', 30, 'd', 'e'] // 或者 mutatingReplace.splice(2, 1, 30, 31); // ['a', 'b', 30, 31, 'd', 'e']
VI. Remplacement : n'affecte pas le tableau d'origine
Vous pouvez utiliser array.map() pour créer un nouveau tableau, et vous pouvez vérifier chaque élément et les remplacer en fonction conditions spécifiques.
const arr1 = ['a', 'b', 'c', 'd', 'e'] const arr2 = arr1.map(item => { if(item === 'c') { item = 'CAT'; } return item; }); // ['a', 'b', 'CAT', 'd', 'e']
Utilisez array.map() pour transformer des données
array.map() est une méthode puissante qui peut être utilisée pour transformer des données sans polluer la source de données d'origine.
const origArr = ['a', 'b', 'c', 'd', 'e']; const transformedArr = origArr.map(n => n + 'Hi!'); // ['aHi!', 'bHi!', 'cHi!', 'dHi!', 'eHi!'] console.log(origArr); // ['a', 'b', 'c', 'd', 'e']; // 原数组毫发无损
Il existe de nombreuses comparaisons sur les méthodes de tableau. J'espère que cela pourra aider tout le monde à comprendre et à utiliser les tableaux en JS.
Lecture connexe :
À propos du résumé de la méthode de tableau de tableau JS
Résumé de la méthode de déduplication de tableau JS
Méthode d'analyse pour transmettre les paramètres dans le tableau angulairejs
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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS

WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel

Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript

Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières

Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel

JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel
