概要

JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。

「【JavaScript】JavaScript入門一覧」に他の記事をまとめています。

この記事で理解できること

配列の要素の追加、削除方法
配列の結合方法
配列の展開方法

配列の要素の追加、削除

要素を配列の末尾へ追加(push)
配列の先頭へ要素を追加(unshift)
末尾から配列の要素を削除(pop)
配列の先頭から要素を削除(shift)

要素を配列の末尾へ追加(`push`)

const numbers = [ 100, 200, 300 ];

// 配列の末尾へ要素を追加
numbers.push(400);
console.log(numbers); // => [ 100, 200, 300, 400 ]

配列の先頭へ要素を追加(`unshift`)

const numbers = [ 100, 200, 300 ];

// 配列の末尾へ要素を追加
numbers.unshift(400);
console.log(numbers); // => [ 400, 100, 200, 300 ]

末尾から配列の要素を削除(`pop`)

popメソッドの返り値として、末尾から削除した要素が返される。

const numbers = [ 100, 200, 300 ];

// popメソッドは末尾から削除した要素を返す
console.log(numbers.pop()); // => 300

// 要素削除後の配列
console.log(numbers);       // => [ 100, 200 ]

配列の先頭から要素を削除(`shift`)

shiftメソッドの返り値として、先頭から削除した要素が返される。

const numbers = [ 100, 200, 300 ];

// shiftメソッドは先頭から削除した要素を返す
console.log(numbers.shift()); // => 100

// 要素削除後の配列
console.log(numbers);         // => [ 200, 300 ]

配列同士を結合(`concat`)

配列と配列を結合し、新しい配列を生成することができる。
配列だけではなく、任意の値を要素として結合できる。

const numbers1 = [100, 200, 300];
const numbers2 = [400, 500, 600];

const newNumbers = numbers1.concat(numbers2);
console.log(newNumbers); // => [ 100, 200, 300, 400, 500, 600 ]

// 数値リテラルを結合してみる
const newArray = newNumbers.concat(700);
console.log(newArray);   // => [ 100, 200, 300, 400, 500, 600, 700 ]

配列の展開(`...Spread構文`)

concatメソッドで配列同士を結合するのと同様の結果を取得できる。
異なる点としては、配列リテラルの任意の位置に展開できる。
ES2015から導入。

const numbers = [400, 500, 600];

// concatで結合
const newNumbersConcat = [100, 200, 300].concat(numbers);
console.log(newNumbersConcat);   // => [ 100, 200, 300, 400, 500, 600 ]

// spread構文...(ドットを3つ)
const newNumbersSpread1 = [100, 200, 300, ...numbers];
console.log(newNumbersSpread1);  // => [ 100, 200, 300, 400, 500, 600 ]

// 任意の位置に展開してみる
const newNumbersSpread2 = [100, 200, ...numbers, 300];
console.log(newNumbersSpread2);  // => [ 100, 200, 400, 500, 600, 300 ]

配列から全要素・任意の要素を削除する方法

Array.prototype.spliceメソッドを使用
lengthプロパティへの代入
空の配列を代入

Array.prototype.spliceメソッドを使用

第一引数に削除開始位置のインデックス、第二引数に削除する要素の数を指定する。
削除した要素は自動で詰められる。

const array = ["A", "B", "C"];

// 配列のインデックス1から一つの要素を削除
array.splice(1, 1);
console.log(array);    // => [ 'A', 'C' ]

// 自動で要素が詰められている
console.log(array[1]); // => C

const array = ["A", "B", "C"];

// 全要素を削除
array.splice(0, array.length);
console.log(array); // => []

lengthプロパティへの代入

const array = ["A", "B", "C"];

// lengthに0を代入することで全要素を削除
array.length = 0;
console.log(array); // => 0

空の配列を代入

// 再代入を行うのでletで定義する必要がある
let array = ["A", "B", "C"];

// 空の配列を代入することで全要素を削除
array = [];
console.log(array); // => []