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

推薦する

MySQL での外部キーの作成、制約、削除

序文MySQL バージョン 3.23.44 以降では、InnoDB エンジン タイプのテーブルは外部...

Windows 環境での MYSQL5.7 設定ファイルの場所のグラフィカル分析

1. MYSQLインストールディレクトリ次のようにコードをコピーします。 select @@bas...

CentOS システムのディスク パーティションを拡張する方法

問題/障害/シナリオ/要件Eve-ng の仮想マシン OVA のハードディスクは 38G しかないた...

eCharts でパーセンテージ付きの横棒グラフを実装する方法

目次サンプルコードレンダリングコード分​​析要約するサンプルコード var データ = [220, ...

PHP クラスにおける static と self の違いの簡単な分析

メソッドが定義されているクラスに応じて、現在のクラスへの静的参照を取得するには、self:: または...

Win32 MySQL 5.7.27 のインストールと設定方法のグラフィックチュートリアル

MySQL 5.7.27のインストールチュートリアルは以下のように記録され、皆さんと共有されています...

クロスドメイン js フロントエンドの 8 つの実装ソリューション

目次1. jsonp クロスドメイン2. document.domain + iframe クロスド...

W3C が推奨するモバイル Web マークアップ言語 XHTML Basic 1.1

W3C は最近、「 XHTML Basic1.1 」と「 Mobile Web Best Prac...

VirtualBox でのホストオンリー + NAT モードのネットワーク構成

VirtualBoxのHost Only+NATモードのネットワーク構成は参考用です。具体的な内容は...

ウェブ画像のホットリンクと座標値を設定するサンプルコード

時には、画像上に複数の領域を設定する必要があります。マウスで画像のさまざまな領域をクリックしてさまざ...

MySQLインデックスを最適化する方法

1. MySQL のインデックスの使用方法インデックスは、特定の列の値を持つ行をすばやく見つけるため...

jQueryはキャンバスタグを使用して検証コードを描画します

<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。...

Vue+ElementUI Treeの使い方

Vue+ElementUI Treeの使い方は参考までに。具体的な内容は以下のとおりです。 フロント...

Mysqlはマスタースレーブ構成とマルチマスターマルチスレーブ構成を実装します

現在シミュレーションしているのは、マスター スレーブ システム (ホスト 1 台とスレーブ 1 台)...

Mysqlマスタースレーブ同期の実装原理

1. MySQL マスター/スレーブ同期とは何ですか?マスター データベースのデータが変更されると、...