Quelles sont les méthodes courantes pour manipuler les éléments d’un tableau ?

1. Copiez et remplissez

② Remplissez le tableau : fill()

Insérez tout ou partie des mêmes valeurs dans un tableau existant. La syntaxe de cette méthode est la suivante :

array.fill (valeur, début, fin)

valeur : obligatoire. valeur remplie ;

début : facultatif. Position de début de remplissage (0 par défaut) ;

fin : facultatif. Arrêter de remplir la position (la valeur par défaut est array.length pour remplir jusqu'à la fin du tableau )

Remplissez le tableau avec a de la deuxième à la cinquième position :

      let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      arr.fill("a", 2, 5);
      console.log(arr); // [0, 1, 'a','a', 'a', 5, 6, 7, 8, 9];

      const arr = [0, 0, 0, 0, 0];

      // 用5填充整个数组
      arr.fill(5);
      console.log(arr); // [5, 5, 5, 5, 5]
      arr.fill(0); // 重置

      // 用5填充索引大于等于3的元素
      arr.fill(5, 3);
      console.log(arr); // [0, 0, 0, 5, 5]
      arr.fill(0); // 重置

      // 用5填充索引大于等于1且小于等于3的元素
      arr.fill(5, 1, 4);
      console.log(arr); // [0, 5, 5, 5, 0]
      arr.fill(0); // 重置

      // 用5填充索引大于等于-1的元素
      arr.fill(5, -1);
      console.log(arr); // [0, 0, 0, 0, 5]
      arr.fill(0); // 重置

② Copie par lots : copyWithin()

Copie superficiellement une partie du contenu du tableau en fonction de la plage spécifiée, puis l'insère à la position de départ de l'index spécifié . Les index de début et de fin sont calculés de la même manière que la méthode fill. La syntaxe de cette méthode est la suivante :

array.copyWithin (cible, début, fin)

Ses paramètres sont les suivants :

cible : obligatoire. Copier vers l'emplacement d'index cible spécifié ;

début : facultatif. La position de départ de la copie de l'élément ;

fin : facultatif. La position de l'index pour arrêter la copie (par défaut, array .length). S'il s'agit d'une valeur négative, elle représente la valeur réciproque.

Copiez les éléments commençant à la position de départ et les éléments entre la position finale vers la première position du tableau.

      const array1 = [1, 2, 3, 4, 5];
      console.log(array1.copyWithin(0, 3)); // [4, 5, 3, 4, 5]

      const array2 = [1, 2, 3, 4];
      console.log(array2.copyWithin(0, 3)); //  [4, 2, 3, 4]

      const array3 = [1, 2, 3, 4, 5, 6, 7, 8];
      console.log(array3.copyWithin(0, 3)); //  [4, 5, 6, 7, 8, 6, 7, 8]

      const array4 = [1, 2, 3, 4, 5, 6, 7, 8];
      console.log(array4.copyWithin(0, 3, 5)); //  [4, 5, 3, 4, 5, 6, 7, 8]

Les signatures de ces deux méthodes sont similaires : elles doivent toutes deux spécifier une plage sur l'instance de tableau existante, incluant l'index de début et n'incluant pas l'index de fin.

2. Méthode de conversion

Il existe quatre méthodes principales pour convertir des tableaux : toLocaleString(), toString(), valueOf(), join()

Il convient de noter que si un élément du tableau est nul ou indéfini, le résultat renvoyé sera représenté par une chaîne vide après l'appel des trois premières méthodes.

① versChaîne()

Ce qui est renvoyé est une chaîne séparée par des virgules concaténée par la chaîne équivalente de chaque valeur du tableau. C'est-à-dire que chaque valeur du tableau appellera la méthode toString() pour obtenir la chaîne finale.

let colors = ["red", "blue", "green"];  
console.log(colors.toString())  // red,blue,green

let array = [{ name: "zz" }, 123, "abc", new Date(), [1, 2]];
console.log(array.toString()); // [object Object],123,abc,Fri Nov 10 2023 22:18:25 GMT+0800 (中国标准时间),1,2

② valeurDe()

Ce qui est renvoyé est le tableau lui-même

      let colors = ["red", "blue", "green"];
      console.log(colors.valueOf()); // ["red", "blue", "green"]

③ versLocaleString()

La méthode toLocaleString() peut renvoyer le même résultat que la méthode toString(), mais pas nécessairement.

Lorsque vous appelez la méthode toLocaleString(), vous obtiendrez une chaîne de valeurs de tableau séparées par des virgules. La différence avec la méthode toString() est que pour obtenir la chaîne finale, la méthode toLocaleString() de chaque valeur sera appelée au lieu de la méthode toString.()

      let array = [{ name: "zz" }, 123, "abc", new Date()];
      let str = array.toLocaleString();
      console.log(str); // [object Object],123,abc,2016/1/5 下午1:06:23

④ rejoindre()

Mettez tous les éléments du tableau dans une chaîne. Les éléments sont séparés par le délimiteur spécifié, qui est par défaut des virgules.

Cette méthode renvoie une chaîne. La chaîne est générée en convertissant chaque élément du tableau en chaîne, puis en concaténant les chaînes, en insérant la chaîne de séparation entre les deux éléments.

let array = ["one", "two", "three","four", "five"];
console.log(array.join());      // one,two,three,four,five
console.log(array.join("-"));   // one-two-three-four-five

3. Méthode de pile

La pile est une structure dernier entré, premier sorti , c'est-à-dire que les éléments ajoutés les plus récemment sont supprimés en premier.

L'insertion (appelée push) et la suppression (appelée pop) d'éléments de données ne se produisent qu'en haut de la pile.

① pousser()

Reçoit un nombre quelconque d'arguments, les ajoute à la fin du tableau et renvoie la nouvelle longueur du tableau. Cette méthode modifiera le tableau d'origine. Sa forme grammaticale est la suivante :

arrayObject.push (newelement1, newelement2, ...., newelementX)

      let array = ["1", "2",  "3"];
      array.push("4", "5", "6")
      let i = array.push("666");
      console.log(array); // ["1", "2", "3", "4"]
      console.log(i); // 7

②pop()

Supprime et renvoie le dernier élément d'un tableau. Il n'a aucun paramètre. Cette méthode modifiera le tableau d'origine.

      let array = ["1", "2", "3"];
      let i = array.pop();
      console.log(array); // ["1", "2"]
      console.log(i); // 3

4. Méthode de file d'attente

La file d'attente est une structure de données premier entré, premier sorti . La file d'attente ajoute des éléments à la fin de la file d'attente et supprime les éléments à l'extrémité opposée.

Méthodes pour supprimer et ajouter des éléments depuis le début d'un tableau : shift() et unshift()

① décalage()

Supprime le premier élément d'un tableau et renvoie l'élément supprimé. Ensuite, la longueur du tableau est réduite de un et cette méthode modifiera le tableau d'origine.

Remarque : Si le tableau est vide, la méthode shift() ne fera rien et renverra une valeur non définie.

      let array = ["1", "2", "3"];
      let i = array.shift();
      console.log(array); // ["2", "3"]
      console.log(i); // 1

② décaler()

Ajoute un ou plusieurs éléments au début du tableau et renvoie la nouvelle longueur. Cette méthode modifiera le tableau d'origine.

arrayObject.unshift(newelement1,newelement2,....,newelementX)

      let array = ["1", "2", "3"];
      let i = array.unshift('111', '222', '333');
      console.log(array); // ["111", "222", "333", "1", "2", "3"]
      console.log(i); // 6

5. Méthode de tri

Les tableaux ont deux méthodes pour réorganiser les tableaux : sort() et reverse()

① trier()

Méthode de tri des tableaux sort()_Little Strawberry Jumping Blog-CSDN Blog

Cette méthode triera le tableau d'origine et modifiera le tableau d'origine.

arrayObject.sort (tri par)

Le paramètre sortby est un paramètre facultatif et est utilisé pour spécifier l'ordre de tri. Il s'agit d'une fonction de comparaison utilisée pour déterminer quelle valeur doit être classée en premier. Par défaut, les éléments du tableau sont réorganisés par ordre croissant .

Pour cela, la méthode sort() appellera la fonction de conversion String sur chaque élément, puis comparera les chaînes pour déterminer l'ordre. Même si les éléments du tableau sont tous des valeurs numériques, les éléments du tableau seront d'abord convertis en chaînes. pour comparaison et tri.

Cela entraîne un tri inexact.

let array = [5, 4, 3, 2, 1];
let array2 = array.sort();
console.log(array2)  // [1, 2, 3, 4, 5]

let array = [0, 1, 5, 10, 15];
let array2 = array.sort();
console.log(array2)  //  [0, 1, 10, 15, 5]

Pour les paramètres de la méthode sort(), c'est une fonction de comparaison qui reçoit deux paramètres.

Si le premier paramètre doit précéder le deuxième paramètre, renvoie -1 ;

Si les deux paramètres sont égaux, renvoie 0 ;

Si le premier paramètre doit venir après le deuxième paramètre, renvoie 1.

      function compare(value1, value2) {
        if (value1 < value2) {
          return -1;
        } else if (value1 > value2) {
          return 1;
        } else {
          return 0;
        }
      }

      let array = [1, 5, 0, 15, 10];
      let array2 = array.sort(compare);
      console.log(array2); // [0, 1, 5, 10, 15]

Nous utilisons des fonctions fléchées pour définir :

let array = [0, 1, 5, 10, 15];

let array2 = array.sort((a, b) => a - b);  // 正序排序 升序
console.log(array2)  // [0, 1, 5, 10, 15]

let array3 = array.sort((a, b) => b - a);  // 倒序排序 降序
console.log(array3)  // [15, 10, 5, 1, 0]

② inverse()

Inversez l'ordre des éléments dans un tableau. Cette méthode modifie le tableau d'origine sans créer de nouveau tableau.

      let array = [1, 2, 3, 4, 5];
      let array2 = array.reverse();
      console.log(array); // [5, 4, 3, 2, 1]
      console.log(array2 === array); // true

6. Méthode de fonctionnement

①concat()

Concaténez deux ou plusieurs tableaux. Cette méthode ne modifie pas le tableau existant, mais renvoie simplement une copie du tableau concaténé.

Cette méthode peut également être utilisée pour l'aplatissement des tableaux

arrayObject.concat(arrayX,arrayX,......,arrayX)

Le paramètre arrayX est obligatoire. Ce paramètre peut être une valeur spécifique ou un objet tableau. Il peut s'agir de n'importe quel nombre.

      let array = [1, 2, 3];
      let array2 = array.concat(4, [5, 6], [7, 8, 9]);
      console.log(array2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
      console.log(array); // [1, 2, 3], 可见原数组并未被修改

② tranche()

Renvoie les éléments sélectionnés à partir d'un tableau existant. Renvoie un nouveau tableau contenant les éléments du tableau du début à la fin (exclusif). La méthode ne modifie pas le tableau, mais renvoie un sous-tableau.

arrayObject.slice (début, fin)

Ses paramètres sont les suivants :

début : obligatoire. Spécifie où commencer la sélection. S'il est négatif, il spécifie la position à partir de la fin du tableau. Autrement dit, -1 fait référence au dernier élément, -2 fait référence à l'avant-dernier élément, et ainsi de suite ;

fin : facultatif. Spécifie où se termine la sélection. Ce paramètre est l'index du tableau à la fin du fragment de tableau. Si ce paramètre n'est pas spécifié, le tableau fractionné contient tous les éléments du début à la fin du tableau. Si ce paramètre est négatif, il précise les éléments en commençant par la fin du tableau.

      let array = ["one", "two", "three", "four", "five"];
      console.log(array.slice(0)); // ["one", "two", "three","four", "five"]
      console.log(array.slice(2, 3)); // ["three"]

③ épissure()

L'une des méthodes les plus puissantes sur les tableaux. Il ajoute/supprime des éléments du tableau et renvoie l'élément supprimé. Cette méthode mute le tableau d'origine. Sa syntaxe d'utilisation est la suivante :

arrayObject.splice (index, combien, item1,....., itemX)

Ses paramètres sont les suivants :

indice : obligatoire. Un nombre entier spécifiant la position à laquelle ajouter/supprimer un élément. Utilisez un nombre négatif pour spécifier la position à partir de la fin du tableau.

combien : obligatoire. Le nombre d'éléments à supprimer. S'il est défini sur 0, les éléments ne seront pas supprimés.

item1, ..., itemX : facultatif. Nouveaux éléments ajoutés au tableau.

Comme le montrent les paramètres ci-dessus, l’épissure a principalement trois formes d’utilisation :

Supprimer : Deux paramètres doivent être passés, à savoir la position du premier élément à supprimer et le nombre d'éléments à supprimer ;

Insertion : Vous devez passer au moins trois paramètres, à savoir la position de départ, 0 (le nombre d'éléments à supprimer) et l'élément à insérer.

Remplacer : supprime un élément et insère un nouvel élément à la position spécifiée. Vous devez également transmettre au moins trois paramètres, à savoir la position de départ, le nombre d'éléments à supprimer et les éléments à insérer. Le nombre d'éléments à insérer est arbitraire et n'est pas nécessairement égal au nombre d'éléments à supprimer.

      let array1 = ["one", "two", "three", "four", "five"];
      console.log(array1.splice(1, 2)); // 删除：["two", "three"]
      console.log(array1) // ["one", "four", "five"];

      let array2 = ["one", "two", "three", "four", "five"];
      console.log(array2.splice(2, 0, 996)); // 插入：[]
      console.log(array2) // ["one", "two", 996, "three", "four", "five"];

      let array3 = ["one", "two", "three", "four", "five"];
      console.log(array3.splice(2, 1, 996)); // 替换：["three"]
      console.log(array3) //  ["one", "two", 996, "four", "five"];

7. Méthode de fusion

① réduire()

Méthodes couramment utilisées pour les tableaux - méthode reduction() [somme de tableau, multiplication, comptage du nombre d'occurrences de chaque élément du tableau, déduplication de tableau, conversion de tableaux bidimensionnels en tableaux unidimensionnels, conversion de tableaux multidimensionnels en tableaux unidimensionnels , objets Somme des attributs]_reduce sum-CSDN Blog

Exécutez une fonction de réduction (exécutée par ordre croissant) sur chaque élément du tableau, résumant ses résultats en une seule valeur de retour.

Exécutez la fonction de rappel dans l'ordre pour chaque élément du tableau, en excluant les éléments du tableau qui sont supprimés ou n'ont jamais reçu de valeur.

arr.reduce(rappel, [valeurinitiale])

(1) callback(fonction qui exécute chaque valeur du tableau, contient quatre paramètres)

previousValue (la valeur renvoyée par le dernier appel de rappel ou la valeur initiale fournie)

currentValue (l'élément actuellement traité dans le tableau)

index (l'index de l'élément actuel dans le tableau)

array (le tableau sur lequel réduire est appelé)

(2) initialValue(Comme premier paramètre du premier rappel.)

let arr = [1, 2, 3, 4]
let sum = arr.reduce((prev, cur, index, arr) => {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

Le résultat est le suivant :

1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

Si aucune valeur initiale n'est fournie, réduire commencera à exécuter la méthode de rappel à partir de l'index 1, en ignorant le premier index. Si initialValue est fourni, commence à l’index 0.

let arr = [1, 2, 3, 4]
let sum = arr.reduce((prev, cur, index, arr) => {
    console.log(prev, cur, index);
    return prev + cur;
}, 5)
console.log(arr, sum);

Le résultat est le suivant :

5 1 0
6 2 1
8 3 2
11 4 3
[1, 2, 3, 4] 15

② réduireRight()

Cette méthode est presque la même que l' reduce() utilisation ci-dessus, sauf qu'elle recherche le tableau dans l'ordre inverse. Les méthodes reduce()sont exécutées en séquence.

      let arr = [1, 2, 3, 4];
      let sum = arr.reduceRight((prev, cur, index, arr) => {
        console.log(prev, cur, index);
        return prev + cur;
      }, 5);
      console.log(arr, sum);

Le résultat est le suivant :

5 4 3
9 3 2
12 2 1
14 1 0
[1, 2, 3, 4] 15

8. Méthodes de recherche et de localisation

ECMAScript propose deux types de méthodes pour rechercher des tableaux : la recherche par égalité stricte et la recherche par fonctions d'assertion.

① Strictement égal indexOf(), lastIndexOf(), include()

ECMAScript transmet trois méthodes de recherche strictement égales : indexOf(), lastIndexOf() et include() .

Ces méthodes acceptent toutes deux paramètres : l'élément à trouver et la position de recherche réelle facultative .

lastIndexOf() : recherche en avant à partir de l'élément de fin du tableau , tandis que les deux autres méthodes recherchent en arrière à partir de l'élément de début du tableau.

indexOf() et lastIndexOf() : renvoient la valeur d'index de l'élément dans le tableau, s'il n'est pas trouvé, renvoient -1

include() : renvoie une valeur booléenne indiquant si au moins un élément correspondant à l'élément spécifié est trouvé.

Lors de la comparaison du premier argument de chaque élément du tableau, une comparaison congruente (===) est utilisée, ce qui signifie que les deux éléments doivent être strictement égaux.

let arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(2))      // 1
console.log(arr.lastIndexOf(3))  // 2
console.log(arr.includes(4))     // true

② Fonctions d'assertion find(), findIndex()

ECMAScript permet également de rechercher des tableaux en fonction de fonctions d'assertion définies. Cette fonction est appelée pour chaque index. La valeur de retour de la fonction d'assertion détermine si l'élément à l'index correspondant est considéré comme une correspondance.

Il existe deux manières d'utiliser les fonctions d'assertion, à savoir les méthodes find() et findIndex().

Ces deux méthodes ne seront pas exécutées pour les tableaux vides . Et la valeur d'origine du tableau n'est pas modifiée.

Ils ont tous trois paramètres : élément, index et objet tableau auquel appartient l'élément. où element est l'élément actuellement recherché dans le tableau, index est l'index de l'élément actuel et array est le tableau actuellement recherché.

find(): Renvoie le premier élément correspondant .S'il n'y a aucun élément qui remplit les conditions, undefined est renvoyé ;

findIndex() : Renvoie l'index du premier élément correspondant . S'il n'y a aucun élément qui remplit les conditions, il renvoie -1 .

      let arr = [1, 2, 3, 4, 5];
      arr.find((item) => item > 2); // 结果： 3
      arr.findIndex((item) => item > 2); // 结果： 2

9. Méthodes itératrices clés(), valeurs(), entrées()

Dans ES6, le prototype Array expose trois méthodes pour récupérer le contenu d'un tableau : clés(), valeurs() et entrées().

keys() : renvoie un itérateur d' index de tableau

valeurs() : renvoie un itérateur d' éléments de tableau

entrées() : renvoie un itérateur de paires de valeurs d'index

Étant donné que ces méthodes renvoient des itérateurs, leur contenu peut être converti directement en instances de tableau via Array.from :

let array = ["one", "two", "three", "four", "five"];
console.log(Array.from(array.keys())); // [0, 1, 2, 3, 4]
console.log(Array.from(array.values())); // ["one", "two", "three", "four", "five"]
console.log(Array.from(array.entries())); // [[0, "one"], [1, "two"], [2, "three"], [3, "four"], [4, "five"]]

10. Méthodes d'itération each(), filter(), forEach(), map(), some()

ECMAScript définit 5 méthodes d'itération pour les tableaux, à savoir each(), filter(), forEach(), map() et some()

Aucune de ces méthodes ne modifiera le tableau d'origine . Ces cinq méthodes reçoivent toutes deux paramètres : une fonction à exécuter avec chaque élément comme paramètre et un objet scope facultatif comme contexte dans lequel la fonction est exécutée (affectant la valeur this dans la fonction).

La fonction passée à chaque méthode reçoit trois paramètres : l'élément courant, la valeur d'index de l'élément courant et l'objet numérique auquel appartient l'élément courant.

① tous les()

Parcourt chaque élément du tableau et renvoie vrai uniquement si tous les éléments remplissent les conditions, sinon il renvoie faux.

let arr = [1, 2, 3, 4, 5]
console.log(arr.every(item => item > 0)) // true

② filtre()

Utilisé pour filtrer le tableau, et les éléments qui remplissent les conditions seront renvoyés.

Son paramètre est une fonction de rappel.Tous les éléments du tableau exécutent la fonction dans l'ordre et les éléments dont le résultat de retour est vrai seront renvoyés. Cette méthode renverra un nouveau tableau et ne modifiera pas le tableau d'origine.

let arr = [1, 2, 3, 4, 5]
console.log(arr.filter(item => item > 2)) // [3, 4, 5]

Vous pouvez utiliser filter() des méthodes pour supprimer les valeurs non définies, nulles, NaN, etc. d'un tableau

let arr = [1, undefined, 2, null, 3, false, '', 4, 0]
console.log(arr.filter(Boolean)) // [1, 2, 3, 4]

③ pour chaque

Utilisé pour appeler chaque élément du tableau et transmettre l'élément à la fonction de rappel. Cette méthode n'a pas de valeur de retour

let arr = [1, 2, 3, 4, 5]
arr.forEach((item, index, arr) => {
  console.log(item, index, arr)
})

Cette méthode peut également avoir un deuxième paramètre, qui est utilisé pour lier la variable this à l'intérieur de la fonction de rappel (la fonction de rappel ne peut pas être une fonction de flèche, car la fonction de flèche ne l'a pas)

      let arr = [1, 2, 3, 4, 5];
      let arr1 = [9, 8, 7, 6, 5];
      arr.forEach(function (item, index, arr) {
        console.log(this[index]); //  9 8 7 6 5
      }, arr1);

④ carte()

Un nouveau tableau sera renvoyé et les éléments du tableau sont les valeurs des éléments du tableau d'origine après l'appel de la fonction.

Cette méthode traite les éléments séquentiellement dans l’ordre d’origine des éléments du tableau. Cette méthode ne détecte pas un tableau vide , elle renvoie un nouveau tableau sans modifier le tableau d'origine .

      let arr = [1, 2, 3];
      let arrNew = arr.map((item) => {
        return item + 1;
      });
      console.log(arrNew); // [2, 3, 4]

Le deuxième paramètre est utilisé pour lier la variable this à l'intérieur de la fonction paramètre :

      var arr = ["a", "b", "c"];
      let arrNew = [1, 2].map(function (e) {
        return this[e];
      }, arr);
      console.log(arrNew); // ['b', 'c']

Cette méthode peut être appelée dans une chaîne :

      let arr = [1, 2, 3];
      let arrNew = arr.map((item) => item + 1).map((item) => item + 1);
      console.log(arrNew); // [3, 4, 5]

⑤ certains()

Parcourt chaque élément du tableau et renvoie vrai tant qu'un élément remplit la condition, sinon il renvoie faux.

      let arr = [1, 2, 3, 4, 5];
      console.log(arr.some((item) => item > 4)) // true