文字列 JavaScriptの配列から特定の要素を削除するにはどうすればよいですか?




配列 要素 削除 (24)

友人がInternet Explorer 8で問題を抱えていて、彼が何をしたかを教えてくれました。 私はそれが間違っていると彼に言った、そして、彼は私に彼がここで答えを得たと言った。 現在のトップアンサーは、すべてのブラウザ(Internet Explorer 8など)では機能しません。また、アイテムの最初の出現箇所のみが削除されます。

配列からすべてのインスタンスを削除する

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

配列を逆方向にループします(項目が削除されるとインデックスと長さが変化するため)、見つかった場合はその項目を削除します。 それはすべてのブラウザで動作します。

私は整数の配列を持っており、要素を追加するために.push()メソッドを使用しています。

配列から特定の要素を削除する簡単な方法はありますか? array.remove(int);ようなものに相当しarray.remove(int);

コア JavaScriptを使用する必要があります。フレームワークは使用できません


回答に時間がかかりすぎますが、誰かを助けるかもしれませんが、値の代わりに述語を提供してください。

注:指定された配列を更新し、影響を受ける行を返す

使用法

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

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

2016年10月編集

  • シンプルで直感的かつ明示的に行う( https://en.wikipedia.org/wiki/Occam%27s_razor
  • それは不変です(元の配列は変更されません)
  • ブラウザでサポートされていない場合は、標準のJS関数で行います - ポリフィルを使用する

このコード例では、配列から不要な項目を削除するために"array.filter(...)"関数を使用していますが、この関数は元の配列を変更せずに新しい配列を作成します。 ブラウザがこの機能をサポートしていない場合(たとえば、バージョン9より前のIE、バージョン1.5より前のFirefoxなど)は、 Mozillaのフィルタpolyfillの使用を検討してください

アイテムの削除(ECMA-262 Edition 5コード、旧式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 "()=> {}"矢印機能の構文は、Internet Explorerではまったくサポートされていません。Chromeは45より前のバージョン、Firefoxは22より前のバージョン、Safariは10より前のバージョンです。 古いブラウザでES2015の構文を使用するには、 BabelJS

複数のアイテムの削除(ES2016コード)

この方法のもう1つの利点は、複数のアイテムを削除できることです

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 ]

重要 "array.includes(...)"関数はInternet Explorerではまったくサポートされていません。Chromeは47より前のバージョン、Firefoxは43より前のバージョン、Safariは9より前のバージョン、Edgeは14より前のバージョンです。

複数のアイテムを削除する(最新の実験的な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でそれを試してください:)

参照


indexOfまたはspliceを使用する必要はありません。 ただし、要素の1つのオカレンスだけを削除したい場合は、より効果的です。

検索して移動する(移動する):

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

1000要素(平均10000回の実行)の配列に対するnodejsの実行時間:

indexof移動より約10倍遅い。 スプライス内の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

主に正しいすべての回答に基づいて、推奨されたベストプラクティス(特に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;
}

上記の機能を確認しても、うまく動作しているにもかかわらず、パフォーマンスの向上が見られるかもしれません。また、ES5の代わりにES6を使用する方がずっと良い方法です。そのために、これは改善されたコードです:

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のためのいくつかのソリューションをベンチマークし、実行にかかる時間を比較したブログ記事を書いています。私はその投稿を終えると、この回答をリンクで更新します。ちょうどあなたに知らせるために、私は上記とロダシュを比較しています。ブラウザがサポートしている場合は、Mapロダッシュに勝ちます!私が使用していないことに注意してくださいArray.prototype.indexOfまたはArray.prototype.includesにexlcudeValuesを包むようMapまたはObjectより高速な照会になります!(https://jsperf.com/array-without-benchmark-against-lodash


たとえば、あなたは以下の配列を持っています:

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

そして、番号4を削除したい場合は、以下のコードを単純に行うことができます:

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

この関数を再利用する場合は、再利用可能な関数を記述します。この関数は、以下のようなネイティブ配列関数にアタッチされます。

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]がある代わりに、以下の配列を持っているのはどうですか?

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または_.outoutを参照してください。


アップデート:この方法は、ECMAScript 2015(旧称ES6)を使用できない場合にのみお勧めします。 もしあなたがそれを使うことができれば、ここでの他の答えはより良い実装を提供します。

この要点はここであなたの問題を解決し、ちょうど1(または指定された値)の代わりに引数のすべての出現を削除します。

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

使用法:

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]

ES6&突然変異なし:(2016年10月)

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

次に:

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

配列に配列を変更するべきではありません。 これは関数型プログラミングパターンに反するためです。 あなたができることは、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 //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter


私はarray.remove(int)がどのように動作することを期待しているのか分かりません。 あなたが欲しいかもしれないと考えることができる3つの可能性があります。

インデックスi配列の要素を削除するには:

array.splice(i, 1);

numberを持つすべての要素を配列から削除する場合は、次のようにします。

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

インデックスの要素をもう作成しないようにしたいが、他の要素のインデックスを変更したくない場合は、次のようにします。

delete array[i];

あなたが空の場所を保持したいかどうかによって異なります。

空のスロットが必要な場合は、削除しても問題ありません。

delete array[ index ];

そうでない場合は、 spliceメソッドを使用する必要があります。

array.splice( index, 1 );

そしてその項目の値が必要な場合は、返された配列の要素を格納するだけです:

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

あなたが何らかの順序でそれをやりたければ、最後のものはarray.shift() 、最初のものはarray.pop()を使うことができます。

また、項目のインデックスがわからない場合は、 array.indexOf( item )を使用して取得できます( if()項目を取得するか、 while()すべて取得する)。 array.indexOf( item )は、インデックスまたは見つからない場合は-1を返します。


John Resig は良い実装を投稿しました

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

グローバルオブジェクトを拡張したくない場合は、代わりに次のようなことができます。

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

しかし、私がこれを投稿する主な理由は、そのページのコメント(2007年12月14日)で提案されている代替実装に対してユーザーに警告することです。

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

最初はうまくいくようですが、痛いプロセスを通して、配列内の最後から2番目の要素を削除しようとすると失敗することが分かりました。 たとえば、10要素の配列があり、これで9番目の要素を削除しようとすると、次のようになります。

myArray.remove(8);

最終的に8要素配列になります。 理由はわからないが、私はジョンの元の実装にこの問題がないことを確認した。


エレメントのインスタンスが複数ある場合は、逆ループを実行して索引が壊れないようにすることができます。

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

ライブデモ


あなたは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含むlink


削除された位置が削除された新しい配列が必要な場合は、特定の要素を削除して配列を除外することができます。 フィルターメソッドを実装していないブラウザーでは、 配列オブジェクトの拡張が必要な​​場合がありますが、長期的には、これだけ簡単です。

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] 1、2、3、4、6]と表示されます[1, 2, 3, 4, 6]


私は配列から取り除くための別の良い解決策を持っています:

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


Underscore.jsを使用すると、複数のブラウザの問題を解決できます。 存在する場合、ビルド中のブラウザメソッドを使用します。 古いInternet Explorerバージョンの場合のようにそれらが存在しない場合、独自のカスタムメソッドを使用します。

配列から要素を削除する簡単な例(ウェブサイトから):

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

JavaScriptを使用して配列から項目削除するには、いくつかの方法があります

説明されているすべてのメソッドは元の配列に変更を加えず、代わりに新しい配列を作成します。

あなたが商品のインデックスを知っているなら

配列があり、位置iアイテムを削除したいとします。

1つの方法は、 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()は受け取ったインデックスで新しい配列を作成します。 最初から削除したいインデックスまで新しい配列を作成し、削除した配列の後ろの最初の位置から別の配列を連結して配列の最後までつなぎます。

あなたが値を知っているなら

この場合、良い選択肢の1つは、より宣言的なアプローチを提供する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を書くことができます。

複数のアイテムを削除する

1つのアイテムの代わりに多くのアイテムを削除する場合はどうすればよいですか?

最も簡単な解決策を見てみましょう。

インデックス別

関数を作成してアイテムを連続して削除することができます:

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/掲載されていhttps://flaviocopes.com/how-to-remove-item-from-array/


filterメソッドで簡単に行うことができます:

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

これにより、配列からすべての要素が削除され、スライスとインデックスの組み合わせが速くなります。


このコードをチェックしてください。 それはすべての主要なブラウザで動作します。

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

この関数を呼び出す

remove_item(array,value);

私はJavaScriptを使い慣れていないので、この機能が必要でした。 私は単にこれを書いた:

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

それから私がそれを使いたいとき:

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

出力 - 期待どおり。 ["item1"、 "item1"]

あなたは私とは違ったニーズを持っているかもしれないので、簡単に修正することができます。 私はこれが誰かを助けることを望む。


より現代的なECMAScript 2015 (旧ハーモニーまたはES 6)アプローチ。 与えられた:

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

次に:

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

収穫:

[1, 2, 4]

Babelpolyfillサービスを使用して、これがブラウザ間で十分にサポートされていることを確認できます。


ES6を使用できます。

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

出力:

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




arrays