jsは多次元配列を1次元配列に変換し、それを並べ替えます

jsは多次元配列を1次元配列に変換し、それを並べ替えます

後で忘れてしまい、メモをもう一度見直す必要がある場合に備えて、いくつかの方法を整理します。

まず多次元配列の平坦化についてお話しましょう

方法 1: flat()

// たとえば、多次元配列の場合、let arr = [1, 1, 2, [4, 2, [1, 3, [4, 2, 1]], 5], 2, 5, 3]
console.log(arr.flat(2)); // ネストされたレベルの数を指定します // 出力 [ 1, 1, 2, 4, 2, 1, 3, [ 4, 2, <1 つの空の項目>, 1 ], 5, 2, 5, 3 ]

console.log(arr.flat(Infinity)); // ネストのレベルがいくつあっても、 // 出力: [ 1, 1, 2, 4, 2, 1, 3, 4, 2, 1, 5, 2, 5, 3 ]

方法 2: 空の文字列を連結し、split() で分割する

怠惰な執筆

// この配列は let arr = [1, 1, 2, [4, 2, [1, 3, [4, 2, 1]], 5], 2, 5, 3] です
// 文字を他の基本データ型と操作すると、すべて文字に変換されます。次に、split() メソッドを呼び出して ',' で分割します。console.log((arr + '').split(','));
// 出力 ['1', '1', '2', '4', '2', '1', '3', '4', '2', '1', '5', '2', '5', '3']

// 出力はあまり良くないので、最適化を続けましょう // この配列をまだ使用します let arr = [1, 1, 2, [4, 2, [1, 3, [4, 2, 1]], 5], 2, 5, 3]
newArr = (arr + '').split(',') とします。
arr1 = []とする
newArr.forEach((アイテム) => {
    arr1.push(+items) // '+items' のデータ型を変換します})
コンソールログ(arr1);
// 出力 [ 1, 1, 2, 4, 2, 1, 3, 4, 2, 1, 5, 2, 5, 3 ]

方法3: toString()

配列は計算によって文字型に変換できるので、arr+' ' を使用するのはそれほどエレガントではないようです。このとき、js の Number オブジェクトに toString() メソッドがあることを突然思い出しました。

定義と使用法
toString() メソッドは、Number オブジェクトを文字列に変換し、結果を返します。

arr = [1, 1, 2, [4, 2, [1, 3, [4, 2, 1]], 5], 2, 5, 3]とします。
newArr = arr.toString().split(',') とします。
arr1 = []とする
newArr.forEach((アイテム) => {
    arr1.push(+アイテム)
})
コンソールログ(arr1);
// 出力 ['1', '1', '2', '4', '2', '1', '3', '4', '2', '1', '5', '2', '5', '3']

方法4: join()

定義と使用法
join() メソッドは、配列内のすべての要素を文字列に格納するために使用されます。
要素は指定された区切り文字で区切られます。

配列の join() メソッドを呼び出すと、文字列が返されます。arr 内の各要素は文字列に変換されます。区切り記号を渡すことで要素を連結できます。デフォルトの区切り記号はコンマです。

arr = [1, 1, 2, [4, 2, [1, 3, [4, 2, 1]], 5], 2, 5, 3]とします。
newArr = arr.join().split(',') とします。
コンソールログ(新しいArr)
// 出力 ['1', '1', '2', '4', '2', '1', '3', '4', '2', '1', '5', '2', '5', '3']

方法5: 再帰呼び出し

再帰について話すとき、再帰とは何かについて言及する必要があります。
いわゆる再帰関数とは、関数本体内で関数を呼び出すことです。再帰を使用する場合は、デッドループを回避するように注意してください。

意味:
再帰関数とは、関数本体内で自分自身を呼び出す関数です。
再帰関数を使用する場合は、無限ループを回避するために関数の終了条件に注意してください。

再帰はおそらく次のようになります。

関数a() {
    (a <= 1) の場合 {
        戻り値 1
    } それ以外 {
        a * fn(a - 1) を返す
    }
}

多次元配列をフラット化します。

arr = [1, 1, 2, [4, 2, [1, 3, [4, 2, 1]], 5], 2, 5, 3]とします。
newArr = [] とします

fn = (arr) => {とする
    (i = 0 とします; i < arr.length; i++) {
        // 走査された値がまだ配列であるかどうかを判断し、走査を続行します if (Array.isArray(arr[i])) { // Array Array.isArray() を使用して、渡された値が配列であるかどうかを判断します
            fn(arr[i])
            // 走査された値が配列でない場合は、新しい配列 newArr にプッシュします。
            新しいArr.push(arr[i])
        }
    }
}
fn(arr)
コンソールにログ出力します。

方法6: 削減を使用する

この方法は学習する必要があり、後で Vue で頻繁に使用されます。

減らす
最初のパラメータ: 前の値 (初期値) を表します (previousValue)
2番目のパラメータ: 現在の値 (currentValue) を表します
3番目のパラメータ: 現在のインデックス値 (currentIndex) を表します。
4番目のパラメータ: 現在走査されている配列を表す

initialValue: 初期値を手動で割り当てることができます。戻り値: 現在のループの戻り値は、次のループの初期化として使用できます。

定数arr = [1, 1, 2, [4, 2, [1, 3, [4, 2, 1]], 5], 2, 5, 3]
const fn = (配列) => {
    配列を返します。reduce((prev, curr) => {
        // curr が配列かどうかを確認します return prev.concat(Array.isArray(curr) ? fn(curr) : curr)
    }, [])
}
コンソールログ(fn(arr))

アレイ重複排除

方法 1: 新しい配列を作成し、新しい配列に要素が存在するかどうかを確認します。存在しない場合は、新しい配列に要素を追加します。

定数arr = [1, 1, 2, 4, 2, 1, 3, 4, 2, 1, 5, 2, 5, 3]
定数fn = (arr) => {
    定数newArr = []
    (i = 0 とします; i < arr.length; i++) {
        (newArr.indexOf(arr[i]) == -1)の場合{
            新しいArr.push(arr[i])
        }
    }
    newArrを返す
}
コンソールにログ出力します。

方法2: Setメソッドを使用する

定数arr = [1, 1, 2, 4, 2, 1, 3, 4, 2, 1, 5, 2, 5, 3]
// ES6 が提供する Set データ構造を使用すると、新しい Set メンバーは一意になり、データが展開されて配列に格納されます。const newArr = [...new Set(arr)]
コンソールにログ出力します。

// あるいは、Array.from() メソッドを使用して、配列のようなオブジェクトまたはトラバース可能なオブジェクトを実際の配列に変換することもできます。
const newArr = Array.from(new Set(arr))
コンソールにログ出力します。

方法3: filter() を使用する

定数arr = [1, 1, 2, 4, 2, 1, 3, 4, 2, 1, 5, 2, 5, 3]
const newArr = arr.filter((value, index, array) => { // value、index、元の配列の 3 つのパラメータを渡し、array.indexOf(value) == index を返します // indexOf は常に最初の値のインデックスを返します。後続の重複値のインデックスは indexOf によって返される位置と等しくないため、filter によって除外されます})
コンソールにログ出力します。

配列のソート

方法 1: sort() を使用する

定義と使用法
sort() メソッドは、配列の要素を並べ替えるために使用されます。

文法
配列オブジェクトをソートします(ソート順)

戻り値 配列への参照。配列は元の配列に基づいてソートされ、コピーは作成されないことに注意してください。

説明 このメソッドがパラメータなしで呼び出されると、配列内の要素はアルファベット順、より正確には文字エンコーディング順にソートされます。これを行うには、まず配列要素を文字列に変換して(必要な場合)、比較できるようにします。
他の基準で並べ替える場合は、2 つの値を比較し、2 つの値の相対的な順序を表す数値を返す比較関数を提供する必要があります。比較関数には 2 つのパラメータ a と b があり、次の値を返します。

a が b より小さい場合、ソートされた配列内で a は b の前に出現し、0 未満の値が返されます。
a が b と等しい場合は 0 を返します。
a が b より大きい場合は、0 より大きい値を返します。

パラメータ説明する
並べ替えオプション。並べ替え順序を指定します。関数である必要があります。

定数arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5];
定数fn = (a, b) => {
    a - b を返します // b - a を逆順にします}
console.log(arr.sort(fn));

多次元配列を 1 次元配列に変換し、js で並べ替えを削除する方法についての記事はこれで終わりです。多次元配列を 1 次元配列に変換し、js で並べ替えを削除する方法についての関連コンテンツの詳細については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

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

<<:  Centos7 での MySQL のインストールに関するチュートリアル

>>:  Linux で特定のプログラムを見つけるための whereis の例の詳細な説明

推薦する

Vueフィルターの使い方

目次概要フィルターの定義フィルターの使用カスタムグローバルフィルターローカルフィルター予防例1(ロー...

nginx を使用したプロキシ サーバーの設定

Nginx は、リバース プロキシ機能を使用して負荷分散を実装できるほか、フォワード プロキシ機能を...

MySQL でのワイルドカードを使用したファジークエリの実装に関する簡単な説明

MySQL データベースでは、あいまいクエリが必要な場合にワイルドカードを使用します。まず、演算子と...

JavaScriptで継承を実装するいくつかの方法

目次構造継承(callで実装)プロトタイプチェーン継承(プロトタイプチェーンの助けを借りて実装)複合...

Vue3 (V) HTTPライブラリaxiosの統合の詳細

目次1. axiosをインストールする2. アクシオスの使用1.ホームページでaxiosを参照する2...

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

Windows インストール mysql-5.7.17-winx64.zip メソッド レコード &...

MySQLでルートユーザーのパスワードを変更する方法

方法1: SET PASSWORDコマンドを使用する mysql> username@loca...

MySQLがフルテーブルスキャンを実行するいくつかの状況

目次ケース1:ケース2:ケース3:簡単にまとめると:過去 2 日間で、完全なテーブル スキャンを引き...

Vue 仮想 DOM の問題について

目次1. 仮想DOMとは何ですか? 2. 仮想 DOM が必要な理由3. 仮想DOMはどのようにして...

Mysql Workbench クエリ mysql データベース メソッド

Mysql Workbench はオープンソースのデータベース クライアントです。このオープンソース...

FTP、FTPS、SFTPの違いについて簡単に説明します

目次FTP、FTPS、SFTP の概要FTP FTPS FTPサーバーFTPソフトウェアのアクティブ...

LinuxにNginxをインストールする詳細な手順

1. Nginxのインストール手順1.1 公式サイトの紹介http://nginx.org/en/d...

ReactアプリケーションにおけるDOM DIFFアルゴリズムの詳細な説明

目次序文VirtualDOM とは何ですか? VirtualDOMを使用する理由DOMレンダリングペ...

Vue プロジェクトは左スワイプ削除機能を実装します (完全なコード)

成果を達成するコードは次のとおりですhtml <テンプレート> <div> ...

Dockerでボリュームを管理する2つの方法

前回の記事では、Dockerの基礎知識であるローカルディレクトリのマウント方法を紹介しました。今日は...