¿Cómo puedo eliminar un elemento específico de una matriz?

9750

Tengo una matriz de números y estoy usando el .push()método para agregarle elementos.

¿Existe una forma sencilla de eliminar un elemento específico de una matriz?

Estoy buscando el equivalente de algo como:

array.remove(number);

Tengo que usar JavaScript central . No se permiten marcos.

4
  • 1
    array.remove (index) o array.pull (index) tendrían mucho sentido. splice es muy útil, pero un método remove () o pull () sería bienvenido ... Busque en Internet, encontrará un montón de "¿Qué es lo opuesto a push () en JavaScript?" preguntas. Sería genial si el answare pudiera ser tan simple como un inglés simple: Pull! Gustavo Gonçalves 24 oct.20 a las 15:51
  • 1
    Lo contrario de push es popEnderShadow8 27 de marzo a las 5:14
  • matriz constante = [2, 5, 9]; console.log (matriz); índice constante = array.indexOf (5); if (índice> -1) {array.splice (índice, 1); } // matriz = [2, 9] console.log (matriz); Ali NajafZadeh 3 de agosto a las 16:57
14129

Busque el indexelemento de matriz que desea eliminar indexOfy luego elimine ese índice con splice.

The splice() method changes the contents of an array by removing existing elements and/or adding new elements.

const array = [2, 5, 9];

console.log(array);

const index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}

// array = [2, 9]
console.log(array); 

El segundo parámetro de splicees el número de elementos que se eliminarán. Tenga en cuenta que splicemodifica la matriz en su lugar y devuelve una nueva matriz que contiene los elementos que se han eliminado.


En aras de la integridad, aquí hay funciones. La primera función elimina sólo una única ocurrencia (es decir, la eliminación de la primera partido de 5de [2,5,9,1,5,8,5]), mientras que la segunda función elimina todas las apariciones:

function removeItemOnce(arr, value) {
  var index = arr.indexOf(value);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}

function removeItemAll(arr, value) {
  var i = 0;
  while (i < arr.length) {
    if (arr[i] === value) {
      arr.splice(i, 1);
    } else {
      ++i;
    }
  }
  return arr;
}
// Usage
console.log(removeItemOnce([2,5,9,1,5,8,5], 5))
console.log(removeItemAll([2,5,9,1,5,8,5], 5))

En TypeScript, estas funciones pueden permanecer seguras para los tipos con un parámetro de tipo:

function removeItem<T>(arr: Array<T>, value: T): Array<T> { 
  const index = arr.indexOf(value);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}
12
  • 273
    Pregunta seria: ¿por qué JavaScript no permite el método simple e intuitivo de eliminar un elemento en un índice? Una simple, elegante, myArray.remove(index);parece ser la mejor solución y está implementada en muchos otros lenguajes (muchos de ellos más antiguos que JavaScript)default123 10 sep.20 a las 0:16
  • 8
    Los conjuntos y matrices de @Andrew son dos tipos de colecciones completamente diferentes. Stefan Fabian 1 dic.20 a las 9:44
  • 3
    Puede simplificar esta solución contando hacia atrás en lugar de hacia arriba: for (var i = ary.length - 1; i> = 0; i--) {if (ary [i] === value) {ary.remove (i )}}Luke Dupin 8 dic.20 a las 22:30
  • 2
    function remove (item, array) {var new_array = [] new_ array = array.filter ((ar) => ar! = item) return new_array}Rashid Iqbal 7 de enero a las 16:04
  • 6
    Llego un poco tarde a la fiesta, pero aquí están mis dos centavos: @ a2br: ¡ Array.unshift()es básicamente lo pull()que sería si existiera! @Bob: Personalmente, creo que es bueno que no Array.remove()exista nada similar . No queremos que JavaScript termine como PHP, ¿verdad? xDOOPS Studio 15 abr a las 9:12
1742

Editado en octubre de 2016

  • Hágalo simple, intuitivo y explícito ( navaja de Occam )
  • Hazlo inmutable (la matriz original permanece sin cambios)
  • Hágalo con funciones estándar de JavaScript, si su navegador no las admite, use polyfill

En este ejemplo de código, utilizo la función "array.filter (...)" para eliminar elementos no deseados de una matriz. Esta función no cambia la matriz original y crea una nueva. Si su navegador no admite esta función (por ejemplo, Internet Explorer antes de la versión 9 o Firefox antes de la versión 1.5), considere usar el filtro polyfill de Mozilla .

Eliminación de elemento (código ECMA-262 Edición 5 también conocido como JavaScript de estilo antiguo)

var value = 3

var arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(function(item) {
    return item !== value
})

console.log(arr)
// [ 1, 2, 4, 5 ]

Eliminar elemento (código ECMAScript 6)

let value = 3

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => item !== value)

console.log(arr)
// [ 1, 2, 4, 5 ]

IMPORTANTE La sintaxis de la función de flecha ECMAScript 6 "() => {}" no es compatible con Internet Explorer, Chrome antes de la versión 45, Firefox antes de la versión 22 y Safari antes de la versión 10. Para usar la sintaxis de ECMAScript 6 en navegadores antiguos, puede usar BabelJS .


Eliminar varios elementos (código ECMAScript 7)

Una ventaja adicional de este método es que puede eliminar varios elementos

let forDeletion = [2, 3, 5]

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => !forDeletion.includes(item))
// !!! Read below about array.includes(...) support !!!

console.log(arr)
// [ 1, 4 ]

IMPORTANTE La función "array.includes (...)" no es compatible con Internet Explorer, Chrome antes de la versión 47, Firefox antes de la versión 43, Safari antes de la versión 9 y Edge antes de la versión 14, así que aquí está polyfill de Mozilla .

Eliminar varios elementos (en el futuro, tal vez)

Si alguna vez se acepta la propuesta "Esta sintaxis vinculante" , podrá hacer lo siguiente:

// array-lib.js

export function remove(...forDeletion) {
    return this.filter(item => !forDeletion.includes(item))
}

// main.js

import { remove } from './array-lib.js'

let arr = [1, 2, 3, 4, 5, 3]

// :: This-Binding Syntax Proposal
// using "remove" function as "virtual method"
// without extending Array.prototype
arr = arr::remove(2, 3, 5)

console.log(arr)
// [ 1, 4 ]

Pruébelo usted mismo en BabelJS :)

Referencia

1
  • ¿Qué pasa si el contenido de la matriz son objetos y objetos anidadosRanjeet Thorat 11 de enero a las 9:51
1486

No sé cómo esperas array.remove(int)comportarte. Hay tres posibilidades en las que puedo pensar que es posible que desee.

Para eliminar un elemento de una matriz en un índice i:

array.splice(i, 1);

Si desea eliminar todos los elementos con valor numberde la matriz:

for (var i = array.length - 1; i >= 0; i--) {
 if (array[i] === number) {
  array.splice(i, 1);
 }
}

Si solo desea que el elemento en el índice iya no exista, pero no desea que los índices de los otros elementos cambien:

delete array[i];
0
548

Depende de si quieres mantener un espacio vacío o no.

Si haces querer una ranura vacía:

array[index] = undefined;

Si no quiere un espacio vacío:

//To keep the original:
//oldArray = [...array];

//This modifies the array.
array.splice(index, 1);

Y si necesita el valor de ese elemento, puede almacenar el elemento de la matriz devuelta:

var value = array.splice(index, 1)[0];

Si desea eliminar en cualquier extremo de la matriz, puede usar array.pop()para el último o array.shift()para el primero (ambos devuelven el valor del elemento también).

Si no conoce el índice del elemento, puede usar array.indexOf(item)para obtenerlo (en a if()para obtener un elemento o en a while()para obtener todos). array.indexOf(item)devuelve el índice o -1si no se encuentra. 

1
  • Es un poco divertido que el empalme devuelva otra matriz construida a partir de los elementos eliminados. Escribí algo que asumía que el empalme devolvería la lista recién modificada (como lo que harían las colecciones inmutables, por ejemplo). Entonces, en este caso particular de solo un elemento en la lista, y ese elemento se elimina, la lista devuelta es exactamente idéntica a la original después de empalmar ese elemento. Entonces, mi aplicación entró en un ciclo infinito. Teddy 25 de julio de 2020 a las 10:55
344

Un amigo tenía problemas con Internet Explorer 8 y me mostró lo que hizo. Le dije que estaba mal y él me dijo que tenía la respuesta aquí. La respuesta principal actual no funcionará en todos los navegadores (Internet Explorer 8, por ejemplo) y solo eliminará la primera aparición del elemento.

Eliminar TODAS las instancias de una matriz

function removeAllInstances(arr, item) {
   for (var i = arr.length; i--;) {
     if (arr[i] === item) arr.splice(i, 1);
   }
}

Recorre la matriz hacia atrás (ya que los índices y la longitud cambiarán a medida que se eliminan los elementos) y elimina el elemento si se encuentra. Funciona en todos los navegadores.

0
239

Hay dos enfoques principales:

  1. empalme () :anArray.splice(index, 1);

  2. borrar :delete anArray[index];

Tenga cuidado cuando use el deletepara una matriz. Es bueno para eliminar atributos de objetos, pero no tan bueno para matrices. Es mejor usarlo splicepara matrices.

Tenga en cuenta que cuando utiliza deletepara una matriz, puede obtener resultados incorrectos anArray.length. En otras palabras, deleteeliminaría el elemento, pero no actualizaría el valor de la propiedad length.

También puede esperar tener huecos en los números de índice después de usar eliminar, por ejemplo, podría terminar teniendo índices 1, 3, 4, 8, 9 y 11 y la longitud que tenía antes de usar eliminar. En ese caso, todos los forbucles indexados fallarían, ya que los índices ya no son secuenciales.

Si se ve obligado a usarlo deletepor alguna razón, entonces debe usar for eachbucles cuando necesite recorrer arreglos. De hecho, evite siempre el uso de forbucles indexados , si es posible. De esa forma, el código sería más robusto y menos propenso a tener problemas con los índices.

0
196
Array.prototype.remove_by_value = function(val) {
 for (var i = 0; i < this.length; i++) {
  if (this[i] === val) {
   this.splice(i, 1);
   i--;
  }
 }
 return this;
}[
 // call like
 (1, 2, 3, 4)
].remove_by_value(3);

Array.prototype.remove_by_value = function(val) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] === val) {
      this.splice(i, 1);
      i--;
    }
  }
  return this;
}

var rooms = ['hello', 'something']

rooms = rooms.remove_by_value('hello')

console.log(rooms)
1
  • 2
    Muchos desaprueban la modificación de prototipos que no le pertenecen. snarf 14/09/20 a las 22:34
143

No es necesario utilizar indexOfo splice. Sin embargo, funciona mejor si solo desea eliminar una aparición de un elemento.

Buscar y mover (mover):

function move(arr, val) {
  var j = 0;
  for (var i = 0, l = arr.length; i < l; i++) {
    if (arr[i] !== val) {
      arr[j++] = arr[i];
    }
  }
  arr.length = j;
}

Utilice indexOfe splice(índice de):

function indexof(arr, val) {
  var i;
  while ((i = arr.indexOf(val)) != -1) {
    arr.splice(i, 1);
  }
}

Utilice solo splice(empalme):

function splice(arr, val) {
  for (var i = arr.length; i--;) {
    if (arr[i] === val) {
      arr.splice(i, 1);
    }
  }
}

Tiempos de ejecución en nodejs para una matriz con 1000 elementos (promedio de más de 10000 ejecuciones):

indexof es aproximadamente 10 veces más lento que move . Incluso si se mejora al eliminar la llamada a indexOfen empalme , funciona mucho peor que mover .

Remove all occurrences:
    move 0.0048 ms
    indexof 0.0463 ms
    splice 0.0359 ms

Remove first occurrence:
    move_one 0.0041 ms
    indexof_one 0.0021 ms
0
116

Esto proporciona un predicado en lugar de un valor.

NOTA: actualizará la matriz dada y devolverá las filas afectadas.

Uso

var removed = helper.remove(arr, row => row.id === 5 );

var removed = helper.removeAll(arr, row => row.name.startsWith('BMW'));

Definición

var helper = {
 // Remove and return the first occurrence

 remove: function(array, predicate) {
  for (var i = 0; i < array.length; i++) {
   if (predicate(array[i])) {
    return array.splice(i, 1);
   }
  }
 },

 // Remove and return all occurrences

 removeAll: function(array, predicate) {
  var removed = [];

  for (var i = 0; i < array.length; ) {
   if (predicate(array[i])) {
    removed.push(array.splice(i, 1));
    continue;
   }
   i++;
  }
  return removed;
 },
};
1
  • ponga su código en un fragmento de código para que otros usuarios puedan ver el resultadoMasoud Aghaei 2 feb a las 19:55
106

Puedes hacerlo fácilmente con el método de filtro :

function remove(arrOriginal, elementToRemove){
    return arrOriginal.filter(function(el){return el !== elementToRemove});
}
console.log(remove([1, 2, 1, 0, 3, 1, 4], 1));

Esto elimina todos los elementos de la matriz y también funciona más rápido que una combinación de slicey indexOf.

0
99

John Resig publicó una buena implementación :

// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

Si no desea extender un objeto global, puede hacer algo como lo siguiente:

// Array Remove - By John Resig (MIT Licensed)
Array.remove = function(array, from, to) {
    var rest = array.slice((to || from) + 1 || array.length);
    array.length = from < 0 ? array.length + from : from;
    return array.push.apply(array, rest);
};

Pero la razón principal por la que publico esto es para advertir a los usuarios contra la implementación alternativa sugerida en los comentarios de esa página (14 de diciembre de 2007):

Array.prototype.remove = function(from, to){
  this.splice(from, (to=[0,from||1,++to-from][arguments.length])<0?this.length+to:to);
  return this.length;
};

Parece funcionar bien al principio, pero a través de un proceso doloroso descubrí que falla al intentar eliminar el penúltimo elemento de una matriz. Por ejemplo, si tiene una matriz de 10 elementos e intenta eliminar el noveno elemento con esto:

myArray.remove(8);

Terminas con una matriz de 8 elementos. No sé por qué, pero confirmé que la implementación original de John no tiene este problema.

0
97

Puede utilizar ES6. Por ejemplo, para eliminar el valor '3' en este caso:

var array=['1','2','3','4','5','6']
var newArray = array.filter((value)=>value!='3');
console.log(newArray);

Producción :

["1", "2", "4", "5", "6"]
2
  • 7
    Esta respuesta es buena porque crea una copia de la matriz original, en lugar de modificar la original directamente. Claudio Holanda 16 de marzo de 2017 a las 15:27
  • Nota: Array.prototype.filter es ECMAScript 5.1 (No IE8). para soluciones más específicas: stackoverflow.com/a/54390552/8958729Chang 27/01/19 a las 19:45
95

Underscore.js se puede utilizar para resolver problemas con varios navegadores. Utiliza métodos de navegador integrados, si están presentes. Si están ausentes, como en el caso de las versiones anteriores de Internet Explorer, utiliza sus propios métodos personalizados.

Un ejemplo simple para eliminar elementos de la matriz (del sitio web):

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1); // => [2, 3, 4]
1
  • aunque elegante y conciso, OP mencionó claramente solo JS centralEigenFool 16 abr.20 a las 8:56
86

Si desea una nueva matriz con las posiciones eliminadas eliminadas, siempre puede eliminar el elemento específico y filtrar la matriz. Es posible que necesite una extensión del objeto de matriz para los navegadores que no implementan el método de filtro, pero a largo plazo es más fácil ya que todo lo que hace es esto:

var my_array = [1, 2, 3, 4, 5, 6];
delete my_array[4];
console.log(my_array.filter(function(a){return typeof a !== 'undefined';}));

Debería mostrarse [1, 2, 3, 4, 6].

83

A continuación, se muestran algunas formas de eliminar un elemento de una matriz mediante JavaScript .

Todos los métodos descritos no mutan la matriz original , sino que crean una nueva.

Si conoce el índice de un artículo

Suponga que tiene una matriz y desea eliminar un elemento en su posición i.

Un método es utilizar slice():

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const i = 3
const filteredItems = items.slice(0, i).concat(items.slice(i+1, items.length))

console.log(filteredItems)

slice()crea una nueva matriz con los índices que recibe. Simplemente creamos una nueva matriz, desde el principio hasta el índice que queremos eliminar, y concatenamos otra matriz desde la primera posición que sigue a la que eliminamos hasta el final de la matriz.

Si conoces el valor

En este caso, una buena opción es usar filter(), que ofrece un enfoque más declarativo :

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(item => item !== valueToRemove)

console.log(filteredItems)

Utiliza las funciones de flecha de ES6. Puede utilizar las funciones tradicionales para admitir navegadores más antiguos:

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(function(item) {
  return item !== valueToRemove
})

console.log(filteredItems)

o puede usar Babel y transpilar el código ES6 de nuevo a ES5 para hacerlo más digerible para los navegadores antiguos, pero escribir JavaScript moderno en su código.

Eliminar varios elementos

¿Qué sucede si en lugar de un solo elemento, desea eliminar muchos elementos?

Busquemos la solución más simple.

Por índice

Puede simplemente crear una función y eliminar elementos en serie:

const items = ['a', 'b', 'c', 'd', 'e', 'f']

const removeItem = (items, i) =>
  items.slice(0, i-1).concat(items.slice(i, items.length))

let filteredItems = removeItem(items, 3)
filteredItems = removeItem(filteredItems, 5)
//["a", "b", "c", "d"]

console.log(filteredItems)

Por valor

Puede buscar la inclusión dentro de la función de devolución de llamada:

const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valuesToRemove = ['c', 'd']
const filteredItems = items.filter(item => !valuesToRemove.includes(item))
// ["a", "b", "e", "f"]

console.log(filteredItems)

Evite mutar la matriz original

splice()(no confundir con slice()) muta la matriz original y debe evitarse.

(publicado originalmente en mi sitio https://flaviocopes.com/how-to-remove-item-from-array/ )

0
76

Mira este código. Funciona en todos los navegadores principales .

remove_item = function(arr, value) {
 var b = '';
 for (b in arr) {
  if (arr[b] === value) {
   arr.splice(b, 1);
   break;
  }
 }
 return arr;
};

var array = [1,3,5,6,5,9,5,3,55]
var res = remove_item(array,5);
console.log(res)
2
  • 4
    @RolandIllig Excepto el uso de un for inbucle y el hecho de que el script podría detenerse antes, devolviendo el resultado del bucle directamente. Los votos a favor son razonables;)yckart 30/12/14 a las 16:13
  • 1
    También debería reiterar el comentario de yckart que for( i = 0; i < arr.length; i++ )sería un mejor enfoque, ya que conserva los índices exactos frente al orden en el que el navegador decida almacenar los elementos (con for in). Hacerlo también le permite obtener el índice de matriz de un valor si lo necesita. Beejor 21/08/2016 a las 23:20
63

ES6 y sin mutación: (octubre de 2016)

const removeByIndex = (list, index) =>
      [
        ...list.slice(0, index),
        ...list.slice(index + 1)
      ];
         
output = removeByIndex([33,22,11,44],1) //=> [33,11,44]
      
console.log(output)
2
  • 2
    ¿Por qué no usarlo filterentonces? array.filter((_, index) => index !== removedIndex);. Sebastian Simon 7 abr.20 a las 18:30
  • @ user4642212 ¡tienes razón! Además, me gustó el subrayado del estilo GolangAbdennour TOUMI 7 abr.20 a las 20:37
61

Puede usar lodash _.pull (matriz mutada ), _.pullAt (matriz mutada ) o _.without (no muta matriz),

var array1 = ['a', 'b', 'c', 'd']
_.pull(array1, 'c')
console.log(array1) // ['a', 'b', 'd']

var array2 = ['e', 'f', 'g', 'h']
_.pullAt(array2, 0)
console.log(array2) // ['f', 'g', 'h']

var array3 = ['i', 'j', 'k', 'l']
var newArray = _.without(array3, 'i') // ['j', 'k', 'l']
console.log(array3) // ['i', 'j', 'k', 'l']
3
  • 2
    Ese no es el núcleo JS como lo solicitó el OP, ¿verdad? some-non-descript-user 24/09/15 a las 21:01
  • 12
    @ some-non-descript-user Tiene razón. Pero muchos usuarios como yo vienen aquí buscando una respuesta general, no solo para el OP. Chun Yang 1 oct 2015 a las 3:38
  • @ChunYang Tienes toda la razón. Ya estoy usando lodash, ¿por qué no usarlo si me ahorra tiempo? int-i 8 de junio de 2018 a las 21:48
61

La eliminación de un elemento / cadena en particular de una matriz se puede hacer en una sola línea:

theArray.splice(theArray.indexOf("stringToRemoveFromArray"), 1);

dónde:

theArray : la matriz de la que desea eliminar algo en particular

stringToRemoveFromArray : la cadena que desea eliminar y 1 es la cantidad de elementos que desea eliminar.

NOTA : Si "stringToRemoveFromArray" no se encuentra en la matriz, esto eliminará el último elemento de la matriz.

Siempre es una buena práctica verificar primero si el elemento existe en su matriz, antes de eliminarlo.

if (theArray.indexOf("stringToRemoveFromArray") >= 0){
   theArray.splice(theArray.indexOf("stringToRemoveFromArray"), 1);
}

Dependiendo de si tiene una versión más nueva o más antigua de Ecmascript ejecutándose en las computadoras de su cliente:

var array=['1','2','3','4','5','6']
var newArray = array.filter((value)=>value!='3');

O

var array = ['1','2','3','4','5','6'];
var newArray = array.filter(function(item){ return item !== '3' });

Donde '3' es el valor que desea eliminar de la matriz. La matriz se convertiría entonces en:['1','2','4','5','6']

2
  • 1
    Esta es la respuesta que funcionó para mí al intentar actualizar una matriz basada en la alternancia de botones de radio. jdavid05 3/04/19 a las 11:52
  • 6
    Tenga cuidado, si "stringToRemoveFromArray"no se encuentra en su matriz, esto eliminará el último elemento de la matriz. Fusion 6/04/19 a las 23:35
54

Rendimiento

Hoy (2019-12-09) realizo pruebas de rendimiento en macOS v10.13.6 (High Sierra) para las soluciones elegidas. Muestro delete(A), pero no lo uso en comparación con otros métodos, porque dejó un espacio vacío en la matriz.

Las conclusiones

  • la solución más rápida es array.splice(C) (excepto Safari para arreglos pequeños donde tiene la segunda vez)
  • para arreglos grandes, array.slice+splice(H) es la solución inmutable más rápida para Firefox y Safari; Array.from(B) es más rápido en Chrome
  • Las soluciones mutables suelen ser entre 1,5 y 6 veces más rápidas que las inmutables.
  • para mesas pequeñas en Safari, sorprendentemente la solución mutable (C) es más lenta que la solución inmutable (G)

Detalles

En las pruebas, elimino el elemento del medio de la matriz de diferentes maneras. Las soluciones A, C están en su lugar. Las soluciones B, D, E, F, G, H son inmutables.

Resultados de una matriz con 10 elementos

Ingrese la descripción de la imagen aquí

En Chrome, la array.splice(C) es la solución local más rápida. La array.filter(D) es la solución inmutable más rápida. El más lento es array.slice(F). Puede realizar la prueba en su máquina aquí .

Resultados para una matriz con 1.000.000 de elementos

Ingrese la descripción de la imagen aquí

En Chrome, la array.splice(C) es la solución local más rápida (la delete(C) es similar rápida, pero dejó una ranura vacía en la matriz (por lo que no realiza una 'eliminación completa')). La array.slice-splice(H) es la solución inmutable más rápida. El más lento es array.filter(D y E). Puede realizar la prueba en su máquina aquí .

var a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var log = (letter,array) => console.log(letter, array.join `,`);

function A(array) {
  var index = array.indexOf(5);
  delete array[index];
  log('A', array);
}

function B(array) {
  var index = array.indexOf(5);
  var arr = Array.from(array);
  arr.splice(index, 1)
  log('B', arr);
}

function C(array) {
  var index = array.indexOf(5);
  array.splice(index, 1);
  log('C', array);
}

function D(array) {
  var arr = array.filter(item => item !== 5)
  log('D', arr);
}

function E(array) {
  var index = array.indexOf(5);
  var arr = array.filter((item, i) => i !== index)
  log('E', arr);
}

function F(array) {
  var index = array.indexOf(5);
  var arr = array.slice(0, index).concat(array.slice(index + 1))
  log('F', arr);
}

function G(array) {
  var index = array.indexOf(5);
  var arr = [...array.slice(0, index), ...array.slice(index + 1)]
  log('G', arr);
}

function H(array) {
  var index = array.indexOf(5);
  var arr = array.slice(0);
  arr.splice(index, 1);
  log('H', arr);
}

A([...a]);
B([...a]);
C([...a]);
D([...a]);
E([...a]);
F([...a]);
G([...a]);
H([...a]);
This snippet only presents code used in performance tests - it does not perform tests itself.

Comparación para navegadores: Chrome v78.0.0, Safari v13.0.4 y Firefox v71.0.0

Ingrese la descripción de la imagen aquí

47

De acuerdo, por ejemplo, tiene la siguiente matriz:

var num = [1, 2, 3, 4, 5];

Y queremos eliminar el número 4. Simplemente puede usar el siguiente código:

num.splice(num.indexOf(4), 1); // num will be [1, 2, 3, 5];

Si está reutilizando esta función, escriba una función reutilizable que se adjuntará a la función de matriz nativa como se muestra a continuación:

Array.prototype.remove = Array.prototype.remove || function(x) {
  const i = this.indexOf(x);
  if(i===-1)
      return;
  this.splice(i, 1); // num.remove(5) === [1, 2, 3];
}

Pero, ¿qué tal si tiene la siguiente matriz en su lugar con algunos [5] s en la matriz?

var num = [5, 6, 5, 4, 5, 1, 5];

Necesitamos un bucle para verificarlos todos, pero una forma más fácil y eficiente es usar funciones de JavaScript integradas, por lo que escribimos una función que usa un filtro como el siguiente:

const _removeValue = (arr, x) => arr.filter(n => n!==x);
//_removeValue([1, 2, 3, 4, 5, 5, 6, 5], 5) // Return [1, 2, 3, 4, 6]

También hay bibliotecas de terceros que le ayudan a hacer esto, como Lodash o Underscore. Para obtener más información, consulte lodash _.pull, _.pullAt o _.without.

0
42

Soy bastante nuevo en JavaScript y necesitaba esta funcionalidad. Simplemente escribí esto:

function removeFromArray(array, item, index) {
  while((index = array.indexOf(item)) > -1) {
    array.splice(index, 1);
  }
}

Luego, cuando quiera usarlo:

//Set-up some dummy data
var dummyObj = {name:"meow"};
var dummyArray = [dummyObj, "item1", "item1", "item2"];

//Remove the dummy data
removeFromArray(dummyArray, dummyObj);
removeFromArray(dummyArray, "item2");

Salida: como se esperaba. ["elemento1", "elemento1"]

Es posible que tenga necesidades diferentes a las mías, por lo que puede modificarlo fácilmente para adaptarlo a ellas. Espero que esto ayude a alguien.

2
  • 2
    Esto tendrá un comportamiento terrible si su matriz es muy larga y hay varias instancias del elemento en ella. El método indexOf de la matriz comenzará al principio cada vez, por lo que su costo será O (n ^ 2). Zag 24 de mayo de 2019 a las 18:22
  • @Zag: Tiene un nombre: Algoritmo de Shlemiel el PintorPeter Mortensen 1 de septiembre de 2019 a las 22:11
39

Si tiene objetos complejos en la matriz, ¿puede usar filtros? En situaciones en las que $ .inArray o array.splice no son tan fáciles de usar. Especialmente si los objetos son quizás poco profundos en la matriz.

Por ejemplo, si tiene un objeto con un campo Id y desea que el objeto se elimine de una matriz:

this.array = this.array.filter(function(element, i) {
    return element.id !== idToRemove;
});
1
  • Así es como me gusta hacerlo. Usando una función de flecha, puede ser una línea. Tengo curiosidad por el rendimiento. Tampoco vale la pena que esto reemplace la matriz. Cualquier código con una referencia a la matriz anterior no notará el cambio. joeytwiddle 29/07/2016 a las 8:50
38

Actualización: este método se recomienda solo si no puede usar ECMAScript 2015 (anteriormente conocido como ES6). Si puede usarlo, otras respuestas aquí brindan implementaciones mucho más ordenadas.


Esta esencia aquí resolverá su problema y también eliminará todas las apariciones del argumento en lugar de solo 1 (o un valor especificado).

Array.prototype.destroy = function(obj){
    // Return null if no objects were found and removed
    var destroyed = null;

    for(var i = 0; i < this.length; i++){

        // Use while-loop to find adjacent equal objects
        while(this[i] === obj){

            // Remove this[i] and store it within destroyed
            destroyed = this.splice(i, 1)[0];
        }
    }

    return destroyed;
}

Uso:

var x = [1, 2, 3, 3, true, false, undefined, false];

x.destroy(3);         // => 3
x.destroy(false);     // => false
x;                    // => [1, 2, true, undefined]

x.destroy(true);      // => true
x.destroy(undefined); // => undefined
x;                    // => [1, 2]

x.destroy(3);         // => null
x;                    // => [1, 2]
0
38

Quiero responder basándome en ECMAScript 6 . Suponga que tiene una matriz como la siguiente:

let arr = [1,2,3,4];

Si desea eliminar en un índice especial como 2, escriba el siguiente código:

arr.splice(2, 1); //=> arr became [1,2,4]

Pero si desea eliminar un elemento especial como 3y no conoce su índice, haga lo siguiente:

arr = arr.filter(e => e !== 3); //=> arr became [1,2,4]

Sugerencia : utilice una función de flecha para la devolución de llamada de filtro a menos que obtenga una matriz vacía.

0
38

Actualización de ES10

Esta publicación resume los enfoques comunes para la eliminación de elementos de una matriz a partir de ECMAScript 2019 (ES10).

1. Casos generales

1.1. Eliminando el elemento Array por valor usando.splice()

| En el lugar : Sí |
| Elimina duplicados : Sí (bucle), No (indexOf) |
| Por valor / índice : Por índice |

Si conoce el valor que desea eliminar de una matriz, puede usar el método de empalme. Primero, debe identificar el índice del elemento de destino. Luego, usa el índice como elemento de inicio y elimina solo un elemento.

// With a 'for' loop
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
for( let i = 0; i < arr.length; i++){
  if ( arr[i] === 5) {
    arr.splice(i, 1);
  }
} // => [1, 2, 3, 4, 6, 7, 8, 9, 0]

// With the .indexOf() method
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
const i = arr.indexOf(5);
arr.splice(i, 1); // => [1, 2, 3, 4, 6, 7, 8, 9, 0]

1.2. Eliminando el elemento Array usando el .filter()método

| En el lugar : No |
| Elimina duplicados : Sí |
| Por valor / índice : Por valor |

El elemento específico se puede filtrar de la matriz proporcionando una función de filtrado. A continuación, se llama a dicha función para cada elemento de la matriz.

const value = 3
let arr = [1, 2, 3, 4, 5, 3]
arr = arr.filter(item => item !== value)
console.log(arr)
// [ 1, 2, 4, 5 ]

1.3. Eliminando el elemento Array extendiendoArray.prototype

| En el lugar : Sí / No (Depende de la implementación) |
| Elimina duplicados : Sí / No (Depende de la implementación) |
| Por valor / índice : Por índice / Por valor (Depende de la implementación) |

El prototipo de Array se puede ampliar con métodos adicionales. Estos métodos estarán disponibles para su uso en matrices creadas.

Nota: Algunos consideran que extender prototipos de objetos de la biblioteca estándar de JavaScript (como Array) es un antipatrón.

// In-place, removes all, by value implementation
Array.prototype.remove = function(item) {
    for (let i = 0; i < this.length; i++) {
        if (this[i] === item) {
            this.splice(i, 1);
        }
    }
}
const arr1 = [1,2,3,1];
arr1.remove(1) // arr1 equals [2,3]

// Non-stationary, removes first, by value implementation
Array.prototype.remove = function(item) {
    const arr = this.slice();
    for (let i = 0; i < this.length; i++) {
        if (arr[i] === item) {
            arr.splice(i, 1);
            return arr;
        }
    }
    return arr;
}
let arr2 = [1,2,3,1];
arr2 = arr2.remove(1) // arr2 equals [2,3,1]

1.4. Eliminando el elemento Array usando el deleteoperador

| En el lugar : Sí |
| Elimina duplicados : No |
| Por valor / índice : Por índice |

El uso del operador de eliminación no afecta la propiedad de longitud. Tampoco afecta los índices de elementos posteriores. La matriz se vuelve escasa, lo que es una forma elegante de decir que el elemento eliminado no se elimina sino que se vuelve indefinido.

const arr = [1, 2, 3, 4, 5, 6];
delete arr[4]; // Delete element with index 4
console.log( arr ); // [1, 2, 3, 4, undefined, 6]

El operador de eliminación está diseñado para eliminar propiedades de los objetos de JavaScript, cuyas matrices son objetos.

1.5. Eliminando el elemento Array usando Objectutilidades (> = ES10)

| En el lugar : No |
| Elimina duplicados : Sí |
| Por valor / índice : Por valor |

Se introdujo ES10 Object.fromEntries, que se puede usar para crear la matriz deseada a partir de cualquier objeto similar a una matriz y filtrar elementos no deseados durante el proceso.

const object = [1,2,3,4];
const valueToRemove = 3;
const arr = Object.values(Object.fromEntries(
  Object.entries(object)
  .filter(([ key, val ]) => val !== valueToRemove)
));
console.log(arr); // [1,2,4]

2. Casos especiales

2.1 Eliminar elemento si está al final de la matriz

2.1.1. Cambio de matrizlength

| En el lugar : Sí |
| Elimina duplicados : No |
| Por valor / índice : N / A |

Los elementos de JavaScript Array se pueden eliminar del final de una matriz estableciendo la propiedad length en un valor menor que el valor actual. Se eliminará cualquier elemento cuyo índice sea mayor o igual que la nueva longitud.

const arr = [1, 2, 3, 4, 5, 6];
arr.length = 5; // Set length to remove element
console.log( arr ); // [1, 2, 3, 4, 5]
2.1.2. Usando el .pop()método

| En el lugar : Sí |
| Elimina duplicados : No |
| Por valor / índice : N / A |

El método pop elimina el último elemento de la matriz, devuelve ese elemento y actualiza la propiedad de longitud. El método pop modifica la matriz en la que se invoca. Esto significa que, a diferencia de eliminar, el último elemento se elimina por completo y la longitud de la matriz se reduce.

const arr = [1, 2, 3, 4, 5, 6];
arr.pop(); // returns 6
console.log( arr ); // [1, 2, 3, 4, 5]

2.2. Eliminando elemento si está al comienzo de la matriz

| En el lugar : Sí |
| Elimina duplicados : No |
| Por valor / índice : N / A |

El .shift()método funciona de manera muy similar al método pop, excepto que elimina el primer elemento de una matriz de JavaScript en lugar del último. Cuando se quita el elemento, los elementos restantes se desplazan hacia abajo.

const arr = [1, 2, 3, 4];
arr.shift(); // returns 1
console.log( arr ); // [2, 3, 4]

2.3. Eliminar elemento si es el único elemento en la matriz

| En el lugar : Sí |
| Elimina duplicados : N / A |
| Por valor / índice : N / A |

La técnica más rápida es establecer una variable de matriz en una matriz vacía.

let arr = [1];
arr = []; //empty array

Alternativamente, se puede utilizar la técnica de 2.1.1 estableciendo la longitud en 0.

33

Nunca debes mutar tu matriz. Ya que esto va en contra del patrón de programación funcional. Puede crear una nueva matriz sin hacer referencia a la matriz cuyos datos desea cambiar utilizando el método ECMAScript 6 filter;

var myArray = [1, 2, 3, 4, 5, 6];

Suponga que desea eliminar 5de la matriz, simplemente puede hacerlo así:

myArray = myArray.filter(value => value !== 5);

Esto le dará una nueva matriz sin el valor que quería eliminar. Entonces el resultado será:

 [1, 2, 3, 4, 6]; // 5 has been removed from this array

Para una mayor comprensión, puede leer la documentación de MDN en Array.filter .

31

Puede hacer un bucle hacia atrás para asegurarse de no estropear los índices, si hay varias instancias del elemento.

var myElement = "chocolate";
var myArray = ['chocolate', 'poptart', 'poptart', 'poptart', 'chocolate', 'poptart', 'poptart', 'chocolate'];

/* Important code */
for (var i = myArray.length - 1; i >= 0; i--) {
  if (myArray[i] == myElement) myArray.splice(i, 1);
}
console.log(myArray);

Demo en vivo

29

Un enfoque ECMAScript 2015 más moderno (anteriormente conocido como Harmony o ES 6). Dado:

const items = [1, 2, 3, 4];
const index = 2;

Luego:

items.filter((x, i) => i !== index);

Flexible:

[1, 2, 4]

Puede utilizar Babel y un servicio de polyfill para asegurarse de que sea compatible con todos los navegadores.

5
  • 4
    Tenga en cuenta que .filterdevuelve una nueva matriz, que no es exactamente lo mismo que eliminar el elemento de la misma matriz. El beneficio de este enfoque es que puede encadenar métodos de matriz. por ejemplo:[1,2,3].filter(n => n%2).map(n => n*n) === [ 1, 9 ]CodeOcelot 6 de mayo de 2016 a las 18:58
  • Genial, si tengo 600k elementos en una matriz y quiero eliminar los primeros 50k, ¿te imaginas esa lentitud? Esta no es la solución, se necesita una función que simplemente elimine elementos y no devuelva nada. dev1223 30 de mayo de 2016 a las 15:11
  • @Seraph Para eso, probablemente quieras usar spliceo slice. bjfletcher 31 de mayo de 2016 a las 22:04
  • @bjfletcher Eso es aún mejor, en proceso de eliminación, solo asigne 50K elementos y tírelos a alguna parte. (con cortes de 550K elementos, pero sin tirarlos por la ventana). dev1223 31 de mayo de 2016 a las 23:06
  • Preferiría la respuesta de bjfletcher, que podría ser tan corta como items= items.filter(x=>x!=3). Además, el OP no estableció ningún requisito para un gran conjunto de datos. runsun 27 de agosto de 2016 a las 1:55
28

Tiene de 1 a 9 en la matriz y desea eliminar 5. Utilice el siguiente código:

var numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

var newNumberArray = numberArray.filter(m => {
  return m !== 5;
});

console.log("new Array, 5 removed", newNumberArray);

Si desea varios valores. Ejemplo: - 1,7,8

var numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

var newNumberArray = numberArray.filter(m => {
  return (m !== 1) && (m !== 7) && (m !== 8);
});

console.log("new Array, 1,7 and 8 removed", newNumberArray);

Si desea eliminar un valor de matriz en una matriz. Ejemplo: [3,4,5]

var numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var removebleArray = [3,4,5];

var newNumberArray = numberArray.filter(m => {
    return !removebleArray.includes(m);
});

console.log("new Array, [3,4,5] removed", newNumberArray);

Incluye navegador compatible es enlace .