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

Array.prototype.concat【連結】

メモ

概要

  • 配列に要素 (配列も可) を連結して、配列を新規生成
    • 元の配列は変更なし

外部リンク

構文

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]; // ２番目の項目は省略

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]; // ４番目の項目は省略
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.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] オブジェクト変更あり