Help us understand the problem. What is going on with this article?

【React】Reactで便利な配列操作まとめ

React で便利な配列操作まとめ

エンジニアの t-77 です。
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
[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
[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
[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
[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
[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
7

まとめ

覚えておくと便利な配列操作一覧

  • 要素数を確認: 配列名.length
  • 配列をコピー: 配列名.slice()
  • 配列の先頭に追加: 配列名.unshift(要素)
  • 配列の末尾に追加: 配列名.push(要素)
  • 配列の先頭を削除: 配列名.shift()
  • 配列の末尾を削除: 配列名.pop()

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away