Remove Elements From A JavaScript Array

Posted in :

2023-02-09

Javascript 裡 array 常見操作:

.push() 新增 array.
.slice() 插入一個或多個項目到特定 index, 也可以刪除特定 index.
.pop() 只刪最後一個.

進階地刪除 array 裡的內容, 有這幾個作法:

// set length to remove elements

    var ar = [1, 2, 3, 4, 5, 6];
    ar.length = 4; 
    console.log( ar ); // [1, 2, 3, 4]

// Splice,
// Starting at index position 0, remove two elements [“bar”, “baz”] and retains [“foo”, “qux”].

    var list = ["bar", "baz", "foo", "qux"];
    
    list.splice(0, 2);

樓上的進階應用:

Removing Array Items By Value Using Splice

    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
    
    for( var i = 0; i < arr.length; i++){ 
                                   
        if ( arr[i] === 5) { 
            arr.splice(i, 1); 
            i--; 
        }
    }

// Array filter
https://stackoverflow.com/questions/5767325/how-can-i-remove-a-specific-item-from-an-array-in-javascript

Removing item (ECMA-262 Edition 5 code AKA old style JavaScript)

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 ]

Removing item (ECMAScript 6 code)

let value = 3

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

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

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

IMPORTANT ECMAScript 6 () => {} arrow function syntax is not supported in Internet Explorer at all, Chrome before version 45, Firefox before version 22, and Safari before version 10. To use ECMAScript 6 syntax in old browsers you can use BabelJS.

Removing multiple items (ECMAScript 7 code)

An additional advantage of this method is that you can remove multiple items

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 ]

IMPORTANT array.includes(...) function is not supported in Internet Explorer at all, Chrome before version 47, Firefox before version 43, Safari before version 9, and Edge before version 14 but you can polyfill with core-js.

Removing multiple items (in the future, maybe)

If the “This-Binding Syntax” proposal is ever accepted, you’ll be able to do this:

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

進階應用:

    function arrayRemove(arr, value) { 
    
        return arr.filter(function(ele){ 
            return ele != value; 
        });
    }
    
    var result = arrayRemove(array, 6);
    // result = [1, 2, 3, 4, 5, 7, 8, 9, 0]

// delete

    var ar = [1, 2, 3, 4, 5, 6];
    
    delete ar[4]; // delete element with index 4
    
    console.log( ar ); 
    
    // [1, 2, 3, 4, undefined, 6]
    
    alert( ar ); 
    
    // 1,2,3,4,,6

javascript