Maison interface Web Tutoriel H5 Quelles sont les différences entre les méthodes JavaScript pour les tableaux ?

Quelles sont les différences entre les méthodes JavaScript pour les tableaux ?

Nov 18, 2017 pm 05:39 PM
javascript js Lequel

En 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']
Copier après la connexion

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']
Copier après la connexion

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']
Copier après la connexion

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']
Copier après la connexion

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'
Copier après la connexion

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']
Copier après la connexion

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']
Copier après la connexion

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'](注:原文有误,我做了修改)
Copier après la connexion

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']
Copier après la connexion

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']
Copier après la connexion

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']
Copier après la connexion

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']; // 原数组毫发无损
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Musée à deux points: toutes les expositions et où les trouver
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Musée à deux points: toutes les expositions et où les trouver
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 pm 02:54 PM

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 Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Apr 03, 2024 am 11:55 AM

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 Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS Dec 17, 2023 pm 06:55 PM

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 WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel Dec 17, 2023 pm 05:30 PM

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 Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 am 09:39 AM

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 Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Dec 18, 2023 pm 03:39 PM

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 Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Dec 17, 2023 pm 12:09 PM

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 JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel Dec 17, 2023 pm 05:13 PM

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

See all articles