JavaScript 数组方法：轻松改变原数组的七种方式

2024-01-11 19:52:49

用 JavaScript 改变原数组的七大法宝

JavaScript 数组提供了丰富的方法，让我们能够轻松地操纵数组中的元素，使其变得更加灵活和易于维护。本文将深入探讨七种能够改变原数组的方法，从基础到高级，助你掌握 JavaScript 数组的奥秘。

1. push()：在数组末尾增添新元素

想象一下有一个数组，就像一个购物篮，里面装满了你需要的物品。这时，你想添加一个新的商品。push() 方法就好比把这个新商品直接塞进篮子的最后面，从而扩展了数组的长度。

const shoppingCart = ['牛奶', '面包', '鸡蛋'];
shoppingCart.push('苹果'); // 现在购物车里多了一个苹果
console.log(shoppingCart); // 输出：[ '牛奶', '面包', '鸡蛋', '苹果' ]

2. pop()：从数组末尾移除元素

购物了一圈，你突然改变主意，不想买鸡蛋了。pop() 方法就像从篮子最后面拿出一个鸡蛋，缩短了数组的长度。

shoppingCart.pop(); // 移除最后一个元素（鸡蛋）
console.log(shoppingCart); // 输出：[ '牛奶', '面包', '苹果' ]

3. unshift()：在数组开头添加新元素

如果你想在购物篮的最上面放一瓶可乐，unshift() 方法就能帮到你。它把可乐添加到数组的第一个位置，同时扩展了数组的长度。

shoppingCart.unshift('可乐'); // 在开头添加一个元素（可乐）
console.log(shoppingCart); // 输出：[ '可乐', '牛奶', '面包', '苹果' ]

4. shift()：从数组开头移除元素

你突然意识到可乐放在上面容易洒出来，于是想把它拿出来。shift() 方法就像从篮子最上面拿走可乐，缩短了数组的长度。

shoppingCart.shift(); // 移除第一个元素（可乐）
console.log(shoppingCart); // 输出：[ '牛奶', '面包', '苹果' ]

5. splice()：灵活插入、删除、替换

splice() 方法是一个多面手，它可以同时实现插入、删除和替换操作。就像在购物篮中，你想把牛奶替换成酸奶，同时删除面包。

shoppingCart.splice(1, 2, '酸奶'); // 从索引 1 开始，移除 2 个元素（牛奶和面包），并插入元素 '酸奶'
console.log(shoppingCart); // 输出：[ '可乐', '酸奶', '苹果' ]

6. reverse()：乾坤大挪移

reverse() 方法就像一个调皮的魔术师，它把数组中的元素顺序全部反转，就像把购物篮里的东西从后往前倒出来。

shoppingCart.reverse(); // 反转数组顺序
console.log(shoppingCart); // 输出：[ '苹果', '酸奶', '可乐' ]

7. sort()：井然有序

sort() 方法是一位整理专家，它可以根据指定的规则对数组中的元素进行排序，就像把购物篮里的东西按照某种规则整理好。

shoppingCart.sort(); // 默认按字母顺序排序
console.log(shoppingCart); // 输出：[ '苹果', '可乐', '酸奶' ]

// 自定义排序规则（按价格排序）
shoppingCart.sort((a, b) => a.price - b.price);
console.log(shoppingCart); // 输出：[ '可乐', '苹果', '酸奶' ]