React で便利な配列操作まとめ
エンジニアの t-77 です。
Reactで配列を使用する際に、知っていると便利な操作のまとめです。
配列をコピー： slice
配列名.slice()で、配列をコピーできます。
()に値を指定すれば、コピーする範囲を指定できます。
const animalsList = [dog, tiger, lion, wolf, bison, fox, rabbit];
// 全てコピー
const animalsList2 = animalsList.slice();
// 3番目の要素から全てコピー
const animalsList3 = animalsList.slice(2);
// 1番目の要素から5番目の要素までコピー
const animalsList4 = animalsList.slice(0, 4);
console.log(animalsList);
console.log(animalsList2);
console.log(animalsList3);
console.log(animalsList4);
console
[dog, tiger, lion, wolf, bison, fox, rabbit]
[dog, tiger, lion, wolf, bison, fox, rabbit]
[lion, wolf, bison, fox, rabbit]
[dog, tiger, lion, wolf, bison]
配列の先頭に追加： unshift
配列名.unshift(要素)で、配列の先頭に要素を追加できます。
()に値を複数入れれば、複数の要素を追加できます。
const animalsList = [dog, tiger, lion, wolf, bison, fox, rabbit];
const animalsList2 = animalsList.slice();
animalsList2.unshift('cat');
console.log(animalsList);
console.log(animalsList2);
animalsList2.unshift('mouse', 'elephant');
console.log(animalsList2);
console
[dog, tiger, lion, wolf, bison, fox, rabbit]
[cat, dog, tiger, lion, wolf, bison, fox, rabbit]
[mouse, elephant, cat, dog, tiger, lion, wolf, bison, fox, rabbit]
配列の末尾に追加： push
配列名.push(要素)で、配列の末尾に要素を追加できます。
()に値を複数入れれば、複数の要素を追加できます。
const animalsList = [dog, tiger, lion, wolf, bison, fox, rabbit];
const animalsList2 = animalsList.slice();
animalsList2.push('cat');
console.log(animalsList);
console.log(animalsList2);
animalsList2.push('mouse', 'elephant');
console.log(animalsList2);
console
[dog, tiger, lion, wolf, bison, fox, rabbit]
[dog, tiger, lion, wolf, bison, fox, rabbit, cat]
[dog, tiger, lion, wolf, bison, fox, rabbit, cat, mouse, elephant]
配列の先頭を削除： shift
配列名.shift()で、配列の先頭の要素を削除できます。
const animalsList = [dog, tiger, lion, wolf, bison, fox, rabbit];
const animalsList2 = animalsList.slice();
animalsList2.shift();
console.log(animalsList);
console.log(animalsList2);
console
[dog, tiger, lion, wolf, bison, fox, rabbit]
[tiger, lion, wolf, bison, fox, rabbit]
配列の末尾を削除： pop
配列名.pop()で、配列の末尾の要素を削除できます。
const animalsList = [dog, tiger, lion, wolf, bison, fox, rabbit];
const animalsList2 = animalsList.slice();
animalsList2.pop();
console.log(animalsList);
console.log(animalsList2);
console
[dog, tiger, lion, wolf, bison, fox, rabbit]
[dog, tiger, lion, wolf, bison, fox]
要素数を確認： length
配列名.lengthで、配列の要素数が確認できます。
const animalsList = [dog, tiger, lion, wolf, bison, fox, rabbit];
console.log(animalsList.length);
console
7
まとめ
覚えておくと便利な配列操作一覧
- 要素数を確認： 配列名.length
- 配列をコピー： 配列名.slice()
- 配列の先頭に追加： 配列名.unshift(要素)
- 配列の末尾に追加： 配列名.push(要素)
- 配列の先頭を削除： 配列名.shift()
- 配列の末尾を削除： 配列名.pop()
今回は、以上になります。ご覧いただき、ありがとうございました！