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

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

メモ

構文

(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 ] ] )
    ES2019 (10) ES2018 (9) ES2017 (8) ES2016 (7) ES2015 (6) ES5.1

構文

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.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.prototype.flat( [ depth ] )
    ES2019 (10) ES2018 (9) ES2017 (8) ES2016 (7) ES2015 (6) ES5.1

構文

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.prototype.flatMap ( mapperFunction [ , thisArg ] )
    ES2019 (10) ES2018 (9) ES2017 (8) ES2016 (7) ES2015 (6) ES5.1

構文

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 ]