JS オブジェクト配列の重複排除のための 3 つの方法の例と比較

JS オブジェクト配列の重複排除のための 3 つの方法の例と比較

1. 重複排除前後のデータの比較

// 元のデータは次のようになります // 重複排除後のデータは次のようになります [{ [{
  "商品ID": "1", "商品ID": "1",
  「クォータ」: 12、「クォータ」: 12、
  "SKUID": "1"
}, },
{ {
  "商品ID": "2", "商品ID": "2",
  「クォータ」: 12、「クォータ」: 12、
  "SKUID": "2"
}, }]
{
  "商品ID": "1",
  「クォータ」: 12,
  "SKUID": "1"
}]

2. 使い方

  1. フィルターとマップの使用🌟🌟🌟🌟🌟
  2. 削減の使用🌟🌟🌟🌟
  3. for ループ 🌟🌟🌟

結論: filter と Reduce の時間差はそれほど大きくありません。filter の方がわずかに高速ですが、filter 構文はより簡潔です。

1. フィルターとマップを使用する

コードは簡潔で使いやすいです。4行のコードで実行できます。平均所要時間は最短です。5つ星の推奨

関数 uniqueFunc(arr, uniId){
  const res = 新しい Map();
  arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1)); を返します。
}

2. 削減を使用する

コードが少し増え、平均所要時間は最初のものと同等、4つ星の推奨

関数 uniqueFunc2(arr, uniId){
  ハッシュ = {}
  戻り値 arr.reduce((accum,item) => {
    ハッシュ[item[uniId]] ? '' : ハッシュ[item[uniId]] = true && accum.push(item)
    累積を返す
  },[])
}

3. forループの使用

1番目と2番目よりも少し時間がかかりますが、費やされる時間は平均的です。Samsungが推奨しています。

関数 uniqueFunc3(arr, uniId){
  obj = {} とします
  tempArr = [] とします
  for(var i = 0; i<arr.length; i++){
    if(!obj[arr[i][uniId]]){
      tempArr.push(arr[i])
      obj[arr[i][uniId]] = 真
    }
  }
  tempArr を返す
}

3. 2400データに対する3つの方法の処理時間の比較

テスト数フィルターマップ減らすforループ
1 0.139892578125 ミリ秒0.19189453125 ミリ秒0.2060546875 ミリ秒
2 0.12109375 ミリ秒0.1279296875 ミリ秒0.195068359375 ミリ秒
3 0.112060546875ミリ秒0.11767578125 ミリ秒0.174072265625 ミリ秒
4 0.10400390625 ミリ秒0.1728515625 ミリ秒0.18701171875 ミリ秒
5 0.10986328125 ミリ秒0.12890625 ミリ秒0.175048828125 ミリ秒
6 0.113037109375 ミリ秒0.10791015625 ミリ秒0.172119140625 ミリ秒
7 0.134033203125 ミリ秒0.129150390625 ミリ秒0.172119140625 ミリ秒

テスト時間のスクリーンショット表示

要約する

これで、JS オブジェクト配列の重複排除の 3 つの方法と比較に関する記事は終了です。より関連性の高い JS オブジェクト配列の重複排除コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • データページング効果を実現する js オブジェクト
  • JSオブジェクトの走査順序の詳細な説明
  • プレーンな JS オブジェクトの代わりに Map を使用する場合
  • JS オブジェクトのコピー (ディープ コピーとシャロー コピー)
  • js オブジェクト属性名でキャメルケースを下線に変換するサンプルコード
  • jsオブジェクトの読み取り速度の詳細な例

<<:  Ubuntu 18.04 に vsftpd をインストールするための実装コード

>>:  MySQL方言の簡単な紹介

推薦する

JavaScript を使用してソートアルゴリズムを実装する方法

目次バブルソート選択ソート挿入ソート要約するバブルソートバブルソートは、シーケンスの右側から始めて、...

Reactは無限ループスクロール情報を実装する

この記事では、無限ループスクロールを実現するためのReactの具体的なコードを参考までに紹介します。...

MySQL でデータベースを作成した後、ユーザー 'root'@'%' によるデータベース 'xxx' へのアクセスが拒否される問題を解決する

序文最近、仕事で問題が発生しました。データベースを作成した後、データベースに接続するときにエラーが発...

Docker コンテナにデータベースをデプロイする場合の欠点は何ですか?

序文Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソ...

MySQL の完全バックアップ中に特定のライブラリを除外する方法

MySQLの完全バックアップを実行するときは、--all-databaseパラメータを使用します。例...

MySQLトリガーの使用と注意すべき点

目次トリガーについてトリガーの使用トリガーを作成するトリガーを表示トリガーの削除使用上の注意新旧の違...

サイトマップをウェブページの下部に配置するメリットと例

以前は、ほとんどすべての Web サイトに、すべてのページをリストしたサイトマップ ページがありまし...

Vue3.0 における Ref と Reactive の違いの詳細な分析

目次参照と反応参照反応的RefとReactiveの違いshallowRef と shallowRea...

この記事では、イベント委任を使用してJavaScriptメッセージボード機能を実装する方法について説明します。

イベント委任を使用してメッセージ ボード機能を実装します。 <!DOCTYPE html>...

Centos に PHP7.4 と Nginx をインストールする方法

準備する1. 必要なインストールパッケージをダウンロードするhttps://www.php.net/...

ログインフォームを実装するためのReactサンプルコード

Vue ユーザーとして、React を拡張する時が来ました。antd の導入、less と rout...

HTML における li タグの水平配置の例

ほとんどのナビゲーション バーは、下の図に示すように水平に配置されていますが、これはどのように実現さ...

MySQL クエリのパケットが大きすぎる問題と解決策

問題の説明:エラーメッセージ:原因: com.mysql.jdbc.PacketTooBigExce...

React リストバーとショッピングカートコンポーネントの使用の詳細な説明

この記事では、Reactリストバーとショッピングカートコンポーネントの具体的なコードを参考までに紹介...

ウェブページのメモリとCPU使用量を削減する方法

<br />Web ページによっては、サイズは大きくないように見えても開くのに非常に時間...