push【末尾要素追加】
pop【末尾要素削除】
shift【先頭要素削除】
unshift【先頭要素挿入】
splice【要素削除&挿入 (配列変更あり)】
toSpliced【要素削除&挿入 (配列変更なし)】

Array.prototype.push【末尾要素追加】

メモ

概要

  • 配列末尾要素追加
    • 配列を変更

関連

外部リンク

構文

array.push( ...items )

要素追加後の要素数
items追加要素

const array = [1, 2, 3];
console.log( array );             // 出力:(3) [1, 2, 3]
console.log( array.push() );      // 出力:3
console.log( array );             // 出力:(3) [1, 2, 3]
console.log( array.push(4) );     // 出力:4
console.log( array );             // 出力:(4) [1, 2, 3, 4]
console.log( array.push(5, 6) );  // 出力:6
console.log( array );             // 出力:(6) [1, 2, 3, 4, 5, 6]

Array.prototype.pop【末尾要素削除】

メモ

概要

  • 末尾要素削除し削除要素を返却
    • 配列を変更

関連

外部リンク

構文

array.pop()

削除した末尾要素 (undefined:空の配列)

const array = [1, 2, 3];
console.log( array );       // 出力:(3) [1, 2, 3]
console.log( array.pop() ); // 出力:3
console.log( array );       // 出力:(2) [1, 2]
console.log( array.pop() ); // 出力:2
console.log( array );       // 出力:[1]
console.log( array.pop() ); // 出力:1
console.log( array );       // 出力:[]
console.log( array.pop() ); // 出力:undefined
console.log( array );       // 出力:[]

Array.prototype.shift【先頭要素削除】

メモ

概要

  • 先頭要素削除し削除要素を返却
    • 配列を変更

関連

外部リンク

構文

array.shift()

削除された先頭要素

const array = [1, 2, 3];
console.log( array.shift() ); // 出力:1
console.log( array );         // 出力:(2) [2, 3]
console.log( array.shift() ); // 出力:2
console.log( array );         // 出力:[3]
console.log( array.shift() ); // 出力:3
console.log( array );         // 出力:[]
console.log( array.shift() ); // 出力:undefined
console.log( array );         // 出力:[]

Array.prototype.unshift【先頭要素挿入】

メモ

概要

  • 配列先頭要素挿入
    • 配列を変更

関連

外部リンク

構文

array.unshift( ...items )

挿入後の配列の要素数
items挿入要素

const array = [1, 2, 3, 4];
console.log( array.unshift() );         // 出力:4
console.log( array );                   // 出力:(4) [1, 2, 3, 4]
console.log( array.unshift(100, 200) ); // 出力:6
console.log( array );                   // 出力:(6) [100, 200, 1, 2, 3, 4]
console.log( array.unshift([50, 60]) ); // 出力:7
console.log( array );                   // 出力:(7) [Array(2), 100, 200, 1, 2, 3, 4]
console.log( array[0] );                // 出力:(2) [50, 60]

Array.prototype.splice【要素削除&挿入 (配列変更あり)】
Array.prototype.toSpliced【要素削除&挿入 (配列変更なし)】

メモ

概要

  • 配列の要素を削除し、その位置に別の要素を挿入
    • 削除のみも可
      メソッド備考
      splice【要素削除&挿入 (配列変更あり)】元配列の変更あり
      toSpliced【要素削除&挿入 (配列変更なし)】元配列の変更なし

関連

外部リンク

構文

array.splice( start[, deleteCount[, ...items]] )

削除要素
start削除開始要素位置 (詳細は下記参照)
deleteCount削除要素数 (省略:以降全て削除)
items挿入要素
array.toSpliced( start, skipCount, ...items ) 

処理後の新規配列
startスキップ開始要素位置 (詳細は下記参照)
skipCountスキップ要素数
items挿入要素
start備考
0 ≦start先頭からの要素位置
start< 0 末尾からの要素位置
(-1:末尾)

// 後ろ削除
const array_A = [0, 1, 2, 3, 4, 5];
const item_A = array_A.splice(2);
console.log( item_A );   // 出力:(4) [2, 3, 4, 5]
console.log( array_A );  // 出力:(2) [0, 1]

// 部分削除
const array_B = [0, 1, 2, 3, 4, 5];
const item_B = array_B.splice(2, 3);
console.log( item_B );   // 出力:(3) [2, 3, 4]
console.log( array_B );  // 出力:(3) [0, 1, 5]

// 削除&挿入
const array_C = [0, 1, 2, 3, 4, 5];
const item_C = array_C.splice(2, 3, 10, 20);
console.log( item_C );   // 出力:(3) [2, 3, 4]
console.log( array_C );  // 出力:(5) [0, 1, 10, 20, 5]

// 削除&挿入 (末尾からの要素位置)
const array_D = [-5, -4, -3, -2, -1];
const item_D = array_D.splice(-4, 3, 100, 200);
console.log( item_D );   // 出力:(3) [-4, -3, -2]
console.log( array_D );  // 出力:(4) [-5, 100, 200, -1]
// 部分削除
const array_X = [0, 1, 2, 3, 4, 5];
const array_A = array_X.toSpliced(1, 3);
console.log( array_A );  // 出力:(3) [0, 4, 5]
console.log( array_X );  // 出力:(6) [0, 1, 2, 3, 4, 5]

// 削除&挿入
const array_B = array_X.toSpliced(1, 3, 10, 20);
console.log( array_B );  // 出力:(5) [0, 10, 20, 4, 5]
console.log( array_X );  // 出力:(6) [0, 1, 2, 3, 4, 5]

// 削除&挿入 (末尾からの要素位置)
const array_Y = [-5, -4, -3, -2, -1];
const array_C = array_Y.toSpliced(-4, 3, 100, 200);
console.log( array_C );  // 出力:(4) [-5, 100, 200, -1]
console.log( array_Y );  // 出力:(5) [-5, -4, -3, -2, -1]