concat()【連結】
filter()【抽出生成】
map()【配列変換生成】
slice()【部分コピー】

Array.prototype.concat()【連結】

メモ

  • 配列に要素 (配列も可) を連結して、配列新規生成
    • 元の配列は変更なし
  • 外部リンク (英語)
    Array.prototype.concat ( ...arguments )
    ES2016 (7) ES2015 (6) ES5.1

構文

array.concat( ...arguments )

戻り値連結された新規生成配列
arguments連結要素 (配列も可)

var array;
var arrayNew;

array = ['a', 'b'];
arrayNew = array.concat(1, 2);
console.log(array.length, array);       // 出力:2 ["a", "b"]
console.log(arrayNew.length, arrayNew); // 出力:4 ["a", "b", 1, 2]

arrayNew = array.concat([1, 2], ['A', 'B']);
console.log(array.length, array);       // 出力:2 ["a", "b"]
console.log(arrayNew.length, arrayNew); // 出力:6 ["a", "b", 1, 2, "A", "B"]

Array.prototype.filter()【抽出生成】

メモ

構文

array.filter( callbackfn[, thisArg] )

戻り値新規生成配列 (callbackfnの戻り値が true の要素のみの配列)
callbackfn抽出用コールバック関数 (詳細は下記参照)
thisArgcallbackfn内でthis で参照されるオブジェクト
例外TypeError 例外 (callbackfnが呼び出し不可)
コールバック関数 引数名 (例)説明
value要素値
index要素インデックス
array配列 オブジェクト
戻り値型説明
Boolean型true:有効な要素
false:無効な要素

// 0 以上の場合、true
function funcPlus(value, index, array) {
  var ret = true;
  if (0 <= value) {
    ret = false;
  }
  console.log(value, index, array, ret);
  return ret;
}
// 指定値 以上の場合、true
function funcUpper(value, index, array) {
  var ret = true;
  if (this <= value) {
    ret = false;
  }
  console.log(value, index, array, this, ret);
  return ret;
}

array = [10, , -20, 60, 30, -30, 90]; // 2番目の項目は省略

var arrayNew = array.filter(funcPlus); // 0 以上を抽出
console.log(arrayNew.length, arrayNew);
// 出力:0 0 [10, 2: -20, 3: 60, 4: 30, 5: -30, 6: 90] true
// 出力:-20 2 [10, 2: -20, 3: 60, 4: 30, 5: -30, 6: 90] false
// 出力:60 3 [10, 2: -20, 3: 60, 4: 30, 5: -30, 6: 90] true
// 出力:30 4 [10, 2: -20, 3: 60, 4: 30, 5: -30, 6: 90] true
// 出力:-30 5 [10, 2: -20, 3: 60, 4: 30, 5: -30, 6: 90] false
// 出力:90 6 [10, 2: -20, 3: 60, 4: 30, 5: -30, 6: 90] true
// 出力:4 [10, 60, 30, 90]

arrayNew = array.filter(funcUpper, 50); // 指定値 以上を抽出
console.log(arrayNew.length, arrayNew);
// 出力:10 0 [10, 2: -20, 3: 60, 4: 30, 5: -30, 6: 90] Number { 50 } false
// 出力:-20 2 [10, 2: -20, 3: 60, 4: 30, 5: -30, 6: 90] Number { 50 } false
// 出力:60 3 [10, 2: -20, 3: 60, 4: 30, 5: -30, 6: 90] Number { 50 } true
// 出力:30 4 [10, 2: -20, 3: 60, 4: 30, 5: -30, 6: 90] Number { 50 } false
// 出力:-30 5 [10, 2: -20, 3: 60, 4: 30, 5: -30, 6: 90] Number { 50 } false
// 出力:90 6 [10, 2: -20, 3: 60, 4: 30, 5: -30, 6: 90] Number { 50 } true
// 出力:2 [60, 90]

arrayNew = array.filter(null);    // TypeError 例外

Array.prototype.map()【配列変換生成】

メモ

構文

array.map( callbackfn[, thisArg] )

戻り値変換後の新規生成配列
callbackfnコールバック関数 (詳細は下記参照)
thisArgcallbackfn内でthis で参照されるオブジェクト
例外TypeError 例外 (callbackfnが呼び出し不可)
コールバック関数 引数名 (例)説明
value要素値
index要素インデックス
array配列 オブジェクト
戻り値型説明
任意変換後の要素値

// 100 を加算
function func(value, index, array) {
  return (value + 100);
}
// 指定値を加算
function func2(value, index, array) {
  return (value + this);
}

var array = [1, 2, 3, , 5]; // 4番目の項目は省略
console.log(array.map(func));       // 出力:[101, 102, 103, 4: 105]
console.log(array.map(func2, 50));  // 出力:[51, 52, 53, 4: 55]
console.log(array.map(null));       // TypeError 例外

Array.prototype.slice()【部分コピー】

メモ

  • 配列を部分コピー新規生成 (シャローコピー:配列内のオブジェクトは新規生成なし)
    • 開始要素位置を0、終了要素位置を省略すれば全コピー
    • 元の配列は変更なし
  • 外部リンク (英語)
    Array.prototype.slice (start, end)
    ES2016 (7) ES2015 (6) ES5.1

構文

array.slice( start[, end] )

戻り値新規生成配列 (実際の終了要素位置 < 実際の開始要素位置:空配列)
start開始要素位置 (詳細は下記参照)
end終了要素位置 (この位置の要素は含まない:詳細は下記参照)
start説明
0 ≦ start先頭からの要素位置
start < 0末尾からの要素位置
end説明
0 ≦ end先頭からの要素位置
end < 0末尾からの要素位置
配列より大きい位置
undefined
省略
配列の末尾

var array = [10, 20, 30, 40, 50];
console.log(array.slice(1, 4));   // 出力:[20, 30, 40]
console.log(array.slice(1, -1));  // 出力:[20, 30, 40]
console.log(array.slice(-4, 4));  // 出力:[20, 30, 40]
console.log(array.slice(-4, -1)); // 出力:[20, 30, 40]
console.log(array.slice(1));      // 出力:[20, 30, 40, 50]
console.log(array.slice(4, 1));   // 出力:[]
console.log(array);               // 出力:[10, 20, 30, 40, 50] 元の配列は変更なし

var arrayInner = [2, 20, 200];
array = [ 1, arrayInner, 3, 4, 5 ];
var arrayCopy = array.slice(0); // コピー
console.log(array);             // 出力:[1, Array[3], 3, 4, 5]
console.log(array[1]);          // 出力:[2, 20, 200]
console.log(arrayCopy);         // 出力:[1, Array[3], 3, 4, 5]
console.log(arrayCopy[1]);      // 出力:[2, 20, 200]

array[0] = 10;                  // 値変更
arrayInner[1] = 999;            // オブジェクト変更
console.log(array);             // 出力:[10, Array[3], 3, 4, 5]
console.log(array[1]);          // 出力:[2, 999, 200]
console.log(arrayCopy);         // 出力:[1, Array[3], 3, 4, 5] 値変更なし
console.log(arrayCopy[1]);      // 出力:[2, 999, 200] オブジェクト変更あり