【React】整理React中有用的数组操作方法

3 年 ago
科, 颖
2 minutes

总结了React中有用的数组操作。

以下是在使用React时需要了解的一些方便操作的总结。

复制数组：切片

使用配列名.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);

[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);

[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);

[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);

[dog, tiger, lion, wolf, bison, fox, rabbit]
[tiger, lion, wolf, bison, fox, rabbit]

删除数组的尾部：弹出

使用配列名.pop()可以删除数组末尾的元素。

const animalsList = [dog, tiger, lion, wolf, bison, fox, rabbit];
const animalsList2 = animalsList.slice();
animalsList2.pop();

console.log(animalsList);
console.log(animalsList2);

[dog, tiger, lion, wolf, bison, fox, rabbit]
[dog, tiger, lion, wolf, bison, fox]

确认要素数量：长度

可以通过数组名.length来确认数组的元素数量。

const animalsList = [dog, tiger, lion, wolf, bison, fox, rabbit];

console.log(animalsList.length);

7

总结

以下是一份方便记忆的数组操作总览。

    • 要素数を確認： 配列名.length

 

    • 配列をコピー： 配列名.slice()

 

    • 配列の先頭に追加： 配列名.unshift(要素)

 

    • 配列の末尾に追加： 配列名.push(要素)

 

    • 配列の先頭を削除： 配列名.shift()

 

    配列の末尾を削除： 配列名.pop()

本次就到这里了。感谢您的观看！

bannerAds