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方言の簡単な紹介

推薦する

jsはFileReaderを使用してローカルファイルまたはBLOBを読み取ります

目次FileReaderはローカルファイルまたはBLOBを読み取ります1. FileReaderの使...

DockerにMySQLをインストールする方法

最近 Django を導入しましたが、MySQL を手動でインストールしたくなかったので、Docke...

11 の素晴らしい JavaScript コード リファクタリングのベスト プラクティスの概要

目次1. 関数の抽出2. 重複した条件付きスニペットを結合する3. 条件分岐文を関数に抽出する4. ...

シンプルなドラッグ効果を実現するJavaScript

この記事では、簡単なドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

最新の MySQL 5.7.23 のインストールと設定のグラフィックチュートリアル

2018 年の最新 MySQL 5.7 の詳細なインストールと設定は 4 つのステップに分かれており...

海外の無料写真素材サイトベスト9

良い画像素材のウェブサイトを見つけるのは難しいです。特に無料です。良い写真には非常に目を引く視覚効果...

Reactを使用して画像認識アプリを実装する方法

まずは効果の写真をお見せしましょう。 個人的には効果は問題ないと思います。アプリが写真を学習する時間...

CentOS に Docker をインストールし、Springboot で Docker をリモート公開する方法

目次1. CentOS7.0へのJDK1.8のインストール2. Dockerのインストール3.Doc...

MySQL における引用符とバックティックの違いと使い方の詳細な説明

序文そこでこのブログを書きました。このブログでは大物の記事からいくつかの知識も推奨しています。侵害が...

HTML ウェブページのブラウザタイトルバーに小さなアイコンを表示する方法

この効果と同様に、方法も非常に簡単です。ヘッダーに次のように記述します: <link rel=...

nginx と openssl で https を実装する方法

サーバーデータがSSL証明書を使用して暗号化および認証されていない場合、ユーザーのデータはプレーンテ...

MySQL テーブルの読み取り、書き込み、インデックス作成、その他の操作の SQL ステートメントの効率最適化の問題を分析します。

前回は、Explain 実行プランの表示、インデックスの分析など、MySQL での SQL クエリの...

WeChatアプレットが計算機機能を実装

この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...

Tomcat ソースコード起動コンソールの中国語文字化けのデバッグプロセス記録

問題を見つける今日はTomcatのソースコードを勉強するつもりなので、公式サイトからTomcatのソ...

eject を使用せずに create-react-app の設定を変更する方法

1. イジェクトが推奨されないのはなぜですか? 1. eject を実行した後、どのような変化があり...