splice用法 - 如何從JavaScript中刪除數組中的特定元素?




js splice (20)

我有一個整數數組,我正在使用.push()方法向其中添加元素。

有沒有一種簡單的方法從數組中刪除特定元素? 相當於像array.remove(int);

我必須使用核心 JavaScript - 不允許使用框架。

https://code.i-harness.com


ES6和無突變:( 2016年10月)

const removeByIndex = (list, index) =>
  [
    ...list.slice(0, index),
    ...list.slice(index + 1)
  ];

然後 :

removeByIndex([33,22,11,44],1) //=> [33,11,44]

編輯於2016年10月

在這個代碼示例中,我使用“array.filter(...)”函數從數組中刪除不需要的項,此函數不會更改原始數組並創建新數組。 如果您的瀏覽器不支持此功能(例如版本9之前的IE或版本1.5之前的Firefox),請考慮使用Mozilla中的過濾器polyfill

刪除項目(ECMA-262 Edition 5 code aka 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 ]

刪除項目(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 ]

重要事項 ES2015“()=> {}”IE中根本不支持箭頭功能語法,Chrome版本為45版本,Firefox版本為22版本,Safari版本為10版本。 要在舊瀏覽器中使用ES2015語法,您可以使用BabelJS

刪除多個項目(ES2016代碼)

此方法的另一個優點是您可以刪除多個項目

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 ]

重要信息 IE中根本不支持“array.includes(...)”功能,47版本之前的Chrome版本,43版本之前的Firefox版本,9版本之前的Safari版本以及14版本之前的Edge版本所以這裡是來自Mozilla的polyfill

刪除多個項目(尖端實驗性JavaScript ES2018?)

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

在BabelJS中自己嘗試:)

參考


Underscore.js可用於解決多個瀏覽器的問題。 它使用內置瀏覽器方法(如果存在)。 如果它們不存在,就像舊的Internet Explorer版本一樣,它使用自己的自定義方法。

從數組中刪除元素的簡單示例(來自網站):

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1); // => [2, 3, 4]

好的,例如你有以下數組:

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

我們想刪除4號,你可以簡單地做下面的代碼:

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

如果重新使用此函數,則編寫一個可重用的函數,該函數將附加到Native數組函數,如下所示:

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

但是,如果您使用下面的數組而不是數組中的[5] s,那怎麼樣?

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

我們需要一個循環來檢查所有這些,但更容易和更有效的方法是使用內置的JavaScript函數,所以我們編寫一個使用過濾器的函數,如下所示:

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]

還有第三方庫可以幫助你做這些,比如Lodash或Underscore,有關更多信息,請查看lodash _.pull,_.pullAt或_.without。


一位朋友在Internet Explorer 8遇到問題,並向我展示了他的所作所為。 我告訴他這是錯的,他告訴我他在這裡得到了答案。 當前的最佳答案不適用於所有瀏覽器(例如​​Internet Explorer 8),它只會刪除第一次出現的項目。

從數組中刪除所有實例

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

它向後循環遍歷數組(因為索引和長度將隨著項目的移除而改變)並刪除項目(如果已找到)。 它適用於所有瀏覽器。


以下是使用JavaScript從數組中刪除項目的幾種方法。

所描述的所有方法都不會改變原始數組 ,而是創建一個新數組

如果您知道項目的索引

假設您有一個數組,並且想要移除位置i中的項目。

一種方法是使用slice()

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

console.log(filteredItems)

slice()使用它接收的索引創建一個新數組。 我們只是創建一個新數組,從開始到我們想要刪除的索引,並從我們刪除的數據到數組末尾之後的第一個位置連接另一個數組。

如果你知道價值

在這種情況下,一個不錯的選擇是使用filter() ,它提供了更具說明性的方法:

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

console.log(filteredItems)

這使用ES6箭頭功能。 您可以使用傳統功能來支持舊版瀏覽器:

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

console.log(filteredItems)

或者您可以使用Babel並將ES6代碼轉發回ES5,使其更易於瀏覽舊瀏覽器,同時在代碼中編寫現代JavaScript。

刪除多個項目

如果不是單個項目,您想要刪除多個項目,該怎麼辦?

讓我們找到最簡單的解決方案。

按索引

您只需創建一個函數並刪除系列中的項目:

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)

按價值

您可以在回調函數中搜索包含:

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)

避免改變原始數組

splice() (不要與slice()混淆)改變原始數組,應該避免。

(最初發佈於https://flaviocopes.com/how-to-remove-item-from-array/


你有1到9個數組,你想刪除5使用下面的代碼。

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

如果你想要多個值ex: - 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, 5 removed", newNumberArray);

如果要刪除數組ex中的數組值: - [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);

包括支持的瀏覽器是link


你永遠不應該在你的數組中改變你的數組。 因為這是針對功能編程模式的。 你可以做的是創建一個新的數組,而不引用你想要使用es6方法filter更改數據的數組;

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

假設您要從數組中刪除5 ,您可以像這樣簡單地執行此操作。

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

這將為您提供一個沒有您想要刪除的值的新數組。 結果將是

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

為了進一步理解,您可以閱讀Array.filter上的MDN文檔filter


基於所有主要正確的答案並考慮到建議的最佳實踐(特別是不直接使用Array.prototype),我想出了以下代碼:

function arrayWithout(arr, values) {
  var isArray = function(canBeArray) {
    if (Array.isArray) {
      return Array.isArray(canBeArray);
    }
    return Object.prototype.toString.call(canBeArray) === '[object Array]';
  };

  var excludedValues = (isArray(values)) ? values : [].slice.call(arguments, 1);
  var arrCopy = arr.slice(0);

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

  return arrCopy;
}

回顧上述功能,儘管它工作正常,但我意識到可能會有一些性能提升。使用ES6而不是ES5也是一種更好的方法。為此,這是改進的代碼:

const arrayWithoutFastest = (() => {
  const isArray = canBeArray => ('isArray' in Array) 
    ? Array.isArray(canBeArray) 
    : Object.prototype.toString.call(canBeArray) === '[object Array]';

  let mapIncludes = (map, key) => map.has(key);
  let objectIncludes = (obj, key) => key in obj;
  let includes;

  function arrayWithoutFastest(arr, ...thisArgs) {
    let withoutValues = isArray(thisArgs[0]) ? thisArgs[0] : thisArgs;

    if (typeof Map !== 'undefined') {
      withoutValues = withoutValues.reduce((map, value) => map.set(value, value), new Map());
      includes = mapIncludes;
    } else {
      withoutValues = withoutValues.reduce((map, value) => { map[value] = value; return map; } , {}); 
      includes = objectIncludes;
    }

    const arrCopy = [];
    const length = arr.length;

    for (let i = 0; i < length; i++) {
      // If value is not in exclude list
      if (!includes(withoutValues, arr[i])) {
        arrCopy.push(arr[i]);
      }
    }

    return arrCopy;
  }

  return arrayWithoutFastest;  
})();

如何使用:

const arr = [1,2,3,4,5,"name", false];

arrayWithoutFastest(arr, 1); // will return array [2,3,4,5,"name", false]
arrayWithoutFastest(arr, 'name'); // will return [2,3,4,5, false]
arrayWithoutFastest(arr, false); // will return [2,3,4,5]
arrayWithoutFastest(arr,[1,2]); // will return [3,4,5,"name", false];
arrayWithoutFastest(arr, {bar: "foo"}); // will return the same array (new copy)

我目前正在撰寫一篇博文,其中我對Array的幾個解決方案進行了基準測試,沒有遇到任何問題,並比較了運行所需的時間。完成該帖後,我將使用鏈接更新此答案。只是為了讓你知道,我已經將上面的內容與lodash的內容進行了比較,如果瀏覽器不支持Map,它就勝過了lodash!請注意,我沒有使用Array.prototype.indexOfArray.prototype.includes包含exlcudeValues MapObject更快地查詢!(https://jsperf.com/array-without-benchmark-against-lodash


太老了回复,但可能通過提供謂詞而不是值來幫助某人。

注意:它將更新給定的數組,並返回受影響的行

用法

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

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

定義

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

如果要刪除已刪除位置的新數組,可以始終刪除特定元素並過濾掉數組。 對於沒有實現過濾方法的瀏覽器,可能需要對數組對象進行擴展,但從長遠來看,它更容易,因為你所做的只是:

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

應該顯示[1, 2, 3, 4, 6]


如果陣列中有復雜對象,可以使用過濾器嗎? 在$ .inArray或array.splice不那麼容易使用的情況下。 特別是如果對像在數組中可能很淺。

例如,如果您有一個帶有Id字段的對象,並且您希望從數組中刪除該對象:

this.array = this.array.filter(function(element, i) {
    return element.id !== idToRemove;
});

您可以使用ES6。

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

輸出:

["1", "2", "4", "5", "6"]

我不知道你期望array.remove(int)如何表現。 我可以想到你可能想要的三種可能性。

要在索引i處刪除數組的元素:

array.splice(i, 1);

如果要從數組中刪除具有值number每個元素:

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

如果您只想使索引i處的元素不再存在,但您不希望其他元素的索引發生更改:

delete array[i];

我還有另一個從數組中刪除的好方法:

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

filter


找到要刪除的數組元素的index ,然後使用splice刪除該索引。

splice()方法通過刪除現有元素和/或添加新元素來更改數組的內容。

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

splice的第二個參數是要刪除的元素數。 請注意, splice會修改數組並返回一個包含已刪除元素的新數組。

注意對indexOf的瀏覽器支持有限; Internet Explorer 7和8不支持它。

如果您在不受支持的瀏覽器中需要indexOf ,請嘗試以下polyfill在此處查找有關此polyfill更多信息。

Array.prototype.indexOf || (Array.prototype.indexOf = function(d, e) {
    var a;
    if (null == this) throw new TypeError('"this" is null or not defined');
    var c = Object(this),
        b = c.length >>> 0;
    if (0 === b) return -1;
    a = +e || 0;
    Infinity === Math.abs(a) && (a = 0);
    if (a >= b) return -1;
    for (a = Math.max(0 <= a ? a : b - Math.abs(a), 0); a < b;) {
        if (a in c && c[a] === d) return a;
        a++
    }
    return -1
});

有兩種主要方法:

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

  2. 刪除delete anArray[index];

對數組使用delete時要小心。 刪除對象的屬性很好,但對數組不太好。 最好將splice用於數組。

請記住,當您對數組使用delete時, anArray.length可能會得到錯誤的結果。 換句話說, delete將刪除元素但不會更新length屬性的值。

使用刪除後,您還可能會在索引號中出現漏洞,例如,您最終可能會使用刪除之前的索引1,3,4,8,9,11和長度。 在這種情況下,所有索引for循環都會崩潰,因為索引不再是順序的。

如果由於某種原因被迫使用delete ,那麼當需要循環遍歷數組時,應該使用for each循環。 事實上,如果可能的話,總是避免使用索引for循環。 這樣,代碼將更加健壯,並且不易出現索引問題。


無需使用indexOfsplice 。 但是,如果您只想刪除一個元素,它會表現得更好。

查找並移動(移動):

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

使用indexOfsplice (indexof):

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

僅使用splice (拼接):

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

nodejs上運行時間為1000個元素(平均超過10000次運行)的數組:

indexof移動慢大約10倍。 即使通過在splice中刪除對indexOf的調用來改進它,它也比移動更糟糕。

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

我知道已有很多答案,但其中許多似乎使問題複雜化。這是一種刪除鍵的所有實例的簡單遞歸方法 - 調用self直到找不到索引。是的,它只能在瀏覽器中使用indexOf,但它很簡單,可以很容易地填充。

獨立功能

function removeAll(array, key){
    var index = array.indexOf(key);

    if(index === -1) return;

    array.splice(index, 1);
    removeAll(array,key);
}

原型方法

Array.prototype.removeAll = function(key){
    var index = this.indexOf(key);

    if(index === -1) return;

    this.splice(index, 1);
    this.removeAll(key);
}

  Array.prototype.removeItem = function(a) {
            for (i = 0; i < this.length; i++) {
                if (this[i] == a) {
                    for (i2 = i; i2 < this.length - 1; i2++) {
                        this[i2] = this[i2 + 1];
                    }
                    this.length = this.length - 1
                    return;
                }
            }
        }

    var recentMovies = ['Iron Man', 'Batman', 'Superman', 'Spiderman'];
    recentMovies.removeItem('Superman');




arrays