概要
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); // => []