【JavaScript】Reactでも使える便利な配列操作まとめ

Reactでも使える便利な配列操作まとめ

Reactで配列を使用する際に、知っていると便利なJavaScriptの配列操作まとめです。

配列をコピー： 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()

今回は、以上になります。ご覧いただき、ありがとうございました！