array.concat()の解説

array.concat()は、配列を他の配列や値と連結して新しい配列を作成するためのメソッドです。このメソッドは元の配列を変更せず、新しい配列を返します。

基本的な使い方

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const result = array1.concat(array2);

console.log(result); // [1, 2, 3, 4, 5, 6]
console.log(array1); // [1, 2, 3] （元の配列は変更されない）

複数の配列を連結

concatを使って複数の配列を一度に連結することも可能です。

const array1 = [1];
const array2 = [2, 3];
const array3 = [4, 5, 6];
const result = array1.concat(array2, array3);

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

配列と値を連結

配列だけでなく、単一の値を連結することも可能です。

const array = [1, 2, 3];
const result = array.concat(4, 5, [6, 7]);

console.log(result); // [1, 2, 3, 4, 5, 6, 7]

ネストされた配列を扱う

concatはネストされた配列を展開せず、そのまま保持します。

const array = [1, 2];
const nestedArray = [3, [4, 5]];
const result = array.concat(nestedArray);

console.log(result); // [1, 2, 3, [4, 5]]

array.join()の解説

array.join()は、配列内の要素を指定した区切り文字（separator）で連結して、文字列を作成するメソッドです。このメソッドは元の配列を変更せず、文字列を返します。

基本的な使い方

const array = [1, 2, 3];
const result = array.join(',');

console.log(result); // "1,2,3"

区切り文字を変更

区切り文字を変更することで、さまざまな形式の文字列を生成できます。

const array = ['a', 'b', 'c'];
console.log(array.join('-')); // "a-b-c"
console.log(array.join(''));  // "abc"
console.log(array.join(' | ')); // "a | b | c"

空配列の場合

空の配列に対してjoinを使用すると、空文字列を返します。

const emptyArray = [];
console.log(emptyArray.join(',')); // ""

undefinedやnullを含む配列

配列内にundefinedやnullがある場合、それらは空文字列として扱われます。

const array = [1, null, 2, undefined, 3];
console.log(array.join(',')); // "1,,2,,3"

concatとjoinの違い

concatは複数の配列や値を新しい配列として連結するのに対し、joinは配列の要素を1つの文字列として結合するものです。

// concatの例
const array1 = [1, 2];
const array2 = [3, 4];
const resultConcat = array1.concat(array2);
console.log(resultConcat); // [1, 2, 3, 4]

// joinの例
const array = [1, 2, 3, 4];
const resultJoin = array.join('-');
console.log(resultJoin); // "1-2-3-4"

応用例

配列の内容をCSV形式に変換

joinを使えば、簡単にCSV形式の文字列を生成できます。

const data = ['Name', 'Age', 'City'];
const csv = data.join(',');

console.log(csv); // "Name,Age,City"

ネストされた配列をフラット化

concatを再帰的に使用することで、ネストされた配列をフラット化できます。

const nestedArray = [1, [2, [3, 4]], 5];

function flatten(array) {
    return array.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);
}

console.log(flatten(nestedArray)); // [1, 2, 3, 4, 5]

文字列から配列を作成して加工

文字列をsplit()で配列に変換し、join()で加工できます。

const sentence = "Hello World!";
const words = sentence.split(' '); // ["Hello", "World!"]
const hyphenated = words.join('-');

console.log(hyphenated); // "Hello-World!"

まとめ

array.concat()とarray.join()は、配列を操作する上で非常に便利なメソッドです。concatは新しい配列を作成するために使用され、joinは配列を文字列に変換するために使用されます。それぞれの用途や特徴を理解し、適切に使い分けましょう。

array.concat()の解説に戻る

array.join()の解説に戻る

concatとjoinの違いに戻る

応用例に戻る