オブジェクトの配列から重複するオブジェクトを削除する

配列とオブジェクトは2つの基本的なデータ構造で、私たちが日常的なJavaScriptコーディングタスクで使用しているのを見つけます.彼らは非常に使いやすいですが、我々は非常に大きな成長を格納するためにそれらを使用するデータの数として、我々はそれらに操作を実行するために撮影時間とリソースを最適化する必要性を見つける.
この記事では、オブジェクトの配列から重複するオブジェクトを削除する2つの高速アプローチに焦点を当てます.
最近、プロジェクトに取り組んでいる間、オブジェクトの配列から重複を削除する必要があります.
たとえば、この配列のオブジェクトを持っていると言うと、配列内の任意の重複を見つけて削除する必要があります

const data = [
  {
    id: 1,
    title: "Pick meals",
    description: "Choose your meal"
  },
  {
    id: 2,
    title: "Checkout",
    description: "Enter a delivery location"
  },
  {
    id: 3,
    title: "Fast Delivery",
    description: "Your order is processed and delivered"
  },
  {
    id: 2,
    title: "Checkout",
    description: "Enter a delivery location"
  },
 {
    id: 1,
    title: "Pick meals",
    description: "Choose your meal"
  }
]

このタスクは最初に些細なように見えるかもしれないが、コードに飛び込んで、最適化を念頭に置いて、あなたはそれがあなたが思ったほど些細なものではないとわかります.以下の2つのメソッドは、このタスクを解決するためのさまざまな方法です

方法1:セットの使用
データを取得する
{ }
id : 1
タイトル:“食事を選ぶ”
食事を選びなさい
//
{ }
2 :
title :チェックアウト
配信場所を入力
//
{ }
id : 3
タイトル:「高速配送」
あなたの注文は処理され配達される
//
{ }
2 :
title :チェックアウト
配信場所を入力
//
{ }
id : 1
タイトル:“食事を選ぶ”
食事を選びなさい
｝
]
//配列内のすべてのオブジェクトを文字列に変換して比較するのが簡単になります
結果をデータとします.マップ(アイテム= JSON)Stringify
//配列にパスを渡して重複を削除します
result = new set (結果);
//セットを文字列の配列に変換する
結果=配列.から
//文字列の配列をオブジェクトの配列に変換する
結果=結果.マップ(アイテム= JSON)parseアイテム
コンソール.ログ(結果);
オブジェクトがsetオブジェクトに渡す前に最初にオブジェクトをstringifyすることは重要です、セットは値によって代わりに参照によってそれらを比較するでしょう.オブジェクトが異なった記憶場所に格納されるので、セットはそれらが同じ正確な値を持っていても異なったオブジェクトとしてそれらを見るでしょう.

方法2 :オブジェクトの使用
データを取得する
{ }
id : 1
タイトル:“食事を選ぶ”
食事を選びなさい
//
{ }
2 :
title :チェックアウト
配信場所を入力
//
{ }
id : 3
タイトル:「高速配送」
あなたの注文は処理され配達される
//
{ }
2 :
title :チェックアウト
配信場所を入力
//
{ }
id : 1
タイトル:“食事を選ぶ”
食事を選びなさい
｝
]
//空のオブジェクトを作成する
結果を得る
//データ配列をループし、結果オブジェクトのプロパティを作成するには、配列のオブジェクトのキーのいずれかを使用します
データ.foreach ( item => result [ item . id ] = item )
//オブジェクトから配列を取り戻す
結果=オブジェクト.値(結果);
コンソール.ログ(結果)
両方のメソッドは、これまでのところ、重複しているオブジェクトが全く同じであるように機能します.方法2は、より短い実行から高速に実行される.

ノート
いくつかのまれなケースでは、複製の定義が与えられるならば
データ以下

const data = [
  {
    id: 1,
    title: "Pick meals",
    description: "Choose your meal"
  },
  {
    id: 2,
    title: "Hey",
    description: "Enter a delivery location"
  },
  {
    id: 3,
    title: "Fast Delivery",
    description: "Your order is processed and delivered"
  },
  {
    id: 2,
    title: "Checkout",
    description: "Enter a delivery location"
  }
]

メソッド2は重複したメソッドItemaが正確にITembと同じであるなら、最高でありません、そして、いくつかのオブジェクトは同じIDを持っていますが、他のいくつかの特性を持っています.この場合、メソッド1は使用に最適です.同様に重複する場合、Itemaは他のプロパティにかかわらずItembと全く同じ' id 'を持ちます.
私はあなたがこの記事を役に立つ場合は、コンテンツのような場合は、タッチでご滞在をお気軽に、私に従ってください.