web-dev-qa-db-fra.com

est-il possible de changer les valeurs du tableau en forav en javascript?

exemple:

var arr = ["one","two","three"];

arr.forEach(function(part){
  part = "four";
  return "four";
})

alert(arr);

Le tableau est toujours avec ses valeurs d'origine, existe-t-il un moyen d'avoir un accès en écriture aux éléments du tableau à partir d'une fonction itérative?

javascriptarraysforeachpass-by-reference
200
rsk82

Le rappel reçoit l'élément, l'index et le tableau lui-même.

arr.forEach(function(part, index, theArray) {
  theArray[index] = "hello world";
});

edit - Comme indiqué dans un commentaire, la fonction .forEach() peut prendre un deuxième argument, qui sera utilisé comme valeur de this à chaque appel du rappel:

arr.forEach(function(part, index) {
  this[index] = "hello world";
}, arr); // use arr as this

Ce deuxième exemple montre que arr est lui-même configuré en tant que this dans le rappel. On pourrait penser que le tableau impliqué dans l'appel .forEach() pourrait être la valeur par défaut de this, mais pour une raison quelconque, ce ne l'est pas; this sera undefined si ce deuxième argument n'est pas fourni.

De plus, il est important de se rappeler qu'il existe toute une famille d'utilitaires similaires fournis sur le prototype Array, et que Stackoverflow pose de nombreuses questions sur l'une ou l'autre fonction, de sorte que la meilleure solution consiste simplement à choisir un outil différent. Tu as:

  • forEach pour faire quelque chose avec ou pour chaque entrée d'un tableau;
  • filter pour produire un nouveau tableau contenant uniquement des entrées qualifiantes;
  • map pour créer un nouveau tableau un à un en transformant un tableau existant;
  • some pour vérifier si au moins un élément d'un tableau correspond à une description;
  • every pour vérifier si toutes entrées dans un tableau correspondent à une description;
  • find pour rechercher une valeur dans un tableau

etc. lien MDN

316
Pointy

Tableau: ["1", 2, 3, 4]
Résultat: ["foo1", "foo2", "foo3", "foo4"]

Array.prototype.map() Conserver la matrice d'origine

réalisé en introduisant une nouvelle variable modifiedArr

var arr = ["1", 2, 3, 4];

var modifiedArr = arr.map(function(v) {
  return "foo"+ v;
});

console.log( "Original:", arr );
console.log( "Modified:", modifiedArr );

Array.prototype.map() Modifier le tableau d'origine

réalisé en réaffectant la variable arr

var arr = ["1", 2, 3, 4];

arr = arr.map(function(v) {
  return "foo"+ v;
});

console.log( arr );

Array.prototype.forEach() Modifier le tableau d'origine

atteint en ciblant ses clés par index arr[i]

var arr = ["1", 2, 3, 4];

arr.forEach(function(v, i) {
   arr[i] = "foo" + v;
});

console.log( "Original:", arr );

63
Roko C. Buljan

Javascript est passé par valeur, ce qui signifie essentiellement que part est un copy de la valeur dans le tableau.

Pour changer la valeur, accédez au tableau lui-même dans votre boucle.

arr[index] = 'new value';

12
hvgotcodes

La fonction .forEach peut avoir une fonction de rappel (eachelement, elementIndex) Donc, en gros, vous devez faire ceci:

arr.forEach(function(element,index){
    arr[index] = "four";   //set the value  
});
console.log(arr); //the array has been overwritten.

Ou, si vous souhaitez conserver le tableau d'origine, vous pouvez en faire une copie avant de suivre le processus ci-dessus . Pour faire une copie, vous pouvez utiliser:

var copy = arr.slice();
2
zhujy_8833

remplacez-le par l'index du tableau.

array[index] = new_value;
2
Asif Alamgir

Avec les méthodes d'objet Array, vous pouvez modifier le contenu de l'objet Array, mais par rapport aux boucles for de base, ces méthodes sont dépourvues d'une fonctionnalité importante. Vous ne pouvez pas modifier l'index lors de l'exécution.

Par exemple, si vous voulez supprimer l'élément actuel et le placer à une autre position d'index dans le même tableau, vous pouvez facilement le faire. Si vous déplacez l'élément actuel vers une position précédente, il n'y a pas de problème lors de la prochaine itération, vous obtiendrez le même élément suivant que si vous n'aviez rien fait.

Considérons ce code dans lequel nous déplaçons l'élément de la position d'index 5 vers l'index de position 2 une fois que l'indice compte jusqu'à 5.

var ar = [0,1,2,3,4,5,6,7,8,9];
ar.forEach((e,i,a) => {
i == 5 && a.splice(2,0,a.splice(i,1)[0])
console.log(i,e);
}); // 0 0 - 1 1 - 2 2 - 3 3 - 4 4 - 5 5 - 6 6 - 7 7 - 8 8 - 9 9

Cependant, si nous déplaçons l'élément actuel quelque part au-delà de la position d'index actuelle, les choses deviennent un peu compliquées. Ensuite, le tout prochain élément passera dans la position des éléments déplacés et lors de la prochaine itération, nous ne pourrons pas le voir ni l’évaluer.

Considérons ce code dans lequel nous déplaçons l'élément de la position d'index 5 vers l'index 7 une fois que l'index compte jusqu'à 5.

var a = [0,1,2,3,4,5,6,7,8,9];
a.forEach((e,i,a) => {
i == 5 && a.splice(7,0,a.splice(i,1)[0])
console.log(i,e);
}); // 0 0 - 1 1 - 2 2 - 3 3 - 4 4 - 5 5 - 6 7 - 7 5 - 8 8 - 9 9

Donc, nous n'avons jamais rencontré 6 dans la boucle. Normalement, dans une boucle for, vous devez décrémenter la valeur d'index lorsque vous déplacez l'élément de tableau vers l'avant afin que votre index reste à la même position lors de la prochaine exécution et que vous puissiez toujours évaluer l'élément déplacé à la place de l'élément supprimé. Ce n'est pas possible avec les méthodes de tableau. Vous ne pouvez pas modifier l'index. Vérifiez le code suivant

var a = [0,1,2,3,4,5,6,7,8,9];
a.forEach((e,i,a) => {
i == 5 && (a.splice(7,0,a.splice(i,1)[0]), i--);
console.log(i,e);
}); // 0 0 - 1 1 - 2 2 - 3 3 - 4 4 - 4 5 - 6 7 - 7 5 - 8 8 - 9 9

Comme vous le voyez lorsque nous décrémentons i, il ne continuera pas de 5 à 6, d'où il a été laissé.

Alors gardez cela à l'esprit.

1
Redu

Voici une réponse similaire en utilisant une fonction de style =>:

var data = [1,2,3,4];
data.forEach( (item, i, self) => self[i] = item + 10 );

donne le résultat:

[11,12,13,14]

Le paramètre self n'est pas strictement nécessaire avec la fonction de style flèche, donc

data.forEach( (item,i) => data[i] = item + 10);

fonctionne aussi. 

0
J. Peterson

Pour ajouter ou supprimer entièrement des éléments susceptibles de modifier l’index, par extension de la suggestion de slice () de zhujy_8833 d’itérer sur une copie, comptez simplement le nombre d’éléments déjà supprimés ou ajoutés et modifiez l’index en conséquence. Par exemple, pour supprimer des éléments:

let values = ["A0", "A1", "A2", "A3", "A4", "A5", "A6", "A7", "A8"];
let count = 0;
values.slice().forEach((value, index) => {
    if (value === "A2" || value === "A5") {
        values.splice(index - count++, 1);
    };
});
console.log(values);

// Expected: [ 'A0', 'A1', 'A3', 'A4', 'A6', 'A7', 'A8' ]

Pour insérer des éléments avant:

if (value === "A0" || value === "A6" || value === "A8") {
    values.splice(index - count--, 0, 'newVal');
};

// Expected: ['newVal', A0, 'A1', 'A2', 'A3', 'A4', 'A5', 'newVal', 'A6', 'A7', 'newVal', 'A8' ]

Pour insérer des éléments après:

if (value === "A0" || value === "A6" || value === "A8") {
    values.splice(index - --count, 0, 'newVal');
};

// Expected: ['A0', 'newVal', 'A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'newVal', 'A7', 'A8', 'newVal']

Pour remplacer un élément:

if (value === "A3" || value === "A4" || value === "A7") {
    values.splice(index, 1, 'newVal');
};

// Expected: [ 'A0', 'A1', 'A2', 'newVal', 'newVal', 'A5', 'A6', 'newVal', 'A8' ]

Remarque: si les insertions "avant" et "après" sont implémentées, le code doit gérer d'abord les insertions "avant", sinon l'inverse ne serait pas comme prévu

0
Leigh Mathieson