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

推薦する

リンク更新ページと js 更新ページの使用例

1. リンクの使用方法:コードをコピーコードは次のとおりです。 <a href="j...

年末ですが、MySQL パスワードは安全ですか?

序文:年末です。データベースを検査する時期ではないでしょうか?一般的に、検査では、パスワードの複雑さ...

CSS3 シンプルカットカルーセル画像実装コード

実装のアイデアまず、親コンテナーを作成し、2 つの順序なしリストを使用して、柔軟なレイアウトで親コン...

IDEA2021 tomcat10 サーブレットの新しいバージョンの落とし穴

私が学習していたときに使用していたバージョンは比較的新しいものであり、インターネット上のチュートリア...

JSは画像の滝の流れの効果を実現します

この記事では、画像ウォーターフォールフローを実現するためのJSの具体的なコードを参考までに共有します...

誰もが登録できるようにJiedaibaoを宣伝するにはどうすればよいでしょうか? ジエダイバオのプロモーション方法とスキル

借財宝は最近人気が出ている携帯電話ローンソフトウェアプラットフォームです。知人同士の貸し借りが特徴で...

Angularデータバインディングとその実装の詳細な説明

目次序文データバインディングとは何ですか? Angular のデータバインディングの種類一方向データ...

Tomcat 経由で JMX 監視を有効にする方法

シミュレーション環境を構築する:オペレーティングシステム: centos7メモリ: 1G 1.8.0...

VMware Workstation に Windows Server 2019 をインストールする (グラフィック チュートリアル)

キーの入力を求められた場合は、[キーがありません]を選択します。デスクトップエクスペリエンスを選択す...

mysql 複数テーブル接続削除関数の削除

単一のテーブルを削除する: tableName から columnName = value を削除し...

Linux 向けの強化されたスクリーンショットと共有ツール: ScreenCloud

ScreenCloud は、必要だとは思わなかった素晴らしい小さなアプリです。デスクトップ Lin...

Linuxカーネルとデバイスツリーのコンパイルと書き込みを分析する

目次1. 材料を準備する2. Linuxカーネルファイルをダウンロードする3. コンパイル4. TF...

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

この記事では、MySQL 8.0.14のインストールと設定のプロセスを記録しています。具体的な内容は...

MySQL Shell import_tableデータインポートの実装

目次1. import_tableの紹介2. データのロードとテーブル関数のインポートの例2.1 L...

HTML チュートリアル: 順序なしリスト

<br />原文: http://andymao.com/andy/post/102.h...