React で便利な配列操作まとめ
Reactで配列を使用する際に、知っていると便利な操作のまとめです。
配列をコピー: slice
配列名.slice()で、配列をコピーできます。
()に値を指定すれば、コピーする範囲を指定できます。
react.js
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.log
[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(要素)で、配列の先頭に要素を追加できます。
()に値を複数入れれば、複数の要素を追加できます。
react.js
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.log
[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(要素)で、配列の末尾に要素を追加できます。
()に値を複数入れれば、複数の要素を追加できます。
react.js
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.log
[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()で、配列の先頭の要素を削除できます。
react.js
const animalsList = [dog, tiger, lion, wolf, bison, fox, rabbit];
const animalsList2 = animalsList.slice();
animalsList2.shift();
console.log(animalsList);
console.log(animalsList2);
console.log
[dog, tiger, lion, wolf, bison, fox, rabbit]
[tiger, lion, wolf, bison, fox, rabbit]
配列の末尾を削除: pop
配列名.pop()で、配列の末尾の要素を削除できます。
react.js
const animalsList = [dog, tiger, lion, wolf, bison, fox, rabbit];
const animalsList2 = animalsList.slice();
animalsList2.pop();
console.log(animalsList);
console.log(animalsList2);
console.log
[dog, tiger, lion, wolf, bison, fox, rabbit]
[dog, tiger, lion, wolf, bison, fox]
要素数を確認: length
配列名.lengthで、配列の要素数が確認できます。
react.js
const animalsList = [dog, tiger, lion, wolf, bison, fox, rabbit];
console.log(animalsList.length);
console.log
7
まとめ
覚えておくと便利な配列操作一覧
- 要素数を確認: 配列名.length
- 配列をコピー: 配列名.slice()
- 配列の先頭に追加: 配列名.unshift(要素)
- 配列の末尾に追加: 配列名.push(要素)
- 配列の先頭を削除: 配列名.shift()
- 配列の末尾を削除: 配列名.pop()
今回は、以上になります。ご覧いただき、ありがとうございました!