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 の例の詳細な説明

推薦する

ウェブページ HTML 特殊記号 HTML 特殊文字比較表

特殊記号名前付きエンティティ10進数エンコード特殊記号名前付きエンティティ10進数エンコードアルファ...

親要素を基準にCSSの位置を絶対的に設定する方法についての簡単な説明

ご存知のとおり、CSS の絶対位置はデフォルトでドキュメントに応じて設定されます。たとえば、posi...

mysql-8.0.17-winx64 のデプロイメント方法

1. 公式サイトからmysql-8.0.17-winx64をダウンロードし、Zipファイル形式を選択...

Centos8 に nginx をインストールするための詳細なチュートリアル (画像とテキスト)

Nginx (「エンジン エックス」と発音) は、インターネット上の最大規模のサイトの負荷を処理す...

Vue + 要素の動的複数ヘッダーと動的スロット

目次1. 需要2. 効果3. すべてのコード1. 需要ユーザーが自分でテーブルを構成できるようになり...

MySqlデータベースの基礎知識のまとめ

目次基本的なデータベース操作2) データベースを表示する3) データベースを選択する4) データベー...

ウェブレッスンプラン、初心者向けレッスンプラン

指導トピックウェブページ適用グレード高校2年生授業時間1 クラス教科書分析焦点: 静的および動的ウェ...

IISとAPACHEはHTTPSへのHTTPリダイレクトを実装しています

7 のMicrosoft の公式 Web サイトから HTTP Rewrite モジュールをダウンロ...

フロントエンドエンジニアが作ったクールなインタラクティブウェブサイトを推薦します

ウェブサイトリンク: http://strml.net/サミュエル・リード著ヒント: 昨日、Mome...

JavaScriptエンジンV8の実行プロセスの詳細な説明

目次1. V8ソース2. V8サービスターゲット3. V8の初期アーキテクチャIV. V8の初期アー...

浮遊要素によって引き起こされる問題と解決策の詳細な説明

1. 問題複数のフローティング要素は親要素の幅を拡張できず、親要素の高さが 0 になる可能性がありま...

MySQLの文字セットと検証ルールの詳細な説明

1いくつかの一般的な文字セットMySQL で最も一般的な文字セットには、ASCII 文字セット、ラテ...

JS配列ループ方式と効率分析の比較

配列メソッドJavaScript には多くの配列メソッドが用意されています。次の図は、ほとんどの配列...

XHTML の一般的なタグ

XHTML タグとは何ですか? XHTML タグ要素は、XHTML ドキュメントの基本的なコンポーネ...