配列.flat () -配列内のネストした配列を描画する

配列メソッドシリーズのこの3番目の記事では、フラットメソッドとどのように動作するかを説明します.

フラットメソッドは何ですか？

The flat 配列のメソッドを使用して、配列内の入れ子配列を平坦化します.入れ子状配列とは何か

const array = [1, 2, [3, 4, [5, 6]]]

[3, 4, [5, 6]] はメイン配列の中にネストし、[5,6] も前の配列に入れ子になっています.
とflat これらの入れ子になった配列を親配列に連結できます.
返り値flat メソッドは連結された項目を含む新しい配列です.

フラットメソッドの構文

array.flat(depth)

The depth 引き数ネストするネストレベルを指定します.この例を使用します.

[1, 2, [3, 4, [5, 6]]]

深さ1[3, 4, [5, 6]深さ2[5, 6]深さ3 - 3番目の深さがありません
また、あなたはdepth of Infinity , どれが深いネストされた配列の巣を作るために深くなります🔥 ハハ.

平らな方法なしで

フラットメソッドなしで配列を平坦化する方法を示します.

const array = [1, 2, [3, 4, [5, 6]]]
const flattenedArr = []

// for 2 levels
for (let i = 0; i < array.length; i++) {
  const item = array[i]

  if (!Array.isArray(item)) {
    // not an array
    flattenedArr.push(item)
  } else {
    // for the first level
    for (let j = 0; j < item.length; j++) {
      const item2 = item[j]

      if (!Array.isArray(item2)) {
        // not an array
        flattenedArr.push(item2)
      } else {
        // for the second level
        flattenedArr.push(...item2)
      }
    }
  }
}

console.log(flattenedArr)
// [ 1, 2, 3, 4, 5, 6 ]

ループをループし、配列を平らにするだけです.The flat 方法は確かに寿命😅
注意:これは、それなしでそれをする唯一の方法でありませんflat メソッド.でより多くの方法をチェックしてくださいthis StackOverflow discussion

平らな方法で

const array = [1, 2, [3, 4, [5, 6]]]
const flattenedArr = array.flat(2)
// or array.flat(Infinity)

console.log(flattenedArr)
// [ 1, 2, 3, 4, 5, 6 ]

ブラウザサポート

The flat メソッドはES2019 ブラウザのサポートgotten from MDN が表示されます:

かなり良い.