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]