Javascript配列の重複排除のいくつかの方法の詳細な説明

Javascript配列の重複排除のいくつかの方法の詳細な説明

アレイ重複排除

1 2層forループ(バブルソートの2層ループ記述に類似)

var arr = [2,3,4,2,34,21,1,12,3,4,1]
for(var i =0;i<arr.length;i++){
    //第 1 レベル: ループを実行するたびに arr 内の要素を取得します for(var j=i+1;j<arr.length;j++){
        //第 2 レベル: 取得された各要素は、順番に取得された各要素の後の要素と比較されます (最初の要素は 2 番目の要素と比較され、2 番目の要素は 3 番目の要素と比較される必要があるため、ここでの j は i より 1 大きい必要があります。つまり、j=i+1)
    	(arr[i] === arr[j])の場合{
            //同じ場合は次の要素を削除します arr.splice(j,1)
    	}
    }
}
//arr:[1, 2, 3, 4, 12, 21, 34]

2 ループとインデックス、ループとインクルード

新しい配列を作成し、古い配列をループして、各ループの要素が新しい配列に存在するかどうかを確認します。存在しない場合は、現在の要素を新しい配列に追加します。

//インデックス
var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr2 = []
arr.forEach((e)=>{
    (arr2.indexOf(e)==-1)の場合{
        arr2.push(e)
    }
})
コンソールログ(arr2)
//arr2:[1, 2, 3, 4, 12, 21, 34]
//含む
var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr2 = []
arr.forEach((e)=>{
    if(!arr2.includes(e)){
        arr2.push(e)
    }
})
コンソールログ(arr2)
//arr2:[1, 2, 3, 4, 12, 21, 34]

3. オブジェクト属性を使用して重複を削除する

var arr = [2,3,4,2,34,21,1,12,3,4,1]
var obj = {};
arr.forEach((e,i)=>{
    obj[arr[i]] = "abc";   
});
var arr2 = Object.keys(obj)
コンソールログ(arr2)
//arr2:["1", "2", "3", "4", "12", "21", "34"]
var arr3 = arr2.map(e => ~~e) です。
//arr3:[1, 2, 3, 4, 12, 21, 34]
//このメソッドは配列を並べ替えるだけでなく、配列内の要素の型も変更することに注意してください

~ は JS のビット否定演算子です。~~ はビット否定を 2 回実行することを意味しますが、実際には元の値が保持されます。ただし、元の値であっても、ブール変数に対してこの操作を実行すると、対応する数値変数に変換されることに注意してください。つまり、~~true === 1、~~false === 0 です。

4 ES6 セット

ES6 は新しいデータ構造 Set を提供します。配列に似ていますが、メンバーの値は一意であり、重複する値はありません。

var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr1 = [...新しいSet(arr)]
コンソールログ(arr1)
//arr1:[1, 2, 3, 4, 12, 21, 34]

5 ES6 配列。プロトタイプ。filter()

注: indexOf が配列内の要素を検索する場合、条件を満たす最初の要素のインデックスを返します。

var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr2 = arr.filter((e,i)=>{
    // 各ループ内の要素の最初のインデックス位置 (indexOf によって返される位置) と各ループ内の要素のインデックス (各フィルター ループ内の i) が一致しているかどうかを確認します。一致している場合は、条件を満たす最初の要素であり、フィルターで除外されないことを意味します。
    arr.indexOf(e)==i を返します。
})
コンソールログ(arr2)
//arr2:[1, 2, 3, 4, 12, 21, 34]

6 ES6 配列。プロトタイプ。reduce()

var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr2 = arr.reduce((pre,e)=>{
    //もちろん、ここでindexOfを使用してpre.includes(e)が存在するかどうかを判断することもできます。pre:pre.push(e);
    戻る前
},[])
コンソールログ(arr2)
//arr2:[1, 2, 3, 4, 12, 21, 34]

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript 配列重複排除問題の詳細な研究
  • JavaScript 配列重複排除ソリューション
  • JavaScript配列重複排除の詳細な説明
  • JavaScriptでよく使われる配列重複排除実戦ソースコード
  • JS オブジェクト配列の重複排除のための 3 つの方法の例と比較
  • jsは多次元配列を1次元配列に変換し、それを並べ替えます
  • JavaScript配列の重複排除のいくつかの方法についての詳細な説明

<<:  MySQLでカンマ区切り値の列を列に変換する方法

>>:  Docker での Tomcat インストールの 404 問題の解決方法

推薦する

MYSQL ストアドプロシージャと関数の簡単な記述

ストアドプロシージャとは簡単に言えば、これは強力で、JAVA 言語のメソッドに似た比較的複雑な論理関...

XHTML CSS ウェブサイトデザインの利点と問題点

XHTML は現在国際的に推奨されている標準的な Web サイト設計言語です。Webjx.com も...

CSS3.0 でネオンボタンアニメーション効果を実装するためのサンプルコード

今日は、CSS 3.0 で実装されたネオン ボタン アニメーション効果を紹介します。効果は次のとおり...

js のループメソッドとさまざまなトラバーサルメソッド

目次forループwhileループdo-while ループループのネストトラバーサルメソッド~のために...

画像ボタンをフォームのリセットボタンとして使用する方法

フォームを作成するときに、送信ボタンとリセットボタンを配置することがよくあります。ページの外観を考慮...

高品質なJavaScriptコードの書き方

目次1. 読みやすいコード1. 統一コード形式2. マジックナンバーを削除する3. 単一機能原則2....

12個のJavascriptテーブルコントロール(DataGrid)が整理されています

DataGrid コントロールの DataSource プロパティがデザイン時に設定されている場合、...

ミニプログラムは、カスタムのマルチレベル単一選択と複数選択を実装します

この記事では、参考のために、ミニプログラムでカスタムのマルチレベル単一選択および複数選択機能を実装す...

ウォーターフォールレイアウト+ダイナミックレンダリングの実装

目次典型的なウォーターフォールウェブサイトウォーターフォールフローレイアウトの原則一般的な考え方具体...

Docker デプロイメント MySQL8 クラスター (マスター 1 台とスレーブ 2 台) の実装手順

目次1. CentOS 7.9 20にDockerをインストールする2. MySQL クラスターをデ...

CSS で雨滴アニメーション効果を実装するサンプルコード

ガラス窓今日実現するのは雨滴効果です。ただし、雨滴効果を実現する前に、まずは曇りガラス効果を作成しま...

Docker を使用して ELK 環境を迅速にデプロイする方法の詳細な説明 (最新バージョン 5.5.1)

Linux サーバーに Docker をインストールした後、関連する公式 Docker イメージを...

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

MySQL の機能: MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレー...

印刷広告を成功させるための「3I」基準

国内の多くの広告主にとって、印刷広告の制作と評価は、しばしばかなり主観的です。自分の感情や美的感覚に...

MySqlエスケープの詳細な使用例

MySQL エスケープエスケープとは、エスケープ文字の本来の意味を意味します。エスケープ文字の目的は...