Pertanyaan Bagaimana cara menghapus elemen tertentu dari larik di JavaScript?


Saya memiliki larik bilangan bulat, dan saya menggunakan .push() metode untuk menambahkan elemen ke dalamnya.

Apakah ada cara sederhana untuk menghapus elemen tertentu dari larik? Setara dengan sesuatu seperti array.remove(int);.

Saya harus menggunakannya inti JavaScript - tidak kerangka kerja diizinkan.


6102
2018-04-23 22:17


asal


Jawaban:


Temukan index dari elemen larik yang ingin Anda hapus, lalu hapus indeks itu dengan splice.

Metode splice () mengubah isi array dengan menghapus   elemen yang ada dan / atau menambahkan elemen baru.

var array = [2, 5, 9];
var index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}
// array = [2, 9]

Parameter kedua dari splice adalah jumlah elemen yang akan dihapus. Perhatikan itu splice memodifikasi larik di tempat dan mengembalikan larik baru berisi elemen yang telah dihapus.


Catatan: dukungan browser untuk indexOf terbatas


8887
2018-04-23 22:23



Saya tidak tahu apa yang Anda harapkan array.remove(int) berperilaku. Ada tiga kemungkinan yang dapat saya pikirkan yang mungkin Anda inginkan.

Untuk menghapus elemen array pada indeks i:

array.splice(i, 1);

Jika Anda ingin menghapus setiap elemen dengan nilai number dari array:

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

Jika Anda hanya ingin membuat elemen pada indeks i tidak ada lagi, tetapi Anda tidak ingin indeks dari elemen lain berubah:

delete array[i];

892
2018-04-23 22:20



Diedit pada 2016 oktober

  • Lakukan itu sederhana, intuitif dan eksplisit (https://en.wikipedia.org/wiki/Occam%27s_razor)
  • Melakukannya tidak berubah (array asli tetap tidak berubah)
  • Lakukan dengan fungsi JS standar, jika browser Anda tidak mendukungnya - gunakan polyfill

Dalam contoh kode ini saya gunakan "array.filter (...)" berfungsi untuk menghapus item yang tidak diinginkan dari array, fungsi ini tidak mengubah array asli dan membuat yang baru. Jika browser Anda tidak mendukung fungsi ini (misalnya IE sebelum versi 9, atau Firefox sebelum versi 1.5), pertimbangkan untuk menggunakan filter polyfill dari Mozilla.

Menghapus item (ECMA-262 Edition 5 kode alias oldstyle JS)

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 ]

Menghapus item (kode ES2015)

let value = 3

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

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

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

PENTING ES2015 "() => {}" sintaks fungsi panah tidak didukung di IE sama sekali, Chrome sebelum versi 45, Firefox sebelum versi 22, Safari sebelum 10 versi. Untuk menggunakan sintaks ES2015 di browser lama yang dapat Anda gunakan BabelJS


Menghapus banyak item (kode ES2016)

Keuntungan tambahan dari metode ini adalah Anda dapat menghapus beberapa item

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 ]

PENTING "array.includes (...)" fungsi tidak didukung di IE sama sekali, Chrome sebelum versi 47, Firefox sebelum versi 43, Safari sebelum versi 9 dan Edge sebelum versi 14 jadi di sini adalah polyfill dari Mozilla

Menghapus beberapa item (Eksperimental mutakhir, ES2018 JavaScript?)

// 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 ]

Coba sendiri di BabelJS :)

Referensi


669
2017-12-19 19:54



Tergantung apakah Anda ingin menyimpan tempat kosong atau tidak.

Jika Anda menginginkan slot kosong, hapus tidak masalah:

delete array[ index ];

Jika tidak, Anda harus menggunakan sambatan metode:

array.splice( index, 1 );

Dan jika Anda membutuhkan nilai dari item itu, Anda bisa menyimpan elemen array yang dikembalikan:

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

Jika Anda ingin melakukannya dalam beberapa urutan, Anda dapat menggunakan array.pop() untuk yang terakhir atau array.shift() untuk yang pertama (dan keduanya mengembalikan nilai barang juga).

Dan jika Anda tidak tahu indeks barang itu, Anda bisa menggunakannya array.indexOf( item ) untuk mendapatkannya (dalam if() untuk mendapatkan satu barang atau dalam satu while() untuk mendapatkan semuanya). array.indexOf( item ) mengembalikan indeks atau -1 jika tidak ditemukan.


357
2018-04-23 22:32



Seorang teman mengalami masalah Internet Explorer 8, dan menunjukkan padaku apa yang dia lakukan. Saya mengatakan kepadanya bahwa itu salah, dan dia memberi tahu saya bahwa dia mendapatkan jawabannya di sini. Jawaban teratas saat ini tidak akan berfungsi di semua browser (Internet Explorer 8 misalnya), dan itu hanya akan menghapus kejadian pertama dari item.

Hapus SEMUA instance dari larik

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

Ini loop melalui array mundur (karena indeks dan panjang akan berubah ketika item dihapus) dan menghapus item jika ditemukan. Ia bekerja di semua browser.


227
2017-08-10 19:21



Ada dua pendekatan utama:

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

  2. menghapus: delete anArray[index];

Hati-hati saat Anda menggunakan delete untuk sebuah array. Ini bagus untuk menghapus atribut objek tetapi tidak begitu baik untuk array. Lebih baik digunakan splice untuk array.

Perlu diingat bahwa ketika Anda menggunakan delete untuk larik, Anda bisa mendapatkan hasil yang salah anArray.length. Dengan kata lain, delete akan menghapus elemen tetapi tidak akan memperbarui nilai properti panjang.

Anda juga dapat berharap memiliki lubang pada nomor indeks setelah menggunakan delete, mis. Anda bisa berakhir dengan memiliki indeks 1,3,4,8,9,11 dan panjang seperti sebelumnya sebelum menghapus. Dalam hal ini, semua diindeks for loop akan crash, karena indeks tidak lagi berurutan.

Jika Anda terpaksa menggunakannya delete untuk beberapa alasan, maka Anda harus menggunakannya for each loop ketika Anda perlu mengulang melalui array. Sebagai soal fakta, selalu hindari menggunakan pengindeksan untuk loop, jika memungkinkan. Dengan cara itu kode akan lebih kuat dan kurang rentan terhadap masalah dengan indeks.


131
2017-12-21 11:32



Array.prototype.remByVal = 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].remByVal(3);

Array.prototype.remByVal = 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.remByVal('hello')

console.log(rooms)


103
2018-04-23 22:20



Tidak perlu digunakan indexOf atau splice. Namun, kinerjanya lebih baik jika Anda hanya ingin menghapus satu kemunculan elemen.

Temukan dan pindahkan (pindah):

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

Menggunakan indexOf dan splice (Indeks):

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

Gunakan saja splice (sambatan):

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

Run-times pada nodejs untuk array dengan 1000 elemen (rata-rata lebih dari 10.000 run):

Indeks kira-kira 10x lebih lambat dari pindah. Bahkan jika ditingkatkan dengan menghapus panggilan ke indexOf di sambatan itu melakukan jauh lebih buruk daripada pindah.

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

82
2017-09-19 01:53



Terlalu tua untuk dibalas, tetapi dapat membantu seseorang, dengan memberikan predikat, bukan nilai.

CATATAN: ini akan memperbarui larik yang diberikan, dan mengembalikan baris yang terpengaruh

Pemakaian

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

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

Definisi

var helper = {

    // Remove and return the first occurrence     

    removeOne: 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  

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

56
2018-05-02 12:00