Question Comment insérer un élément dans un tableau à un index spécifique?


Je cherche une méthode d'insertion de tableau Javascript, dans le style de:

arr.insert(index, item)

De préférence dans jQuery, mais n'importe quelle implémentation Javascript le fera à ce stade.


2075
2018-02-25 14:29


origine


Réponses:


Ce que vous voulez, c'est le splice fonction sur l'objet tableau natif.

arr.splice(index, 0, item); insérera item dans arr à l'index spécifié (suppression 0 les éléments en premier, c'est-à-dire, c'est juste un insert).

Dans cet exemple, nous allons créer un tableau et lui ajouter un élément dans l'index 2:

var arr = [];
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";

console.log(arr.join());
arr.splice(2, 0, "Lene");
console.log(arr.join());


3437
2018-02-25 14:32



Vous pouvez mettre en œuvre le Array.insert méthode en faisant ceci:

Array.prototype.insert = function ( index, item ) {
    this.splice( index, 0, item );
};

Ensuite, vous pouvez l'utiliser comme:

var arr = [ 'A', 'B', 'D', 'E' ];
arr.insert(2, 'C');

// => arr == [ 'A', 'B', 'C', 'D', 'E' ]

207
2017-10-03 14:26



Tableau personnalisé insert méthodes

1. Avec plusieurs arguments et support de chaînage

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
    this.splice.apply(this, [index, 0].concat(
        Array.prototype.slice.call(arguments, 1)));
    return this;
};

Il peut insérer plusieurs éléments (comme natif splice fait) et soutient le chaînage:

["a", "b", "c", "d"].insert(2, "X", "Y", "Z").slice(1, 6);
// ["b", "X", "Y", "Z", "c"]

2. Avec les arguments de type tableau fusionnant et supportant le chaînage

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
    index = Math.min(index, this.length);
    arguments.length > 1
        && this.splice.apply(this, [index, 0].concat([].pop.call(arguments)))
        && this.insert.apply(this, arguments);
    return this;
};

Il peut fusionner des tableaux à partir des arguments avec le tableau donné et prend également en charge le chaînage:

["a", "b", "c", "d"].insert(2, "V", ["W", "X", "Y"], "Z").join("-");
// "a-b-V-W-X-Y-Z-c-d"

DEMO:  http://jsfiddle.net/UPphH/


63
2018-03-25 17:45



À l'exception de splice, vous pouvez utiliser cette approche qui ne mutera pas le tableau original, mais créera un nouveau tableau avec l'élément ajouté. Vous devriez habituellement éviter la mutation autant que possible. J'utilise l'opérateur de propagation ES6 ici.

const items = [1, 2, 3, 4, 5]

const insert = (arr, index, newItem) => [
  // part of the array before the specified index
  ...arr.slice(0, index),
  // inserted item
  newItem,
  // part of the array after the specified index
  ...arr.slice(index)
]

const result = insert(items, 1, 10)

console.log(result)
// [1, 10, 2, 3, 4, 5]

Cela peut être utilisé pour ajouter plus d'un élément en ajustant un peu la fonction pour utiliser l'opérateur de repos pour les nouveaux éléments, et l'étendre dans le résultat renvoyé

const items = [1, 2, 3, 4, 5]

const insert = (arr, index, ...newItems) => [
  // part of the array before the specified index
  ...arr.slice(0, index),
  // inserted items
  ...newItems,
  // part of the array after the specified index
  ...arr.slice(index)
]

const result = insert(items, 1, 10, 20)

console.log(result)
// [1, 10, 20, 2, 3, 4, 5]


54
2017-07-04 09:18



Si vous voulez insérer plusieurs éléments dans un tableau à la fois, consultez cette réponse: Une meilleure façon de fusionner un tableau en un tableau en javascript

Voici également quelques fonctions pour illustrer les deux exemples:

function insertAt(array, index) {
    var arrayToInsert = Array.prototype.splice.apply(arguments, [2]);
    return insertArrayAt(array, index, arrayToInsert);
}

function insertArrayAt(array, index, arrayToInsert) {
    Array.prototype.splice.apply(array, [index, 0].concat(arrayToInsert));
    return array;
}

Enfin voici un jsFiddle pour que vous puissiez le voir pour vous: http://jsfiddle.net/luisperezphd/Wc8aS/

Et voici comment vous utilisez les fonctions:

// if you want to insert specific values whether constants or variables:
insertAt(arr, 1, "x", "y", "z");

// OR if you have an array:
var arrToInsert = ["x", "y", "z"];
insertArrayAt(arr, 1, arrToInsert);

33
2017-08-30 04:37



Pour une programmation fonctionnelle et un chaînage appropriés, une invention de Array.prototype.insert() est essentiel. En fait, épissure aurait pu être parfaite si elle avait retourné le tableau muté au lieu d'un tableau vide totalement vide de sens. Alors voilà

Array.prototype.insert = function(i,...rest){
  this.splice(i,0,...rest)
  return this
}

var a = [3,4,8,9];
document.write("<pre>" + JSON.stringify(a.insert(2,5,6,7)) + "</pre>");

Eh bien ok ce qui précède avec le Array.prototype.splice() on mute le tableau original et certains pourraient se plaindre comme "vous ne devriez pas modifier ce qui ne vous appartient pas" et cela pourrait s'avérer être aussi bien. Donc, pour le bien-être public, je voudrais donner un autre Array.prototype.insert() qui ne mute pas le tableau original. Ici ça va;

Array.prototype.insert = function(i,...rest){
  return this.slice(0,i).concat(rest,this.slice(i));
}

var a = [3,4,8,9],
    b = a.insert(2,5,6,7);
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));


14
2018-05-13 23:22



Je recommande d'utiliser pur JavaScript dans ce cas, il n'y a pas de méthode d'insertion en JavaScript, mais nous avons une méthode qui est un Array intégré méthode qui fait le travail pour vous, ça s'appelle épissure...

Voyons voir ce qui est épissure()...

La méthode splice () modifie le contenu d'un tableau en supprimant   éléments existants et / ou ajout de nouveaux éléments.

OK, imaginez que nous avons ce tableau ci-dessous:

const arr = [1, 2, 3, 4, 5];

Nous pouvons enlever 3 comme ça:

arr.splice(arr.indexOf(3), 1);

Il reviendra 3, mais si nous vérifions l'arr maintenant, nous avons:

[1, 2, 4, 5]

Jusqu'à présent, tout va bien, mais comment pouvons-nous ajouter un nouvel élément au tableau en utilisant splice? Remettons 3 dans l'arr ...

arr.splice(2, 0, 3);

Voyons voir ce que nous avons fait ...

Nous utilisons épissure encore une fois, mais cette fois pour le deuxième argument, nous passons 0, signifie que nous voulons supprimer aucun élément, mais en même temps, nous ajoutons le troisième argument qui est 3 qui sera ajouté au second index ...

Vous devriez être au courant, que nous pouvons effacer et ajouter en même temps, par exemple maintenant nous pouvons faire:

arr.splice(2, 2, 3);

Qui va supprimer 2 articles à l'index 2, puis ajouter 3 à l'index 2 et le résultat sera:

[1, 2, 3, 5];

Cela montre comment chaque élément dans l'épissure fonctionne:

array.splice (début, deleteCount, item1, item2, item3 ...)


7
2017-12-25 13:04



Une autre solution possible, avec l'utilisation de Array#reduce.

var arr = ["apple", "orange", "raspberry"],
    arr2 = [1, 2, 4];

function insert(arr, item, index) {
    arr = arr.reduce(function(s, a, i) {
      i == index ? s.push(item, a) : s.push(a);
      return s;
    }, []);   
    console.log(arr);
}

insert(arr, "banana", 1);
insert(arr2, 3, 2);


5
2018-04-05 17:06



Même si cela a déjà été répondu, j'ajoute cette note pour une approche alternative.

Je voulais placer un nombre connu des éléments dans un tableau, dans des positions spécifiques, comme ils proviennent d'un "tableau associatif" (c'est-à-dire un objet) qui, par définition, n'est pas garanti dans un ordre trié. Je voulais que le tableau résultant soit un tableau d'objets, mais que les objets soient dans un ordre spécifique dans le tableau car un tableau garantit leur ordre. Alors j'ai fait ça.

D'abord l'objet source, une chaîne JSONB extraite de PostgreSQL. Je voulais l'avoir trié par la propriété "order" dans chaque objet enfant.

var jsonb_str = '{"one": {"abbr": "", "order": 3}, "two": {"abbr": "", "order": 4}, "three": {"abbr": "", "order": 5}, "initialize": {"abbr": "init", "order": 1}, "start": {"abbr": "", "order": 2}}';

var jsonb_obj = JSON.parse(jsonb_str);

Puisque le nombre de nœuds dans l'objet est connu, je crée d'abord un tableau avec la longueur spécifiée:

var obj_length = Object.keys(jsonb_obj).length;
var sorted_array = new Array(obj_length);

Et puis itérer l'objet, en plaçant les objets temporaires nouvellement créés dans les emplacements souhaités dans le tableau sans vraiment aucun "tri" ayant lieu.

for (var key of Object.keys(jsonb_obj)) {
  var tobj = {};
  tobj[key] = jsonb_obj[key].abbr;

  var position = jsonb_obj[key].order - 1;
  sorted_array[position] = tobj;
}

console.dir(sorted_array);

5
2017-12-04 18:36



J'ai essayé ça et ça marche bien!

var initialArr = ["India","China","Japan","USA"];
initialArr.splice(index, 0, item);

Index est la position où vous voulez insérer ou supprimer l'élément. 0 c'est-à-dire que les seconds paramètres définissent le nombre d'éléments de l'index à supprimer item sont les nouvelles entrées que vous voulez faire dans le tableau. Cela peut être un ou plusieurs.

initialArr.splice(2, 0, "Nigeria");
initialArr.splice(2, 0, "Australia","UK");

2
2018-03-08 06:35