この記事では、配列から部分的な要素を抽出したり、複数の配列を結合したり、配列を文字列に変換するためのメソッドについて詳しく解説します。
具体的には、slice,concat,join,toString,toLocaleStringの5つのメソッドについて、サンプルコードとともにその動作や使い方を説明しています。
解説:
slice() は、元の配列の一部を抽出し、新しい配列として返すメソッドです。
書式は slice(開始インデックス, 終了インデックス?) となり、終了インデックスは含まれません。
元の配列は変更されないため、非破壊的な操作として安心して利用できます。
// slice() サンプル
const arr = [0, 1, 2, 3, 4, 5];
// インデックス2からインデックス5(5は除く)まで抽出
const subArray = arr.slice(2, 5);
console.log(subArray); // 出力: [2, 3, 4]
// 元の配列は変更されず
console.log(arr); // 出力: [0, 1, 2, 3, 4, 5]
解説:
concat() は、複数の配列や値を結合して、新しい配列を生成するメソッドです。
元の配列自体は変更されず、単純に内容を結合した結果が返されます。
異なる種類の値(配列と非配列)も組み合わせることが可能です。
// concat() サンプル
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const singleValue = 7;
// 配列と値を結合
const combined = arr1.concat(arr2, singleValue);
console.log(combined); // 出力: [1, 2, 3, 4, 5, 6, 7]
// 元の配列は変更されず
console.log(arr1); // 出力: [1, 2, 3]
解説:
join() は、配列の全要素を指定した区切り文字で連結し、1つの文字列として返します。
区切り文字を指定しなかった場合は、カンマ(,)がデフォルトとなります。
出力結果は文字列になるため、数値などの型情報は失われる点に注意が必要です。
// join() サンプル
const words = ['Hello', 'World', 'JavaScript'];
// スペースで連結
const sentence = words.join(' ');
console.log(sentence); // 出力: "Hello World JavaScript"
// デフォルト(カンマ区切り)
const defaultJoin = words.join();
console.log(defaultJoin); // 出力: "Hello,World,JavaScript"
解説:
toString() メソッドは、配列の各要素をカンマ区切りの文字列に変換して返します。
join() と似ていますが、引数を受け付けず、常にカンマで連結されます。
シンプルな変換が必要な場合に便利です。
// toString() サンプル
const arr = [10, 20, 30];
const str = arr.toString();
console.log(str); // 出力: "10,20,30"
解説:
toLocaleString() は、配列の各要素をローカライズされた文字列表現に変換し、カンマで連結した文字列を返します。
数値や日付オブジェクトなど、ロケールに依存した表現が必要な場合に役立ちます。
ユーザーの環境に合わせた表記となるため、多言語対応のサイトなどで使用されます。
// toLocaleString() サンプル
const arr = [123456.789, new Date('2023-10-01')];
const localeStr = arr.toLocaleString('de-DE'); // ドイツ形式での表記例
console.log(localeStr); // 出力例: "123.456,789, 01.10.2023"