JavaScript 数组增删改

上一篇文章 JavaScript 数组基本操作 讲了数组的创建和读写。这一节讲如何往数组里添加元素、删除元素和替换元素。

数组的增删改围绕三个位置展开，分别是尾部、头部和任意位置，对应三组方法。push 和 pop 操作尾部，unshift 和 shift 操作头部，splice 操作任意位置。

尾部操作 push 和 pop

push 在数组末尾添加元素，可以一次加多个，返回新数组的长度。

const fruits = ['苹果', '香蕉'];
const len = fruits.push('橙子');
console.log(len);
console.log(fruits);

第一行输出 3，第二行输出 ['苹果', '香蕉', '橙子']。push 一次添加多个元素时，参数用逗号隔开。

pop 删除末尾的一个元素，返回被删除的元素。

const fruits = ['苹果', '香蕉', '橙子'];
const removed = fruits.pop();
console.log(removed);
console.log(fruits);

第一行输出 橙子，第二行输出 ['苹果', '香蕉']。pop 不需要参数，每次只删一个。

push 和 pop 配合使用，就是后进先出的栈结构，先加进去的元素最后才被取出来。

头部操作 unshift 和 shift

unshift 在数组开头添加元素，返回新数组的长度。用法和 push 一样，只是方向相反。

const nums = [2, 3];
const len = nums.unshift(1);
console.log(len);
console.log(nums);

第一行输出 3，第二行输出 [1, 2, 3]。

shift 删除开头的元素，返回被删除的元素。

const nums = [1, 2, 3];
const first = nums.shift();
console.log(first);
console.log(nums);

第一行输出 1，第二行输出 [2, 3]。

头部操作会移动后面所有元素的位置，数据量大时性能不如尾部操作，日常场景感受不到差别。

任意位置操作 splice

splice 是数组增删改的万能方法，完整形式是 splice(起始位置, 删除个数, 新元素1, 新元素2)。同一个方法，通过调整参数就能实现删除、插入、替换三种操作。

第一个场景是删除。传入起始位置和删除个数，不传新元素。

const arr = ['a', 'b', 'c', 'd'];
arr.splice(1, 2);
console.log(arr);

输出 ['a', 'd']。从索引 1 开始删 2 个，删掉了 b 和 c。

第二个场景是插入。删除个数传 0，后面的参数就是插入的新元素，插在起始位置。

const arr = ['a', 'b'];
arr.splice(1, 0, 'x', 'y');
console.log(arr);

输出 ['a', 'x', 'y', 'b']。从索引 1 开始，一个都不删，插入 x 和 y。

第三个场景是替换。删除个数和插入元素都有，相当于先删后插。

const arr = ['a', 'b', 'c'];
arr.splice(1, 1, 'X');
console.log(arr);

输出 ['a', 'X', 'c']。索引 1 位置的 b 被替换成 X。splice 的返回值是被删除元素组成的数组，没有删除时返回空数组。

方法对比

这五个方法有一个共同点，都会直接修改原数组。后面要讲的 slice 不会修改原数组，两者别搞混。

小结

push 和 pop 操作尾部，unshift 和 shift 操作头部，splice 操作任意位置，能增能删能替换。它们都会直接修改原数组。记不住时查上面这张表就行。