Cómo insertar un elemento en una matriz en un índice específico?


Estoy buscando un método de inserción de matriz Javascript, al estilo de:

arr.insert(index, item)

Preferiblemente en jQuery, pero cualquier implementación de Javascript funcionará en este punto.

Author: Binar Web, 2009-02-25

11 answers

Lo que quieres es splice función en el objeto array nativo.

arr.splice(index, 0, item); insertará item en arr en el índice especificado (borrando los elementos 0 primero, es decir, es solo un insert).

En este ejemplo crearemos un array y añadiremos un elemento al índice 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
Author: tvanfosson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-24 11:03:54

Puedes implementar el método Array.insert haciendo esto:

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

Entonces puedes usarlo como:

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

// => arr == [ 'A', 'B', 'C', 'D', 'E' ]
 215
Author: FrEsC 81,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-30 21:26:13

Matriz personalizada insert métodos

1. Con múltiples argumentos y soporte de encadenamiento

/* 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;
};

Puede insertar múltiples elementos (como nativo splice does) y soporta encadenamiento:

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

2. Con argumentos de tipo array que admiten la fusión y el encadenamiento

/* 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;
};

Puede combinar matrices de los argumentos con la matriz dada y también admite el encadenamiento:

["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
Author: VisioN,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-05 16:44:15

Aparte de splice, puede usar este enfoque que no mutará la matriz original, sino que creará una nueva matriz con el elemento agregado. Por lo general, debe evitar la mutación siempre que sea posible. Estoy usando ES6 operador de propagación aquí.

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]

Esto se puede usar para agregar más de un elemento ajustando un poco la función para usar el operador rest para los nuevos elementos, y extenderlo en el resultado devuelto también

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
Author: Gaafar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-04 09:18:02

Si desea insertar varios elementos en una matriz a la vez, consulte esta respuesta de desbordamiento de pila: Una mejor manera de empalmar una matriz en una matriz en javascript

También aquí hay algunas funciones para ilustrar ambos ejemplos:

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;
}

Finalmente aquí hay un jsFiddle para que puedas verlo por ti mismo: http://jsfiddle.net/luisperezphd/Wc8aS /

Y así es como se usan las funciones:

// 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
Author: Luis Perez,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:10:47

Para una programación funcional adecuada y con fines de encadenamiento, una invención de Array.prototype.insert() es esencial. En realidad splice podría haber sido perfecto si hubiera devuelto la matriz mutada en lugar de una matriz vacía totalmente sin sentido. Así que aquí va

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>");

Bien ok lo anterior con el Array.prototype.splice() muta el array original y algunos podrían quejarse como "no deberías modificar lo que no te pertenece" y eso podría resultar correcto también. Así que por el bien público lo haría como dar otro Array.prototype.insert() que no mute la matriz original. Aquí 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));
 15
Author: Redu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-22 21:43:29

Recomiendo usar pure JavaScripten este caso, tampoco hay un método insert en JavaScript, pero tenemos un método que es un método Array incorporadoque hace el trabajo por usted, se llama splice...

Veamos qué es splice()...

El método splice () cambia el contenido de una matriz eliminando elementos existentes y / o adición de nuevos elementos.

OK, imagine que tenemos esta matriz abajo:

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

Podemos eliminar 3 así:

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

Devolverá 3, pero si comprobamos el arr ahora, tenemos:{[14]]}

[1, 2, 4, 5]

Hasta ahora, todo bien, pero ¿cómo podemos agregar un nuevo elemento a la matriz usando splice? Vamos a poner de nuevo 3 en el arr...

arr.splice(2, 0, 3);

Veamos lo que hemos hecho...

Usamos splice de nuevo, pero esta vez para el segundo argumento, pasamos 0, significa que no queremos eliminar ningún elemento, pero al mismo tiempo, agregamos el tercer argumento que es 3 eso se añadirá en el segundo índice...

Debe tener en cuenta que podemos eliminar y agregar al mismo tiempo, por ejemplo, ahora podemos hacer:

arr.splice(2, 2, 3);

Que eliminará 2 elementos en el índice 2, luego agregue 3 en el índice 2 y el resultado será:

[1, 2, 3, 5];

Esto muestra cómo funciona cada elemento en splice:

Array.empalme (inicio, deleteCount, item1, item2, item3 ...)

 8
Author: Alireza,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-12 05:49:14

Otra posible solución, con el uso 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
Author: kind user,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-05 17:06:58

Aunque esto ya ha sido respondido, estoy agregando esta nota para un enfoque alternativo.

Quería colocar un número conocido de elementos en una matriz, en posiciones específicas, ya que provienen de una "matriz asociativa" (es decir, un objeto) que, por definición, no se garantiza que esté en un orden ordenado. Quería que el array resultante fuera un array de objetos, pero los objetos estuvieran en un orden específico en el array ya que un array garantiza su orden. Así que lo hice este.

Primero el objeto fuente, una cadena JSONB recuperada de PostgreSQL. Quería ordenarlo por la propiedad "order" en cada objeto hijo.

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);

Dado que se conoce el número de nodos en el objeto, primero creo un array con la longitud especificada:

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

Y luego itera el objeto, colocando los objetos temporales recién creados en las ubicaciones deseadas en la matriz sin que realmente tenga lugar ninguna "ordenación".

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
Author: Ville,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-30 21:26:49

Probé esto y está funcionando bien!

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

Index es la posición donde desea insertar o eliminar el elemento. 0 es decir, el segundo parámetro define el número de elementos del índice a eliminar item son las nuevas entradas que desea hacer en array. Puede ser uno o más de uno.

initialArr.splice(2, 0, "Nigeria");
initialArr.splice(2, 0, "Australia","UK");
 2
Author: Pawan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-30 21:27:42

Añadir un solo elemento a un índice específico

//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';

Añadir varios elementos a un índice específico

//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
Author: Srikrushna Pal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-19 13:20:02