Vue で配列から重複データを削除する方法 (3 つの方法)

Vue の開発プロセスでは、配列をよく使用します。しかし、実際の開発ではデータの重複が発生する場合があり、その際には配列の重複排除を行う必要があります。この記事では、Vue で配列の重複排除を行う方法を紹介します。

1. set 構造を使用して重複を排除する

set は、重複要素を削除できる ES6 のデータ構造です。無秩序で反復しないのが特徴です。重複排除によく使用されます。配列、シーン。

let arr = [1, 2, 2, 3, 3, 4, 5];
let set = new Set(arr);
arr = Array.from(set);

上記のコードでは、まず配列 arr を定義し、次に新しい Set() メソッドを通じてそれをセット コレクションに変換し、結果をセット変数に保存します。最後に、セットのコレクションを配列に変換します。

2. 重複を削除するには、indexOf メソッドを使用します

indexOf メソッドは、配列内の指定された要素の最初のインデックスを見つけることができます。見つからない場合は、-1 を返します。アレイの重複排除を実行するには、この機能を利用できます。

let arr = [1, 2, 2, 3, 3, 4, 5];
let newArr = [];
for (let i = 0; i < arr.length; i++) {
  if (newArr.indexOf(arr[i]) === -1) {
    newArr.push(arr[i]);
  }
}
arr = newArr;

上記のコードでは、for ループを通じて元の配列 arr を走査します。各走査中に、indexOf メソッドを使用して、新しい配列 newArr 内の現在の要素のインデックスを見つけます。インデックスが見つからない場合、要素は newArr に追加されます。

3. 重複を削除するには、includes メソッドを使用します。

includes メソッドは ES7 の新しいメソッドで、配列に指定された値が含まれているかどうかを判断し、true または false を返します。この機能に基づいて重複排除操作を実行できます。

let arr = [1, 2, 2, 3, 3, 4, 5];
let newArr = [];
for (let i = 0; i < arr.length; i++) {
  if (!newArr.includes(arr[i])) {
    newArr.push(arr[i]);
  }
}
arr = newArr;

上記のコードでは、for ループを使用して元の配列 arr を走査します。各走査中に、includes メソッドを使用して、現在の要素が新しい配列 newArr 内にあるかどうかを確認します。存在しない場合は、 、要素を newArr に追加します。

概要

この記事では、Vue での配列の重複排除の 3 つの一般的な方法、つまり set 構造、indexOf メソッド、および include メソッドの使用を紹介します。これら 3 つの方法により、配列の重複排除操作を簡単に実装し、開発効率を向上させ、データの異常を回避できます。実際の状況に基づいて重複排除操作を実行するための適切な方法を選択し、開発効率を向上させることができます。

以上がVue で配列から重複データを削除する方法 (3 つの方法)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。