¿Cómo puedo agregar nuevos elementos de matriz al comienzo de una matriz en Javascript?
Necesito agregar o anteponer elementos al comienzo de una matriz.
Por ejemplo, si mi matriz se parece a la siguiente:
[23, 45, 12, 67]
Y la respuesta de mi llamada AJAX es 34, Quiero que la matriz actualizada sea como la siguiente:
[34, 23, 45, 12, 67]
Actualmente planeo hacerlo así:
var newArray = [];
newArray.push(response);
for (var i = 0; i < theArray.length; i++) {
newArray.push(theArray[i]);
}
theArray = newArray;
delete newArray;
¿Hay alguna forma mejor de hacer esto? ¿Tiene Javascript alguna funcionalidad incorporada que haga esto?
La complejidad de mi método es O(n) y sería realmente interesante ver mejores implementaciones.
preguntado el 09 de noviembre de 11 a las 20:11
Moon
16 Respuestas
Utilice la herramienta unshift. Es como push, excepto que agrega elementos al principio de la matriz en lugar de al final.
unshift/push- agregar un elemento al principio / final de una matrizshift/pop- eliminar y devolver el primer / último elemento de una matriz
Un diagrama simple ...
unshift -> array <- push
shift <- array -> pop
y gráfico:
add remove start end
push X X
pop X X
unshift X X
shift X X
Primero eche un vistazo al sitio web de la página Documentación de MDN Array. Prácticamente todos los lenguajes que tienen la capacidad de empujar / extraer elementos de una matriz también tendrán la capacidad de anular / cambiar (a veces llamado push_front/pop_front), nunca debería tener que implementarlos usted mismo.
Como se señaló en los comentarios, si desea evitar la mutación de su matriz original, puede usar concat, que concatena dos o más matrices juntas. Puede usar esto para insertar funcionalmente un solo elemento en la parte frontal o posterior de una matriz existente; para hacerlo, debe convertir el nuevo elemento en una matriz de un solo elemento:
const array = [3, 2, 1]
const newFirstElement = 4
const newArray = [newFirstElement].concat(array) // [ 4, 3, 2, 1 ]
console.log(newArray);concat también puede agregar elementos. Los argumentos para concat puede ser de cualquier tipo; están implícitamente envueltos en una matriz de un solo elemento, si aún no son una matriz:
const array = [3, 2, 1]
const newLastElement = 0
// Both of these lines are equivalent:
const newArray1 = array.concat(newLastElement) // [ 3, 2, 1, 0 ]
const newArray2 = array.concat([newLastElement]) // [ 3, 2, 1, 0 ]
console.log(newArray1);
console.log(newArray2);contestado el 29 de mayo de 21 a las 04:05
Usar concat podría ser preferible ya que devuelve la nueva matriz. Muy útil para encadenar. [thingToInsertToFront].concat(originalArray).reduce(fn).reverse().map(fn) etc ... si usa unshift, no puede hacer ese encadenamiento porque todo lo que obtiene es la longitud. - sanjuan3d
shift / unshift, push / pop, empalme. Nombres muy lógicos para tales métodos. - linuxunil
var a = [23, 45, 12, 67];
a.unshift(34);
console.log(a); // [34, 23, 45, 12, 67]Respondido el 13 de Septiembre de 16 a las 01:09
La razón por la que la gente necesita una guía visual para 4 funciones de uso diario es por los nombres de las funciones cifradas ... ¿Por qué no se llama Insertar unshift? Shift debe ser Eliminar. etc ... - Pascal
// ¿Por qué unshift no se llama Insertar? // Viene de las convenciones del lenguaje de programación C donde los elementos de la matriz se trataban como una pila. (ver perlmonks.org/?node_id=613129 para una explicación completa) - dreftymac
@Pascal No, insertar y eliminar serían nombres particularmente malos para esto; implican acceso aleatorio, en lugar de agregar / eliminar desde el frente de la matriz - megar
Hubiera pensado que unshift debería eliminar la primera tecla, y shift se insertaría en la primera tecla, pero ese es solo mi pensamiento general: Shannon Hochkins
Me gusta la referencia de ADN. Cazador WebDev
Con ES6, use el operador de propagación ... :
DEMO
var arr = [23, 45, 12, 67];
arr = [34, ...arr]; // RESULT : [34,23, 45, 12, 67]
console.log(arr)Respondido el 20 de junio de 20 a las 10:06
también crea una nueva matriz, útil para funciones puras - devonj
¿Cuál es la implicación de rendimiento aquí? ¿Es más lento que usar unshift ()? - Peter T.
Claro, será más lento ya que es una matriz inmutable (creando una nueva matriz). Si está trabajando con una gran variedad o el rendimiento es su primer requisito, considere usar concat en lugar de. - Abdennour TOUMI
el rendimiento no es importante en 2018, las nuevas versiones en el navegador y el nodo obtienen el mismo rendimiento - apilado
Otra forma de hacer eso a través de concat
var arr = [1, 2, 3, 4, 5, 6, 7];
console.log([0].concat(arr));La diferencia entre los concat y unshift es que concat devuelve una nueva matriz. La actuación entre ellos se pudo encontrar aquí.
function fn_unshift() {
arr.unshift(0);
return arr;
}
function fn_concat_init() {
return [0].concat(arr)
}
Aquí está el resultado de la prueba
respondido 03 nov., 16:11
Sería bueno que su respuesta adjuntara la comparación de rendimiento de ambos además de agregar la referencia. - Iván De Paz Centeno
Acabo de tener jsPerf no está disponible temporalmente mientras estamos trabajando en el lanzamiento de v2. Por favor, inténtelo de nuevo más tarde desde el enlace. Otra buena razón para incluir los resultados en lugar de vincularlos. - Tigger
jspref resultado: unshift: 25,510 ± 3.18% 99% más lento concat: 2,436,894 ± 3.39% más rápido - Iluminador
En el último Safari, fn_unshift () se ejecuta más rápido. - pasajero
En el último Safari (v 10), fn_unshift () vuelve a ser más lento. - rmcsharry
Hoja de referencia rápida:
Los términos shift / unshift y push / pop pueden ser un poco confusos, al menos para las personas que pueden no estar familiarizadas con la programación en C.
Si no está familiarizado con la jerga, aquí hay una traducción rápida de términos alternativos, que pueden ser más fáciles de recordar:
* array_unshift() - (aka Prepend ;; InsertBefore ;; InsertAtBegin )
* array_shift() - (aka UnPrepend ;; RemoveBefore ;; RemoveFromBegin )
* array_push() - (aka Append ;; InsertAfter ;; InsertAtEnd )
* array_pop() - (aka UnAppend ;; RemoveAfter ;; RemoveFromEnd )
Respondido 23 Oct 14, 15:10
tienes una matriz: var arr = [23, 45, 12, 67];
Para agregar un elemento al principio, desea utilizar splice:
var arr = [23, 45, 12, 67];
arr.splice(0, 0, 34)
console.log(arr);Respondido el 13 de Septiembre de 16 a las 18:09
arr.splice (0, longitud de arr., 34); - Lior El Rom
@LiorElrom ¿qué hace tu fragmento? - Janus Troelsen
@poushy es específico del navegador, en Firefox 54 es unshift 50% más rápido (pero sobre todo más legible) - icl7126
@poushy Ya no. Mucho más lento. - Andrés
Sin mutar
De hecho, todos unshift/push y shift/pop mutar la matriz de origen.
LA unshift/push agregue un elemento a la matriz existente desde el principio / final y shift/pop eliminar un elemento del principio / final de una matriz.
Pero hay algunas formas de agregar elementos a una matriz sin una mutación. el resultado es una nueva matriz, para agregar al final de la matriz, use el siguiente código:
const originArray = ['one', 'two', 'three'];
const newItem = 4;
const newArray = originArray.concat(newItem); // ES5
const newArray2 = [...originArray, newItem]; // ES6+
Para agregar al comienzo de la matriz original, use el siguiente código:
const originArray = ['one', 'two', 'three'];
const newItem = 0;
const newArray = (originArray.slice().reverse().concat(newItem)).reverse(); // ES5
const newArray2 = [newItem, ...originArray]; // ES6+
Con la forma anterior, agrega al principio / final de una matriz sin una mutación.
Respondido 03 ago 21, 17:08
Acabo de poner un slice función al final de originArray para evitar la mutabilidad. - Ahmad Khani
¡Impresionante! Cuando se trata de la gestión del estado (Redux) ... ¡esta respuesta es preciosa! - Pedro Ferreira
[newItem, ... originArray]; // ES6 + ¡Tiene una gran sintaxis! Funcionó perfecto !! Gracias. - Bat
Usando la desestructuración de ES6: (evitando la mutación de la matriz original)
const newArr = [item, ...oldArr]
respondido 06 nov., 19:17
Esencialmente una respuesta duplicada de el de Abdennour TOUMI... - alemán
Hoja de referencia para anteponer nuevos elementos en la matriz
const list = [23, 45, 12, 67];
list.unshift(34);
console.log(list); // [34, 23, 45, 12, 67];2. Array#splice
const list = [23, 45, 12, 67];
list.splice(0, 0, 34);
console.log(list); // [34, 23, 45, 12, 67];const list = [23, 45, 12, 67];
const newList = [34, ...list];
console.log(newList); // [34, 23, 45, 12, 67];4. Array#concat
const list = [23, 45, 12, 67];
const newList = [32].concat(list);
console.log(newList); // [34, 23, 45, 12, 67];Nota: En cada uno de estos ejemplos, puede anteponer varios elementos proporcionando más elementos para insertar.
Respondido el 22 de Septiembre de 20 a las 16:09
Si necesita insertar continuamente un elemento al comienzo de una matriz, es más rápido de usar push declaraciones seguidas de una llamada a reverse, en lugar de llamar unshift todo el tiempo.
Prueba de referencia: http://jsben.ch/kLIYf
Respondido el 07 de junio de 18 a las 14:06
Nota: la matriz inicial debe estar vacía. - 192kb
En 2021, su índice de referencia muestra una ganancia integral para unshift en todos los principales navegadores de escritorio (al menos en esta Mac). - Olly Hodgson
Usar splice insertamos un elemento en una matriz al principio:
arrName.splice( 0, 0, 'newName1' );
Respondido 12 Feb 19, 23:02
Métodos de matriz Pop, Push, Shift y Unshift en JavaScript JavaScript nos ofrece cuatro métodos para agregar o eliminar elementos del principio o del final de las matrices:
popular() : Eliminar un elemento del final de una matriz
let cats = ['Bob', 'Willy', 'Mini'];
cats.pop(); // ['Bob', 'Willy']
pop () devuelve el elemento eliminado.
empujar() : Agrega elementos al final de una matriz
let cats = ['Bob'];
cats.push('Willy'); // ['Bob', 'Willy']
cats.push('Puff', 'George'); // ['Bob', 'Willy', 'Puff', 'George']
push() returns the new array length.
cambio() : Elimina un elemento del principio de una matriz
let cats = ['Bob', 'Willy', 'Mini'];
cats.shift(); // ['Willy', 'Mini']
shift() returns the removed item.
unshift () : Agrega elementos al comienzo de una matriz
let cats = ['Bob'];
cats.unshift('Willy'); // ['Willy', 'Bob']
cats.unshift('Puff', 'George'); // ['Puff', 'George', 'Willy', 'Bob']
Respondido el 18 de Septiembre de 21 a las 12:09
Si desea empujar elementos que están en una matriz al principio de su matriz, use <func>.apply(<this>, <Array of args>) :
const arr = [1, 2];
arr.unshift.apply(arr, [3, 4]);
console.log(arr); // [3, 4, 1, 2]Respondido 07 Jul 20, 10:07
primero puede invertir la matriz y luego agregar elem a la matriz y luego revertirla.
const arr = [2,3,4,5,6];
const arr2 = 1;
arr.reverse();
//[6,5,4,3,2]
arr.push(arr2);
console.log(arr.reverse()); // [1,2,3,4,5,6]
buen bloqueo
ali alizadeh.
Respondido el 21 de enero de 21 a las 11:01
Rendimiento: para arreglos pequeños, puede elegir el que desee, sin diferencias de rendimiento significativas. Pero para algunas decenas de elementos, unshift () es mucho mejor que cualquier otra cosa.
Vea los resultados aquí: https://jsben.ch/GDA3P
respondido 19 mar '21, 10:03
puede revertir su matriz y empujar los datos, al final nuevamente revertirlo:
var arr=[2,3,4,5,6];
var arr2=1;
arr.reverse();
//[6,5,4,3,2]
arr.push(arr2);
Respondido 30 Oct 20, 10:10
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas javascript arrays or haz tu propia pregunta.
FYI: si necesita insertar continuamente un elemento al comienzo de una matriz, es más rápido de usar
pushdeclaraciones seguidas de una llamada areverse, en lugar de llamarunshifttodo el tiempo. - Krisztián Balla@ JennyO'Reilly deberías publicar esto como respuesta. Coincidía perfectamente con mi caso de uso. Gracias - rob
Pruebas de rendimiento: jsperf.com/agregando-elemento-al-array-start Pero los resultados son diferentes para cada navegador. - Avernikoz