ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptで指定した配列要素を削除する方法

JavaScriptで指定した配列要素を削除する方法

醉折花枝作酒筹
リリース: 2023-01-07 11:44:51
オリジナル
39496 人が閲覧しました

削除方法: 1. delete キーワードを使用します; 2. splice() 操作メソッドを使用します; 3. 反復方法、ループを使用して配列要素を反復し、削除する項目に一致する項目を削除します。削除; 4. プロトタイプのプロトタイプメソッド、削除の目的を達成するために配列のプロトタイプにメソッドを追加します。

JavaScriptで指定した配列要素を削除する方法

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript では、Object に加えて、Array 型 (配列) がおそらく最もよく使用される型です。 JavaScript の配列は、他の言語の配列と比べて非常に柔軟です。この種の柔軟性には長所と短所があり、長所は創造的であり、さまざまな柔軟なソリューションを提供できることですが、短所は、実際には柔軟性がありすぎて頭が働かなくなりやすいことです。制御不能で狂気です。

前にいくつかの言葉をからかった後、本題に戻りましょう。ここでは JavaScript で Array 要素を削除する 7 つの方法、つまり length 属性、delete キーワード、pop() スタック メソッド、shift() を使用します。 queueメソッド、splice()操作メソッド、forEach()またはfilter()反復メソッド、prototypeプロトタイプメソッド。

delete キーワード

JavaScript には、配列要素を削除 (クリア) するための delete キーワードが用意されています。

var colors = ["red", "blue", "grey", "green"];delete colors[0];

console.log(colors); // [undefined, "blue", "grey", "green"]
ログイン後にコピー

delete を使用して要素を削除した後は、配列の長さは変わりませんが、削除された要素は未定義に設定されることに注意してください。

splice() 操作メソッド

JavaScript Array オブジェクトは、配列に対して特定の操作を実行するための splice() メソッドを提供します。 splice() はおそらく最も強力な配列メソッドであり、さまざまな方法で使用できますが、ここでは配列要素を削除する方法のみを紹介します。配列要素を削除する場合、最初に削除する項目の位置と削除する項目の数の 2 つのパラメータを指定するだけで、任意の数の項目を削除できます。

var colors = ["red", "blue", "grey"];var color = colors.splice(0, 1);

console.log(color); // "red"console.log(colors); // ["blue", "grey"]
ログイン後にコピー

splice(0, 1) メソッドが呼び出されると、配列から最初の項目から 1 つの項目が削除されることがわかります。

反復法

いわゆる反復法とは、ループを使用して配列要素を反復し、削除する項目に一致する項目を削除することです。最も一般的に使用されるのは、配列内の要素がオブジェクトであり、オブジェクトの特定の属性 (ID など) に基づいて配列要素を削除できる場合です。

最初の方法では、最も一般的な ForEach ループを使用して要素を比較し、要素が見つかったら削除します。

var colors = ["red", "blue", "grey"];

colors.forEach(function(item, index, arr) {    if(item === "red") {
        arr.splice(index, 1);
    }
});
ログイン後にコピー

削除を行うには splice() メソッドも必要であることがわかりますが、このループは特定の要素を検索するためのものです。もう 1 つのアイデアは、削除する必要のない要素をループ内の新しい配列にプッシュすることです。これにより、特定の要素を誤って削除するという目的も達成できます。

2 番目の方法は、ループ内で filter メソッドを使用します。

var colors = ["red", "blue", "grey"];

colors = colors.filter(function(item) {    return item != "red"});
 
console.log(colors); // ["blue", "grey"]
ログイン後にコピー

コードは非常に単純で、要素が赤ではない項目の数を調べて色に返します (実際には、元の配列を削除するのではなく、新しい配列を取得します)。特定の要素の目的。

prototype プロトタイプメソッド

Array のプロトタイプにメソッドを追加することで削除の目的を達成できます。

Array.prototype.remove = function(dx) {  if(isNaN(dx) || dx > this.length){
    return false;
  }

  for(var i = 0, n = 0; i < this.length; i++) {
    if(this[i] != this[dx]) {      this[n++] = this[i];
    }
  }  this.length -= 1;
};var colors = ["red", "blue", "grey"];
colors.remove(1);
console.log(colors); // ["red", "grey"]
ログイン後にコピー

このメソッドは、実際には削除ロジックを自分で実装し、その削除メソッドを Array プロトタイプ オブジェクトに追加することで、この環境内のすべての Array オブジェクトがこのメソッドを使用できるようになります。変更することは可能ですが、実稼働アプリケーションでネイティブ オブジェクトのプロトタイプを変更することはお勧めできません。理由は簡単で、特定の実装でメソッドが欠落している場合、このメソッドをネイティブ オブジェクトのプロトタイプに追加すると、このメソッドをサポートする別の実装でコードを実行するときに名前の競合が発生する可能性があります。そうすると、誤ってネイティブ メソッドがオーバーライドされる可能性があります。

[推奨学習: JavaScript 上級チュートリアル]

以上がJavaScriptで指定した配列要素を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート