JavaScript 配列の重複排除とフラット化関数の紹介

JavaScript 配列の重複排除とフラット化関数の紹介

1. 配列の平坦化(配列の次元削減とも呼ばれる)

flat()メソッドは、配列を指定された深さまで再帰的に走査し、走査されたサブ配列の要素とすべての要素を新しい配列にマージして返します。

定数テスト = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]

// flat がパラメータを渡さない場合、デフォルトで 1 つのレイヤーをフラット化します。test.flat()
// ["a", "b", "c", "d", ["e", ["f"]], "g"]

// flat は整数パラメータを渡します。これはフラット化されたレイヤーの数です。test.flat(2)
// ["a"、"b"、"c"、"d"、"e"、["f"]、"g"]

// Infinity キーワードをパラメータとして使用すると、ネストが何層あっても 1 次元配列に変換されます test.flat(Infinity)
// ["a", "b", "c", "d", "e", "f", "g"]

// 0 未満の整数を渡すと、フラット化せずに元の配列を返します。test.flat(0)
テスト.フラット(-1)
// ["a"、["b"、"c"]、["d"、"e"、"f"]]、"g"]]

// 元の配列に空きがある場合、flat() メソッドは空き部分をスキップします。
["a", "b", "c", "d",,].flat()
// ["a", "b", "c", "d"]

方法1: 削減メソッドを使用する

一気に平らにする

関数flattenDeep(arr){ 
    Array.isArray(arr) を返す
      ? arr.reduce( (acc, cur) => [...acc, ...flattenDeep(cur)] , [])
      : [編曲]
}

// テスト var test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]
flattenDeep(テスト)
// ["a", "b", "c", "d", "e", "f", "g"]

フラット関数を実装します。

関数flat(arr, 深さ = 1) {
    深さ > 0 を返す
        ? arr.reduce((acc, cur) => {
        Array.isArray(cur) の場合
            [...acc, ...flat(cur, depth-1)] を返します
        }
        [...acc, cur]を返す
    } , [])
      :arr
}

// テスト var test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]
// パラメータが渡されない場合、デフォルトのフラット化は 1 層です flat(test)
// ["a", "b", "c", "d", ["e", ["f"]], "g"]

// フラット化されたレイヤーの数を表す整数パラメータを渡します flat(test, 2)
// ["a"、"b"、"c"、"d"、"e"、["f"]、"g"]

// Infinity キーワードをパラメータとして使用すると、ネストされたレベルがいくつあっても、1 次元配列に変換されます。flat(test, Infinity)
// ["a", "b", "c", "d", "e", "f", "g"]

// 0 未満の整数を渡すと、フラット化せずに元の配列を返します。flat(test, 0)
フラット(テスト、-10)
// ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]];

// 元の配列に空きがある場合、flat() メソッドは空き部分をスキップします。
var arr = ["a", "b", "c", "d",,]
フラット(arr)
// ["a", "b", "c", "d"]

方法2: スタック

すべての次元を一度に縮小する

関数flattenDeep(arr){
  定数結果 = [] 
  //配列要素をスタックにコピーします。直接代入すると元の配列が変更されます。const stack = [...arr]
  // スタックが空でない場合は、while (stack.length !== 0) { をループします。
    定数val = stack.pop() 
    Array.isArray(val) の場合 {
      // 配列が再度スタックにプッシュされ、1つのレイヤーが拡張された場合 stack.push(...val) 
    } それ以外 {
      // 配列でない場合は、先頭挿入を使用して結果配列に挿入します result.unshift(val)
    }
  }
  結果を返す
}

// テスト var test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]
平らにする(動物)
// ["a", "b", "c", "d", "e", "f", "g"]

2. アレイ重複排除

方法 1: 設定 (ES6)

関数 unique(arr) {
    Array.from(new Set(arr)) を返します
}
// または var unique = arr => [...new Set(arr)]

// テスト var arr = [1, 2, 2, 3]
ユニーク(arr); // [1, 2, 3]

方法2: 減らす

関数 unique(arr) {
    戻り値 arr.sort().reduce((acc, cur) => {
     acc.length === 0 || acc[acc.length - 1] !== cur の場合 {
         acc.push(cur);
     }
     返品
 }, [])}
;

// テスト var arr = [1, 2, 2, 3]
ユニーク(arr); // [1, 2, 3]


方法3: フィルター

関数 unique(arr) { 
    arr.filter( (要素, インデックス, 配列) => { を返します。
     array.indexOf(要素) === インデックスを返します
 })
}

// テスト var arr = [1, 2, 2, 3]
ユニーク(arr); // [1, 2, 3]

これで、JavaScript 配列の重複排除とフラット化関数に関するこの記事は終了です。より関連性の高い js 配列の重複排除とフラット化関数のコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript で重複配列を削除する 5 つの一般的な方法
  • JS配列重複排除の詳細
  • JavaScript配列の重複排除のいくつかの方法についての詳細な説明
  • JavaScript 配列重複排除ソリューション
  • JavaScript配列重複排除の詳細な説明
  • JS で配列の重複排除を実装する 7 つの方法

<<:  HTML の水平および垂直中央揃えの問題の概要

>>:  IE6/IE7/IE8/IE9/FF 向け CSS ハック (概要)

推薦する

Vue ページ監視ユーザープレビュー時間機能実装コード

最近のビジネスでは、オンライン トレーニング システムが特定のオンライン プレビュー ページに対する...

ファイル書き込みを使用して Linux アプリケーションをデバッグする方法

Linux ではすべてがファイルなので、Android システム自体は Linux + Java だ...

Linux 圧縮ファイルコマンド zip の使用例

「.zip」形式は、Windows システムでファイルを圧縮するために使用されます。実際、「.zip...

MySQL トランザクション分離レベルとロックメカニズムの問題に関する深い理解

概要データベースは通常、複数のトランザクションを同時に実行します。複数のトランザクションが、同じデー...

Nginx レベルで基本的なユーザー認証を構成する手順を完了します。

序文アプリケーション シナリオ: おそらく、内部 Web サイトは外部ユーザーにアクセス可能である必...

Ubuntuはポート22を開きます

シナリオssh 経由で Ubuntu サーバーに接続するには、xshell ツールを使用する必要があ...

MySql 8.0.11 のインストールと設定のチュートリアル

公式ウェブサイトアドレス: https://dev.mysql.com/downloads/mysq...

MySQL における Datetime と Timestamp の使用の概要

目次1. MySQL で現在の時刻を表現するにはどうすればよいでしょうか? 2. TIMESTAMP...

CSS クラスと ID の一般的な命名規則

ページの公開名: #wrapper - ページの外側の端が全体のレイアウト幅を制御します#conta...

CentOS 8で自動更新を設定するための手順を完了する

データとコンピューターに対してできる最善のことは、それらを安全に保つことです。アップデートを有効にす...

mysqlパラメータsql_safe_updatesを使用して更新/削除範囲を制限する方法の詳細な説明

序文皆さんご存知のとおり、MySQL の運用・保守において、更新/削除条件が誤っているためにデータが...

Vueでクラススタイルを使用する方法の詳細

目次1. ブール2. 表現3. マルチクラスパッケージ4. v-bind でクラス class を直...

メンテナンスしやすい CSS コードを書くための 5 つのガイドライン

1. スタイルシートの先頭にコメント ブロックを追加して、スタイルシートの作成日、作成者、タグ、その...

スライド効果を実現するためのネイティブJavaScript

ページ、特にホームページを作成するときは、通常、Web サイト全体の他のメイン ページにリンクできる...

Linuxシステムの入出力管理とvimの共通機能の詳細な説明

####システム内の入出力の管理#### 1. システムの入力と出力のリダイレクトを理解する入力リダ...