配列リテラル・コンストラクタ
from【配列生成 (オブジェクト指定)】
of【配列生成 (要素指定)】
flat【配列生成 (深さ指定)】
flatMap【配列生成 (関数指定)】

配列リテラル
[ new ] Array【コンストラクタ】

メモ

概要

  • 配列オブジェクトの生成
    • new の有無は関係なくオブジェクト生成
    • 入れ子の多次元配列可能
    • 同一次元の要素数が違うジャグ配列可能
    • リテラル指定の最後がカンマのみの場合、無視 (C言語系と同様)
      (但し、実装によっては有効値 または エラー)
    • 構文(3)で数値が１つの配列を生成しようと意図すると、構文(2)と認識されるので注意
      ( Array.of【配列生成 (要素指定)】 は可能 )
  • 連想配列については、[ new ] Object【コンストラクタ】を参照

外部リンク

構文

(1) リテラル 指定
[ [ item1 ] , [ item2 ] , [ … ] ]

(2) 配列要素数 指定
[new] Array( len )

(3) 配列要素 指定
[new] Array( ...items )

作成された配列 オブジェクト
item1～配列要素
len配列要素数
items配列要素 (構文【配列要素数 指定】 以外)

例外RangeError 例外
lenが符号なし32ビット整数 (0 ～ 232-1)の範囲外

例

var array;

array = [1, 2, 3];
console.log(array.length, array);           // 出力：3 [1, 2, 3]

array = [ [1], [2, 3], [4, 5, 6] ];
console.log(array.length, array);           // 出力：3 [Array[1], Array[2], Array[3]]
console.log(array[0], array[1], array[2]);  // 出力：[1] [2, 3] [4, 5, 6]

array = Array(1, 2, 3);
console.log(array.length, array);           // 出力：[1, 2, 3]

array = Array([1], [2, 3], [4, 5, 6]);
console.log(array.length, array);           // 出力：3 [Array[1], Array[2], Array[3]]
console.log(array[0], array[1], array[2]);  // 出力：[1] [2, 3] [4, 5, 6]

array = new Array(1, 2, 3);
console.log(array.length, array);           // 出力：[1, 2, 3]

array = new Array([1], [2, 3], [4, 5, 6]);
console.log(array.length, array);           // 出力：3 [Array[1], Array[2], Array[3]]
console.log(array[0], array[1], array[2]);  // 出力：[1] [2, 3] [4, 5, 6]

array = Array(3);
array[0] = [1];
array[1] = [2, 3];
array[2] = [4, 5, 6];
console.log(array.length, array);           // 出力：3 [Array[1], Array[2], Array[3]]
console.log(array[0], array[1], array[2]);  // 出力：[1] [2, 3] [4, 5, 6]

array = new Array(3);
array[0] = [1];
array[1] = [2, 3];
array[2] = [4, 5, 6];
console.log(array.length, array);           // 出力：3 [Array[1], Array[2], Array[3]]
console.log(array[0], array[1], array[2]);  // 出力：[1] [2, 3] [4, 5, 6]

array = [];
console.log(array.length, array);           // 出力：0 []

array = [, 2, ,4 , ];
console.log(array.length, array);           // 出力：4 [1:2, 3:4] 実装によっては最後のカンマが有効 または エラー

Array.from【配列生成 (オブジェクト指定)】

メモ

概要

  • 配列形式オブジェクト・イテラブル オブジェクト から Array【配列】オブジェクト を生成
    • 元のオブジェクトは変更なし
    • マッピング関数を指定して、要素値の変換が可能

外部リンク

構文

Array.from( items[, mapfn[, thisArg]] ) 

Array【配列】オブジェクト
items元になるオブジェクト (下記のオブジェクトが有効)
配列形式オブジェクト (関数のarguments【引数リスト】 等)
イテラブル オブジェクト (Array【配列】・Map【マップ】 等)
mapfnマッピング関数 (詳細は下記参照)
thisArgマッピング関数内でthis で参照されるオブジェクト

TypeError 例外
items が不正
mapfn が呼び出し不可
253 - 1 以上の要素が存在
マッピング関数 引数名 (例)説明
value要素値
index要素インデックス
戻り値型説明
任意新しい配列の要素値

例

// 関数のarguments【引数リスト】
function func(p1, p2, p3) {
  return Array.from(arguments);
}

const arrayNew = func("x", "y", "z");
console.log(arrayNew);

// 配列形式
function funcMap(value, index) {
  return index + "-" + value.toUpperCase();
}

function funcMap2(value, index) {
  return index + this + value;
}

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
console.log(arrayLike);
// 出力：Object(3)
// 出力：0: "a"
// 出力：1: "b"
// 出力：2: "c"
// 出力：length: 3
console.log(typeof arrayLike, Array.isArray(arrayLike));
// 出力：object false

let arrayNew = Array.from(arrayLike);
console.log(arrayNew);
// 出力：Array(3) [ "a", "b", "c" ]

arrayNew = Array.from(arrayLike, funcMap);
console.log(arrayNew);
// 出力：Array(3) [ "0-A", "1-B", "2-C" ]

arrayNew = Array.from(arrayLike, funcMap2, "#");
console.log(arrayNew);
// 出力：Array(3) [ "0#a", "1#b", "2#c" ]

// String【文字列】オブジェクト
function funcMap(value, index) {
  return index + "-" + value.toUpperCase();
}

function funcMap2(value, index) {
  return index + this + value;
}

const str = "string";
let arrayNew = Array.from(str);
console.log(arrayNew);
// 出力：Array(6) [ "s", "t", "r", "i", "n", "g" ]

arrayNew = Array.from(str, funcMap);
console.log(arrayNew);
// 出力：Array(6) [ "0-S", "1-T", "2-R", "3-I", "4-N", "5-G" ]

arrayNew = Array.from(str, funcMap2, "#");
console.log(arrayNew);
// 出力：Array(6) [ "0#s", "1#t", "2#r", "3#i", "4#n", "5#g" ]

function funcMap(value, index) {
  return index * 100 + value;
}

function funcMap2(value, index) {
  return index * this + value;
}

const array = [ 1, 2, 3, 4, 5 ];
let arrayNew = Array.from(array);
console.log(arrayNew);
// 出力：Array(5) [ 1, 2, 3, 4, 5 ]

arrayNew = Array.from(array, funcMap);
console.log(arrayNew);
// 出力：Array(5) [ 1, 102, 203, 304, 405 ]

arrayNew = Array.from(array, funcMap2, 1000);
console.log(arrayNew);
// 出力：Array(5) [ 1, 1002, 2003, 3004, 4005 ]

function funcMap(value, index) {
  const [key, val] = value;
  return index + key + val;
}

function funcMap2(value, index) {
  const [key, val] = value;
  return index + this + key + val;
}

const map = new Map([['a', 'A'], ['b', 'B'], ['c', 'C']]);
console.log(map);
// 出力：Map(3) { a → "A", b → "B", c → "C" }

let arrayNew = Array.from(map);
console.log(arrayNew);
// 出力：Array(3)
// 出力：0: Array [ "a", "A" ]
// 出力：1: Array [ "b", "B" ]
// 出力：2: Array [ "c", "C" ]

arrayNew = Array.from(map, funcMap);
console.log(arrayNew);
// 出力：Array(3) [ "0aA", "1bB", "2cC" ]

arrayNew = Array.from(map, funcMap2, "-");
console.log(arrayNew);
// 出力：Array(3) [ "0-aA", "1-bB", "2-cC" ]

Array.of【配列生成 (要素指定)】

メモ

概要

  • 要素を指定してArray【配列】オブジェクト を生成

外部リンク

構文

Array.of( ...items ) 

Array【配列】オブジェクト
items要素値

例

let array = Array.of(1, 2, 3);
console.log(array);
// 出力：Array(3) [ 1, 2, 3 ]

array = Array.of(3);
console.log(array);
// 出力：Array [ 3 ]
array = Array(3);
console.log(array);
// 出力：Array(3) [ <3 empty slots> ]

array = Array.of();
console.log(array);
// 出力：Array []

Array.prototype.flat【配列生成 (深さ指定)】

メモ

概要

  • 指定した深さまで要素を再帰的に検索して、配列を新規生成
    • 空の要素はスキップ
    • 元の配列は変更なし

外部リンク

構文

array.flat( [depth] ) 

Array【配列】オブジェクト
depth深さ (省略：1)
＜ 1：元の要素値

例

const array = [1, , [31, 32], [41, [421, 422], , 44], 5];
let arrayNew = array.flat();
console.log(arrayNew);
// 出力：Array(7) [ 1, 31, 32, 41, Array(2) [421, 422], 44, 5 ]

arrayNew = array.flat(1);
console.log(arrayNew);
// 出力：Array(7) [ 1, 31, 32, 41, Array(2) [421, 422], 44, 5 ]

arrayNew = array.flat(2);
console.log(arrayNew);
// 出力：Array(8) [ 1, 31, 32, 41, 421, 422, 44, 5 ]

arrayNew = array.flat(99);
console.log(arrayNew);
// 出力：Array(8) [ 1, 31, 32, 41, 421, 422, 44, 5 ]

arrayNew = array.flat(0);
console.log(arrayNew);
// 出力：Array(4) [ 1, Array(2) [ 31, 32 ], Array(4) [ 41, Array(2) [ 421, 422 ], 44], 5 ]

Array.prototype.flatMap【配列生成 (関数指定)】

メモ

概要

  • 指定関数で要素値を変換して、配列を新規生成
    • 空の要素はスキップ
    • 関数内で元の配列の変更可

外部リンク

構文

array.flatMap( mapperFunction[, thisArg] ) 

Array【配列】オブジェクト
mapperFunctionマッピング関数 (詳細は下記参照)
thisArgmapperFunction内でthis で参照されるオブジェクト

TypeError 例外mapperFunctionが呼び出し不可
マッピング関数 引数名 (例)説明
value要素値
index要素インデックス
array処理中の配列
戻り値型説明
任意新しい配列の要素値

例

function funcMap(value, index, array) {
  return String(index) + "-" + String(value);
}

function funcMap2(value, index, array) {
  return index + this + value;
}

function funcMap3(value, index, array) {
  array[index] *= 2;
  return String(index) + "--" + String(value);
}

const array = [10, 20, , 40];

let arrayNew = array.flatMap(funcMap);
console.log(arrayNew);
// 出力：Array(3) [ "0-10", "1-20", "3-40" ]

arrayNew = array.flatMap(funcMap2, "#");
console.log(arrayNew);
// 出力：Array(3) [ "0#10", "1#20", "3#40" ]
console.log(array);
// 出力：Array(4) [ 10, 20, <1 empty slot>, 40 ]

arrayNew = array.flatMap(funcMap3);
console.log(arrayNew);
// 出力：Array(3) [ "0--10", "1--20", "3--40" ]
console.log(array);
// 出力：Array(4) [ 20, 40, <1 empty slot>, 80 ]