Je recherche une méthode d'insertion de tableau JavaScript, dans le style de:

arr.insert(index, item)

De préférence dans jQuery, mais toute implémentation JavaScript fera l'affaire à ce stade.

3242
tags2k 25 févr. 2009 à 17:29

17 réponses

Meilleure réponse

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é (en supprimant d'abord 0 éléments, c'est-à-dire qu'il ne s'agit que d'une insertion).

Dans cet exemple, nous allons créer un tableau et y 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());
4611
Zze 24 avril 2018 à 11:03

Profitant de la méthode de réduction comme suit:

function insert(arr, val, index) {
    return index >= arr.length 
        ? arr.concat(val)
        : arr.reduce((prev, x, i) => prev.concat(i === index ? [val, x] : x), []);
}

Donc, de cette façon, nous pouvons retourner un nouveau tableau (ce sera une façon fonctionnelle cool - bien mieux que d'utiliser push ou splice) avec l'élément inséré à l'index, et si l'index est supérieur à la longueur du tableau, il sera inséré à la fin.

3
alejoko 12 janv. 2019 à 17:04

Ajouter un élément unique à un index 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 plusieurs éléments à un index 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
13
Ryan Taylor 19 juil. 2018 à 13:20

Si vous souhaitez insérer plusieurs éléments dans un tableau à la fois, consultez cette réponse Stack Overflow: Une meilleure façon d'épisser 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 par vous-même: 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);
40
Community 23 mai 2017 à 12:10

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

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

D'abord l'objet source, une chaîne JSONB récupérée de PostgreSQL. Je voulais le faire trier 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".

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);
4
K.Dᴀᴠɪs 30 mars 2018 à 21:26

Autre que l'épissure, vous pouvez utiliser cette approche qui ne mute pas le tableau d'origine, mais crée un nouveau tableau avec l'élément ajouté. Vous devriez généralement éviter la mutation dans la mesure du 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 le répartir également 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]
129
gafi 4 juil. 2016 à 09:18

Array#splice() est la voie à suivre, sauf si vous voulez vraiment éviter de muter le tableau. Étant donné 2 tableaux arr1 et arr2, voici comment vous insérez le contenu de arr2 dans arr1 après le premier élément:


const arr1 = ['a', 'd', 'e'];
const arr2 = ['b', 'c'];

arr1.splice(1, 0, ...arr2); // arr1 now contains ['a', 'b', 'c', 'd', 'e']

console.log(arr1)

Si vous êtes préoccupé par la mutation du tableau (par exemple, si vous utilisez Immutable.js), vous pouvez utiliser à la place slice(), à ne pas confondre avec splice() avec un 'p'.

const arr3 = [...arr1.slice(0, 1), ...arr2, ...arr1.slice(1)];
2
Dipen 7 févr. 2020 à 11:34

Vous pouvez implémenter la méthode Array.insert en procédant comme suit:

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' ]
279
K.Dᴀᴠɪs 30 mars 2018 à 21:26

Voici deux façons:

const array = [ 'My', 'name', 'Hamza' ];

array.splice(2, 0, 'is');

console.log("Method 1 : ", array.join(" "));

OU

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

const array = [ 'My', 'name', 'Hamza' ];
array.insert(2, 'is');

console.log("Method 2 : ", array.join(" "));
5
M. Hamza Rajput 28 août 2019 à 09:28

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);
6
kind user 5 avril 2017 à 17:06

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

Voyons ce qui est splice () ...

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

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

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

Nous pouvons supprimer 3 comme ceci:

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

Il retournera 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 une épissure? Remettons 3 à l'arr ...

arr.splice(2, 0, 3);

Voyons voir ce que nous avons fait ...

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

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

arr.splice(2, 2, 3);

Ce qui supprimera 2 éléments à l'index 2, puis ajoutera 3 à l'index 2 et le résultat sera:

[1, 2, 3, 5];

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

array.splice (start, deleteCount, item1, item2, item3 ...)

17
Alireza 12 juil. 2018 à 05:49

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

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

L'index est la position où vous souhaitez insérer ou supprimer l'élément. 0, c'est-à-dire que le deuxième paramètre définit le nombre d'éléments de l'index à supprimer. Il peut en être un ou plusieurs.

initialArr.splice(2, 0, "Nigeria");
initialArr.splice(2, 0, "Australia","UK");
2
K.Dᴀᴠɪs 30 mars 2018 à 21:27

Quiconque a toujours des problèmes avec celui-ci et a essayé toutes les options ci-dessus et ne l'a jamais obtenu. Je partage ma solution, c'est pour prendre en considération que vous ne voulez pas énoncer explicitement les propriétés de votre objet par rapport au tableau.

function isIdentical(left, right){
    return JSON.stringify(left) === JSON.stringify(right);
}

function contains(array, obj){
    let count = 0;
    array.map((cur) => {
          if(this.isIdentical(cur, obj)) count++;
    });
    return count > 0;
}

Il s'agit d'une combinaison d'itération du tableau de référence et de comparaison avec l'objet que vous souhaitez vérifier, convertissez-les tous les deux en une chaîne, puis répétez-les s'ils correspondent. Ensuite, vous pouvez simplement compter. Cela peut être amélioré mais c'est là que je me suis installé. J'espère que cela t'aides.

3
Clyde 6 déc. 2018 à 04:26

Méthodes de tableau insert personnalisées

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 splice natif). le fait) et prend en charge 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 prenant en charge 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/

76
VisioN 5 avril 2013 à 16:44

Un peu d'un fil plus ancien, mais je dois être d'accord avec Redu ci-dessus parce que l'épissure a certainement une interface confuse. Et la réponse donnée par cdbajorin selon laquelle "il ne renvoie un tableau vide que lorsque le deuxième paramètre est 0. S'il est supérieur à 0, il renvoie les éléments supprimés du tableau" est, bien que précise, prouvant le point. L'intention de la fonction est de raccorder ou, comme dit précédemment par Jakob Keller, "de se joindre ou de se connecter, également de changer. Vous avez un tableau établi que vous modifiez maintenant, ce qui impliquerait l'ajout ou la suppression d'éléments ...." Étant donné que, le la valeur de retour des éléments, le cas échéant, qui ont été supprimés est, au mieux, maladroite. Et je suis à 100% d'accord que cette méthode aurait pu être mieux adaptée au chaînage si elle avait renvoyé ce qui semble naturel, un nouveau tableau avec les éléments épissés ajoutés. Ensuite, vous pouvez faire des choses comme ["19", "17"]. Splice (1,0, "18"). Join ("...") ou tout ce que vous voulez avec le tableau renvoyé. Le fait qu'il retourne ce qui a été supprimé est juste un peu absurde à mon humble avis. Si l'intention de la méthode était de "découper un ensemble d'éléments" et que c'était seulement son intention, peut-être. Il semble que si je ne sais pas déjà ce que je coupe, j'ai probablement peu de raisons de couper ces éléments, n'est-ce pas? Il serait préférable qu'il se comporte comme concat, map, Reduce, slice, etc. où un nouveau tableau est créé à partir du tableau existant plutôt que de muter le tableau existant. Ce sont tous chaînables, et c'est un problème important. Il est assez courant de chaîner des manipulations de tableaux. On dirait que la langue doit aller dans l'une ou l'autre direction et essayer de s'y tenir le plus possible. Javascript étant fonctionnel et moins déclaratif, il semble juste être un étrange écart par rapport à la norme.

1
meem 18 juil. 2019 à 17:38

Pour une programmation fonctionnelle et un enchaînement appropriés, une invention de Array.prototype.insert() est essentielle. En fait, l'épissage aurait pu être parfait s'il avait renvoyé 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>");

Eh bien ok ce qui précède avec le Array.prototype.splice() on mute le tableau d'origine et certains pourraient se plaindre comme "vous ne devriez pas modifier ce qui ne vous appartient pas" et cela pourrait aussi être correct. Donc, pour le bien-être public, je voudrais donner un autre Array.prototype.insert() qui ne mute pas le tableau d'origine. Ça y 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));
22
Redu 22 mai 2016 à 21:43

Voici une fonction de travail que j'utilise dans l'une de mes applications.

Ceci vérifie si la sortie de l'article

let ifExist = (item, strings = [ '' ], position = 0) => {
     // output into an array with empty string. Important just in case their is no item. 
    let output = [ '' ];
    // check to see if the item that will be positioned exist.
    if (item) {
        // output should equal to array of strings. 
        output = strings;
       // use splice in order to break the array. 
       // use positition param to state where to put the item
       // and 0 is to not replace an index. Item is the actual item we are placing at the prescribed position. 
        output.splice(position, 0, item);
    }
    //empty string is so we do not concatenate with comma or anything else. 
    return output.join("");
};

Et puis je l'appelle ci-dessous.

ifExist("friends", [ ' ( ', ' )' ], 1)}  // output: ( friends )
ifExist("friends", [ ' - '], 1)}  // output:  - friends 
ifExist("friends", [ ':'], 0)}  // output:   friends: 
1
Lesly Revenge 16 févr. 2019 à 22:48