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


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

arr.insert(index, item)

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


2075
2018-02-25 14:29


origen


Respuestas:


Lo que quieres es el splice función en el objeto de matriz nativa.

arr.splice(index, 0, item); insertará item dentro arr en el índice especificado (eliminar 0 artículos primero, es decir, es solo un inserto).

En este ejemplo, crearemos una matriz y agregaremos 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());


3437
2018-02-25 14:32



Usted puede implementar el Array.insert método al hacer 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' ]

207
2017-10-03 14:26



Arreglo personalizado 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 lo hace) y admite el encadenamiento:

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

2. Con Array-type arguments fusión y encadenamiento de soporte

/* 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"

MANIFESTACIÓN:  http://jsfiddle.net/UPphH/


63
2018-03-25 17:45



Aparte de empalme, puede utilizar este enfoque que no mutará la matriz original, pero creará una nueva matriz con el elemento agregado. Por lo general, debe evitar la mutación siempre que sea posible. Estoy usando el operador de extensión ES6 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 la función un poco para usar el operador de reposo para los nuevos elementos, y extenderlo también en el resultado devuelto

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 desea insertar múltiples elementos en una matriz a la vez, revise esta respuesta de desbordamiento de pila: Una mejor forma 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 usas 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);

33
2017-08-30 04:37



Para una programación funcional adecuada y propósitos de encadenamiento, una invención de Array.prototype.insert() es esencial. En realidad, el empalme 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, está bien lo de arriba con el Array.prototype.splice() uno muta el conjunto original y algunos pueden quejarse como "no deberías modificar lo que no te pertenece" y eso también podría ser correcto. Entonces, para el bienestar público me gustaría dar otro Array.prototype.insert() que no muta 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));


14
2018-05-13 23:22



Recomiendo usar puro JavaScript en este caso, tampoco hay método de inserción en JavaScript, pero tenemos un método que es Matriz incorporada método que hace el trabajo por usted, se llama empalme...

Veamos que es empalme()...

El método splice () cambia el contenido de una matriz al eliminar   elementos existentes y / o agregar nuevos elementos.

OK, imagina que tenemos este arreglo a continuación:

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

Podemos eliminar 3 Me gusta esto:

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

Devolverá 3, pero si revisamos el arr ahora, tenemos:

[1, 2, 4, 5]

Hasta ahora, muy bien, pero ¿cómo podemos agregar un nuevo elemento a la matriz mediante empalme? Volvamos a 3 en el arr ...

arr.splice(2, 0, 3);

Veamos lo que hemos hecho ...

Usamos empalme 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 y se agregará en el segundo índice ...

Deberías saber que podemos borrar y añadir al mismo tiempo, por ejemplo, ahora podemos hacer:

arr.splice(2, 2, 3);

Que eliminará 2 artículos en el índice 2, luego agrega 3 en el índice 2 y el resultado será:

[1, 2, 3, 5];

Esto muestra cómo funciona cada elemento en empalme:

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


7
2017-12-25 13:04



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
2018-04-05 17:06