🦁
【JavaScript】配列の操作
はじめに
この記事は学習ノートです。
配列の操作について、学んだことをまとめました。
要素の追加や削除
.push()
- 配列の末尾に、要素を追加する
- 戻り値は、新しい配列の要素数
例
const animals = ["cat", "dog", "rabbit"];
console.log(animals.push("sheep")); // 4
console.log(animals); // ["cat", "dog", "rabbit", "sheep"]
.pop()
- 配列の末尾から、要素を削除する
- 戻り値は、配列から削除した要素
例
const animals = ["cat", "dog", "rabbit"];
console.log(animals.pop()); // "rabbit"
console.log(animals); // ["cat", "dog"]
.unshift()
- 配列の先頭に、要素を追加する
- 戻り値は、新しい配列の要素数
例
const animals = ["cat", "dog", "rabbit"];
console.log(animals.unshift("sheep")); // 4
console.log(animals); // [ "sheep", "cat", "dog", "rabbit"]
.shift()
- 配列の先頭から、要素を削除する
- 戻り値は、配列から削除した要素
例
const animals = ["cat", "dog", "rabbit"];
console.log(animals.shift()); // "cat"
console.log(animals); // ["dog", "rabbit"]
.splice()
- 配列から要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更する
構文
splice(変化が開始する位置, 削除数)
splice(変化が開始する位置, 削除数, 追加する要素)
例1(削除)
const box = ["りんご", "いちご", "みかん"];
box.splice(1, 1);
console.log(box); // ["りんご", "みかん"]
例2(追加)
const box = ["りんご", "いちご", "みかん"];
box.splice(1, 0, "ぶどう");
console.log(box); // ["りんご", "ぶどう", "いちご", みかん"]
例3(削除と追加)
const box = ["りんご", "いちご", "みかん"];
box.splice(1, 1, "ぶどう");
console.log(box); // ["りんご", "ぶどう", みかん"]
要素数を数える
.length
例
const animals = ["cat", "dog", "rabbit"];
console.log(animals.length); // 3
繰り返し処理
for...of
const fruits = ["Apple", "Orange", "Banana"];
for (let fruit of fruits) {
console.log(fruit);
}
// Apple
// Orange
// Banana
forEach
- 配列の全要素に対して関数を実行できる
- forEach内で
breakやcontinueは使用できない(returnは使用できる)
const parsons = ['Nao', 'Ken', 'Kana'];
parsons.forEach( parson => {
console.log(parson);
});
// Nao
// Ken
// Kana
おわりに
配列のメソッドはまだまだたくさんあります！
詳しくは、MDNをチェックしてください🙇
参考
Discussion