JavaScript - 2次元配列を1次元配列に変換する2つの方法

JavaScriptで2次元配列を1次元配列に変換する2つの方法を紹介します。

ここで、2次元配列の意味は、 arrのように配列内に1次元配列があるオブジェクトを指します。 1次元配列は、 arr2のように配列内にオブジェクトだけがあることを指します。

const arr = [['a', 'b'], ['c', 'd'], ['e', 'f']];
const arr2 = [ 'a', 'b', 'c', 'd', 'e', 'f' ];

1. reduce() を使用して 2 次元配列を 1 次元配列に変える

reduce()concat() を使って二次元配列を一次元に変換することができます。 reduce() は配列の最初の要素から最後の要素まで巡回しながら演算を行い、累積されたオブジェクトを返す関数です。配列を巡回しながら、 concat() で要素を 1 次元配列にします。そして A.concat(B) は、A 配列の要素と B 配列の要素をすべて合わせて 1 つの配列に返す関数です。

const arr = [['a', 'b'], ['c', 'd'], ['e', 'f']];

const arr2 = arr.reduce(function (acc, cur) {
  return acc.concat(cur);
});

console.log(arr2);

Output:

[ 'a', 'b', 'c', 'd', 'e', 'f' ]

1.1 concat() の代わりに Spread operator を使う

2つの配列を1つの配列にするとき、 concat() の代わりに以下のように Spread operator を使うことができます。

const arr = [['a', 'b'], ['c', 'd'], ['e', 'f']];

const arr2 = arr.reduce(function (acc, cur) {
  return [...acc, ...cur];
});

console.log(arr2);

2. for反復文で2次元配列を1次元配列に変える

forEach()concat() を使って二次元配列を一次元にすることができます。以下のように、配列のすべての要素を巡回しながら一次元配列に変換するように実装できます。

const arr = [['a', 'b'], ['c', 'd'], ['e', 'f']];

let arr2 = [];
arr.forEach((element) => {
  arr2 = arr2.concat(element);
})

console.log(arr2);

Output:

[ 'a', 'b', 'c', 'd', 'e', 'f' ]

2.1 concat() の代わりに Spread operator を使う

上記と同様に、 concat() の代わりに Spread operator を使うこともできます。

const arr = [['a', 'b'], ['c', 'd'], ['e', 'f']];

let arr2 = [];
arr.forEach((element) => {
  arr2 = [...arr2, ...element];
})

console.log(arr2);

Related Posts

codechachaCopyright ©2019 codechacha