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

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']

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!