JavaScript - 配列の先頭に要素を追加/削除する2つの方法

JavaScriptで shift(), splice() を使って配列の先頭に要素を追加/削除する方法を紹介します。

1. unshift() : 配列の先頭に要素を追加

unshift(element)は配列の先頭に element を追加します。ちなみに、push(element)は配列の最後に要素を追加します。

const arr = [1, 2, 3];

arr.unshift('A');
console.log(arr);

arr.unshift('B');
console.log(arr);

arr.unshift('C');
console.log(arr);

Output:

[ 'A', 1, 2, 3 ]
[ 'B', 'A', 1, 2, 3 ]
[ 'C', 'B', 'A', 1, 2, 3 ]

1.1 unshift() で複数の要素を配列に追加する

unshift() は、1 つ以上の要素を配列の先頭に追加することもできます。以下のように、引数として複数の要素を渡すだけです。

const arr = [1, 2, 3];

arr.unshift('A', 'B', 'C');
console.log(arr);

Output:

[ 'A', 'B', 'C', 1, 2, 3 ]

2. shift() : 配列の先頭の要素を削除

shift()は、配列の先頭の要素を1つ削除し、配列から削除されます要素の値を返します。ちなみに、pop() は配列の最後の要素を削除します。

const arr = [ 'C', 'B', 'A', 1, 2, 3 ];

let removed = arr.shift()
console.log("removed: " + removed);
console.log(arr);

removed = arr.shift()
console.log("removed: " + removed);
console.log(arr);

removed = arr.shift()
console.log("removed: " + removed);
console.log(arr);

Output:

removed: C
[ 'B', 'A', 1, 2, 3 ]
removed: B
[ 'A', 1, 2, 3 ]
removed: A
[ 1, 2, 3 ]

3. splice() : 配列の先頭に要素を追加

splice()を使用して、配列の先頭に要素を追加または削除することもできます。

splice() の Syntax を先に見ると、配列の startIndex から deleteCount 数だけ要素を削除します。そして、item1、item2など、引数に渡された要素を追加します。 たとえば、 splice(0, 0, A) は配列の Index 0 から 0 個の要素を削除し、A を追加します。つまり、配列の先頭にAを追加します。

array.splice(startIndex, deleteCount, item1, item2, ...)

上記のように、 splice(0, 0, element) は配列の先頭に要素を追加します。

const arr = [1, 2, 3];

arr.splice(0, 0, 'A');
console.log(arr);

arr.splice(0, 0, 'B');
console.log(arr);

arr.splice(0, 0, 'C');
console.log(arr);

Output:

[ 'A', 1, 2, 3 ]
[ 'B', 'A', 1, 2, 3 ]
[ 'C', 'B', 'A', 1, 2, 3 ]

3.1 splice()で複数の要素を配列に追加する

次のように splice() で配列に複数の要素を一度に追加できます。

const arr = [1, 2, 3];

arr.splice(0, 0, 'A', 'B', 'C');
console.log(arr);

Output:

[ 'A', 'B', 'C', 1, 2, 3 ]

4. splice() : 配列の先頭の要素を削除

splice(0, 1) は配列の Index 0 から要素 1 つを削除します。したがって、以下のように配列の先頭の要素 1 つを削除するコードを実装できます。

const arr = [ 'C', 'B', 'A', 1, 2, 3 ];

let removed = arr.splice(0, 1);
console.log("removed: " + removed);
console.log(arr);

removed = arr.splice(0, 1);
console.log("removed: " + removed);
console.log(arr);

removed = arr.splice(0, 1);
console.log("removed: " + removed);
console.log(arr);

Output:

removed: C
[ 'B', 'A', 1, 2, 3 ]
removed: B
[ 'A', 1, 2, 3 ]
removed: A
[ 1, 2, 3 ]

4.1 splice()で配列から複数の要素を一度に削除する

以下のように、配列の前から複数の要素を一度に削除できます。

const arr = [ 'C', 'B', 'A', 1, 2, 3 ];

let removed = arr.splice(0, 3);
console.log("removed: " + removed);
console.log(arr);

Output:

removed: C,B,A
[ 1, 2, 3 ]
codechachaCopyright ©2019 codechacha