Comment faire pour insérer un élément dans un tableau à un indice spécifique?

je cherche une méthode D'insertion de tableau Javascript, dans le style de:

arr.insert(index, item)

de préférence en jQuery, mais toute implémentation Javascript fera l'affaire à ce stade.

2183
demandé sur Binar Web 2009-02-25 17:29:30

11 réponses

ce que vous voulez est le splice fonction sur l'objet native array.

arr.splice(index, 0, item); s'insérer item en arr à l'index spécifié (suppression de 0 éléments tout d'abord, c'est, c'est juste un insert).

Dans cet exemple, nous allons créer un tableau et ajouter un élément à l'indice 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());
3581
répondu tvanfosson 2018-04-24 11:03:54

vous pouvez implémenter la méthode Array.insert en faisant ceci:

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

, Alors vous pouvez l'utiliser comme:

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

// => arr == [ 'A', 'B', 'C', 'D', 'E' ]
215
répondu FrEsC 81 2018-03-30 21:26:13

tableau Personnalisé insert méthodes

1. Avec arguments multiples et le soutien 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 does) et supporte le chaînage:

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

2. Avec des arguments de type tableau fusionnant et enchaînant le soutien

/* 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 soutient également 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/

65
répondu VisioN 2013-04-05 16:44:15

autre que 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 devez généralement éviter la mutation lorsque cela est possible. J'utilise ES6 spread operator 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 article en modifiant la fonction un peu pour utiliser l'opérateur de repos pour les nouveaux articles, et de spread que dans le résultat retourné ainsi ""

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]
60
répondu Gaafar 2016-07-04 09:18:02

si vous voulez insérer plusieurs éléments dans un tableau à la fois, vérifiez cette réponse de débordement de pile: une meilleure façon de splice un tableau dans un tableau en javascript

aussi voici 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 donc vous pouvez le voir pour vous-même: http://jsfiddle.net/luisperezphd/Wc8aS /

et voici comment vous utiliser 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);
32
répondu Luis Perez 2017-05-23 12:10:47

une invention de Array.prototype.insert() est essentielle pour la programmation fonctionnelle et le chaînage. En fait splice aurait pu être parfait s'il avait retourné le tableau muté au lieu d'un tableau vide totalement dénué 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>");

bon 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 qui pourrait tourner être de droite. Donc pour le bien public je voudrais donner un autre Array.prototype.insert() qui ne mute pas le tableau original.

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));
15
répondu Redu 2016-05-22 21:43:29

je recommande d'utiliser pur JavaScript dans ce cas, aussi il n'y a pas de méthode d'insertion dans JavaScript, mais nous avons une méthode qui est un tableau intégré méthode qui fait le travail pour vous, il est appelé splice ...

voyons ce qu'est splice () ...

la méthode splice() change le contenu d'un tableau en enlevant existant éléments et / ou ajout de nouveaux éléments.

OK, imagine que nous avons cette rangée ci-dessous:

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

nous pouvons supprimer 3 comme ceci:

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

Il sera de retour le 3, mais si nous vérifions l'arr maintenant, nous avons:

[1, 2, 4, 5]

jusqu'à présent, si bon, mais comment pouvons-nous ajouter un nouvel élément au tableau en utilisant splice? Remettons-en 3 dans l'arr...

arr.splice(2, 0, 3);

voyons ce que nous avons fait...

Nous utilisons des splice de nouveau, 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 avons ajouter un troisième argument qui est de 3 qui seront ajoutés au deuxième indice...

vous devez savoir que nous pouvons supprimer et ajouter en même temps, par exemple maintenant nous pouvons faire:

arr.splice(2, 2, 3);

qui supprimera 2 articles à l'index 2, puis Ajouter 3 à l'index 2 et le résultat sera:

[1, 2, 3, 5];

cela montre comment chaque article dans splice fonctionne:

"151970920 tableau.splice(démarrer, deleteCount, élément1, élément2, item3 ...)

8
répondu Alireza 2018-07-12 05:49:14

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
répondu kind user 2017-04-05 17:06:58

bien que cela ait 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 viennent d'un "tableau associatif" (c'est à dire un objet) qui, par définition, n'est pas garantie dans un ordre trié. Je voulais le tableau résultant à un tableau d'objets, mais les objets dans un ordre spécifique dans le tableau depuis un tableau des garanties de leur ordre. J'ai donc fait cela.

D'abord l'objet source, une chaîne JSONB extraite de PostgreSQL. Je voulais qu'il soit trié par la propriété "ordre" 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 noeuds 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 endroits désirés dans le tableau sans vraiment de "tri".

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
répondu Ville 2018-03-30 21:26:49

j'ai essayé et ça marche très 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 le second paramètres définit le nombre d'éléments de l'index pour être enlevé élément sont les nouvelles entrées que vous voulez faire dans la gamme. Il peut être l'un ou plus d'un.

initialArr.splice(2, 0, "Nigeria");
initialArr.splice(2, 0, "Australia","UK");
2
répondu Pawan 2018-03-30 21:27:42

Ajouter un élément à un indice spécifique

//Append at specific position(here at index 1)
arrName.splice(1, 0,'newName1');
//1: index number, 0: number of element to remove, newName1: new element


//Append at specific position (here at index 3)
arrName[3] = 'newName1';

Ajouter un élément Multiple à un indice spécifique

//Append from index number 1
arrName.splice(1, 0,'newElemenet1', 'newElemenet2', 'newElemenet3');
//1: index number from where append start, 
//0: number of element to remove, 
//newElemenet1,2,3: new elements
2
répondu Srikrushna Pal 2018-07-19 13:20:02