JavaScriptには、配列操作のためのメソッドがいくつか用意されています。
かなり複雑な操作もかなり簡単に行えますので、ひととおり把握しておきましょう。
要素の追加
unshift() ： 配列の先頭に値を追加
const array = [1,2,3];
array.unshift(0);
console.log(array);
//[0,1,2,3]
push() ： 配列の末尾に値を追加
const array = [1,2,3];
array.push(4);
console.log(array);
//[1,2,3,4]
要素の削除
shift()：配列の先頭の値を切り取る
const array1 = [ 1, 2, 3];
const array2 = array1.shift();
console.log(array1) ;
//[2,3]
console.log(array2) ;
//[1]
pop() ： 配列の末尾の値を切り取る
const array1 = [ 1, 2, 3];
const array2 = array1.pop();
console.log(array1) ;
//[1,2]
console.log(array2) ;
//3
配列の要素を差し替え
splice()
const fruits = ["apple","orange","lemon","melon"]
const removedFruits = fruits.splice( 1, 2, 'grape');
console.log(fruits);
//["apple","grape","melon"]
console.log(removedFruits);
//["orange","lemon"]
少し複雑なので解説を加えます
spliceの引数には、以下のような意味があります。
splice(何番目の要素から,いくつの要素を,何に置き換えるか）
上記のコード例で言うと、以下のようになります。
splice(1番目の要素から,２つの要素を,「grape」に置き換える） ※第一引数に注意。配列の要素は0番目から始まるので、１番目の要素＝2つ目の要素。
つまり、上のコードでは、元の配列fruitsの１番目（2つめ）から、2つの要素（orangeとlemon）を、(grape)に差し替えるということです。
spliceは差し替えられた配列を返すので、removedFruitsは元の配列から取り除かれた2つの要素（orangeとlemon）を返します。
補足：第3引数以降について
第3引数以降はいくつでも指定できます。
つまり、差し替え時に挿入する値を複数指定できるのです。
const fruits = ["apple","orange","lemon","melon"]
const removedFruits = fruits.splice( 1, 2, 'grape','banana');
console.log(fruits);
//["apple","grape","banana","melon"]
console.log(removedFruits);
//["orange","lemon"]
上の例では元の配列(fruits)の１番目の要素(2つ目の要素)からふたつ(orangeとlemon)を、grapeとbananaに差し替えています。
配列を結合する
const array1 = [1,2,3];
const array2 = [4,5,6];
const array3 = array1.concat(array2);
console.log(array3);
//[1,2,3,4,5,6]
//元の配列は変わらない
console.log(array1);
//[1,2,3]
console.log(array2);
//[4,5,6]
配列の要素数を数える
const array = [1,2,3];
const arrayLength = array.length;
console.log(array.length);
//3
参考
・techacademyマガジン：JavaScriptで配列を結合する方法を現役エンジニアが解説【初心者向け】
・GRAY CODE：配列の要素の一部を置き換える
・ソフトウェア開発日記：Javascriptのunshift、shift、pop、pushメソッドの使い方
コメント