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 マスタースレーブ同期における server-id の例の詳細な説明

序文MySQL クラスターを構築する場合、当然のことながら、データの一貫性を確保するために、データベ...

nginx でのリクエストのカウント追跡の簡単な分析

まずは適用方法を説明します。nginxモジュールにはjtxyとjtcmdの2つがあります。 http...

MySQLで日付と時刻を照会する方法

序文:プロジェクト開発では、一部のビジネス テーブル フィールドで日付と時刻の型が使用されることが多...

CSS3 で背景の透明化と不透明テキストを実装するサンプルコード

最近、画像上に半透明の背景でテキストを表示する必要があるという要件に遭遇しました。その効果は次のよう...

Centos7 ベースの Nginx Web サイト サーバーの構築の詳細説明 (仮想 Web ホストの構成を含む)

1. Nginx サービス基盤Nginx (エンジン x) は、パフォーマンスの最適化のために特別...

Nginx レイヤー 4 負荷分散構成ガイド

1. レイヤー4負荷分散の概要レイヤー 4 ロード バランシングとは何ですか?いわゆる 4 層負荷分...

LINUX ポートが占有されているかどうかを確認します

ポートが占有されているかどうかは、これまで一度もわかりませんでした。多くの人に尋ねて、ようやくわかり...

MySQL は、元のデータと同じデータがある場合、更新ステートメントを再度実行しますか?

背景この記事では主に、MySQL が更新ステートメントを実行するときに、元のデータと同一の (つまり...

Linux bash: ./xxx: バイナリ ファイルを実行できません エラー

今日、Ubuntu 用の小さなツールを顧客に送りましたが、ユーザーはそれを受け取った後、実行できませ...

TypeScript とは何ですか?

目次1. JavaScriptの問題2. TypeScriptの利点3. TypeScriptの欠点...

MySQL で期限切れのデータレコードを定期的に削除する簡単な方法

1. MySQL に接続してログインしたら、まず MySQL でイベント機能が有効になっているかどう...

mysqldumpデータエクスポートの問題に関する詳細な議論

1. mysqldump の使用時にエラー (1064) が報告されます。これは、mysqldump...

左右の幅を固定し、中央の幅を適応させたHTMLレイアウトのソリューションの詳細な説明

この記事では、次のように、誰にでも共有できる左右幅固定のミドルアダプティブ HTML レイアウトソリ...

MySQLのマスタースレーブレプリケーションと読み取り書き込み分離を理解するための記事

目次導入1. MySQL マスタースレーブレプリケーション1. MySQLレプリケーションタイプ2....

Webデザインにおけるフォームデザインテクニックのまとめ

「脳が多数の領域間の関係を処理できるように、入力は論理的なグループに分割する必要があります。」 – ...