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

Array.prototype.concat【連結】メソッド

メモ

  • 配列に要素 (配列も可) を連結して新しい配列オブジェクトを生成
  • 元の配列は変更なし

構文

concat ( [ item1 [ , item2 [ , … ] ] ] )

  • item1~:連結要素 (配列も可)

  • 連結された新しい配列オブジェクト

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【抽出生成】メソッド

メモ

構文

filter ( callbackfn [ , thisArg ] )

  • callbackfn:抽出用コールバック関数
    引数名 (例)説明
    value要素値
    index要素インデックス
    array配列 オブジェクト
    戻り値型説明
    Boolean型true:有効な要素
    false:無効な要素
  • thisArg:抽出用コールバック関数内でthis で参照されるオブジェクト

  • 新しい配列オブジェクト (抽出用コールバック関数の戻り値が true の要素のみの配列)

  • TypeError 例外callbackfn が呼び出し可能な関数オブジェクト以外

// 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【配列変換生成】メソッド

メモ

構文

map ( callbackfn [ , thisArg ] )

  • callbackfn:コールバック関数
    引数名 (例)説明
    value要素値
    index要素インデックス
    array配列 オブジェクト
    戻り値型説明
    任意変換後の要素値
  • thisArg:コールバック関数内でthis で参照されるオブジェクト

  • 変換後の生成配列

  • TypeError 例外callbackfn が呼び出し可能な関数オブジェクト以外

// 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、終了要素位置を省略すれば全コピー
  • 元の配列は変更なし

構文

slice ( start [, end] )

  • start:開始要素位置
    start説明
    0 ≦ start先頭からの要素位置
    start < 0末尾からの要素位置
  • end:終了要素位置 (この位置の要素は含まない)
    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] オブジェクト変更あり