特定の要素を配列から削除する

このブログ記事では、JavaScriptの配列から特定の要素を削除するために広く使われているバトルテストメソッドのいくつかを見ていきます.

01 . splice ()メソッド
splice ()メソッドは、既存の要素を削除または置換することによって配列の内容を変更します.From MDN Docs.

構文

Array.splice(begin_removal_at_this_index, number_of_elements_to_remove)

返り値
削除された要素を含む配列.

用途

1 .インデックスの削除

var testArr = [1, 2, 3, 4, 5];
const output = testArr.splice(2, 1);
console.log(output); // Outputs [3]
console.log(testArr); // Outputs [1, 2, 4, 5]

2 .値の削除

var testArr = [1, 2, 3, 4, 5];
const val = 3; // Value to remove

for (let i = 0; i < testArr.length; i++) {
    if (testArr[i] === val) {
        const removedElements = testArr.splice(i, 1);
        console.log(removedElements); // Outputs [3]
        i--; // Since the indexes of elements following this index get updated after removal
    }
}

console.log(testArr); // Outputs [1, 2, 4, 5]

02 . filter ()メソッド
filter ()メソッドは、指定した関数によって実装されるテストを渡すすべての要素を持つ新しい配列を作成します.既存の配列を場所に変異させません.From MDN Docs.

構文

Array.filter(callback(value, index, array) { // Boolean expression });

返り値
テストに合格する要素を持つ新しい配列.要素がテストに合格しない場合、空の配列が返されます.

用途

var testArr = [1, 2, 3, 4, 5];
const filterVal = 3; // Value to remove

const filteredElements = testArr.filter(val => (val != filterVal));
console.log(testArr); // Outputs [1, 2, 3, 4, 5]
console.log(filteredElements); // Outputs [1, 2, 4, 5]

03 . Lodashを使用するremove ()メソッド
Lodash人気のJavaScriptユーティリティライブラリです.このソリューションを使用するには、インストールしてインポートする必要があります.
角.remove ()メソッドは、述部がTRUEを返す配列からすべての要素を削除します.From Lodash Docs.

構文

_.remove(array, function(n) {
    return // A boolean expression;
});

返り値
削除された要素の配列を返します.

用途

var testArr = [1, 2, 3, 4, 5];
const filterVal = 3; // Value to remove

const filteredElements = _.remove(testArr, function(elem) {
    return elem === filterVal;
});
console.log(filteredElements); // Outputs [3]
console.log(testArr); // Outputs [1, 2, 4, 5]

04 .配列へのnative remove ()メソッドの追加splice ()メソッドを使用したプロトタイプ
このアプローチをよりよく理解するために.Javascript Object Prototypesとよく知られるべきだ.ただし、単にソリューションを続行することができます.

用途

Array.prototype.remove = function (index) {
    this.splice(index, 1);
};

var testArr = [1, 2, 3, 4, 5];
testArr.remove(2); // This will remove 3
console.log(testArr); // Outputs [1, 2, 4, 5]

It is advised to name the custom methods being added to the object prototypes cautiously, since some external libraries may try to manipulate the object prototype their own way and may conflict with the names of methods added by the user.

Brett JordanのUnsplashによる掩護写真