JavaScriptにおける配列要素の削除についてまとめておく。
配列要素の追加については、前回作成した。(配列要素の追加方法)
今回もサンプルの配列として、以下を定義しておく。
const color = ["red", "white", "blue", "green"]
また、今回紹介するメソッドも配列(今回では配列color)そのものの要素を削除し、内容が変更されていまう破壊的メソッドであることに注意が必要である。
末尾の要素の削除
配列の末尾の要素を削除する場合は、pop()
を使用する。返り値は、削除された末尾の要素。また、配列の要素数も1減る。
const result = color.pop();
console.log(color); // [ 'red', 'white', 'blue' ]
console.log(result); // green
console.log(color.length); // 3
先頭の要素の削除
配列の先頭の要素を削除する場合は、shift()
を使用する。返り値は、削除された先頭の要素。先頭の要素が削除されると、後ろの要素が1つずつ前にずらされ、配列の要素数も1減る。
const result = color.shift();
console.log(color); //[ 'white', 'blue', 'green' ]
console.log(result); // red
console.log(color.length); // 3
###指定位置の要素を削除
配列の指定位置の要素を削除したい場合は、splice()
を使用する。splice()
の引数は以下となる。
第一引数:配列の要素の削除を行う位置(負の数で配列末尾から引いた位置も指定可)
第二引数:削除する要素数
返り値は、削除された要素の配列が返される。また、このメソッドも削除後、後ろの要素が1つずつ前にずらされ、要素数も1減る。例として、配列color
の"white", "blue"
を削除する場合以下のように書ける。
const result = color.splice(1,2);
console.log(color); //[ 'red', 'green' ]
console.log(result); // [ 'white', 'blue' ]
console.log(color.length); // 2