哎，你说新手学JavaScript最难的是什么？变量？函数？要我说啊，数组方法绝对排前三！刚入门那会儿，光是一个push和splice的区别就能让我对着电脑发半小时呆。今天咱们就掰开了揉碎了讲讲，那些让人头大的数组方法到底怎么用——顺便说句，这和"新手如何快速涨粉"其实一个道理，都得先打好基础对不对？

一、从买菜清单说起

假设你现在要写个买菜清单的网页应用。先创建一个空数组：

javascript复制
let shoppingList = [];

这时候问题来了：??怎么把"鸡蛋"加进列表最后？?? 用push啊！

javascript复制
shoppingList.push("鸡蛋"); // ["鸡蛋"]

那要是在最前面加"牛奶"呢？这时候就得请出unshift：

javascript复制
shoppingList.unshift("牛奶"); // ["牛奶", "鸡蛋"]

发现没？push和unshift就像往队伍里塞人，一个往后挤，一个往前插。不过要注意，频繁用unshift会影响性能，毕竟整个队伍都得往后挪一步对吧？

二、手滑删错东西怎么办

有次我在项目里不小心用pop删掉了最后一个元素，结果用户数据全乱了。??pop和shift的区别??可得记牢：

• pop() 删除最后一个元素，返回被删的元素
• shift() 删除第一个元素，返回被删的元素

比如说：

javascript复制
let fruits = ["苹果", "香蕉", "橘子"];
console.log(fruits.pop());  // 输出"橘子"
console.log(fruits.shift()); // 输出"苹果"

这时候数组就剩个"香蕉"孤零零的。要是想批量删除怎么办？这就得看splice的表演了。

三、splice这把瑞士军刀

刚开始我总把splice和slice搞混。记住这个口诀：??splice会改变原数组，slice不会??。比如想从第2个位置开始删3个元素：

javascript复制
let numbers = [1,2,3,4,5];
numbers.splice(1,3); // 返回[2,3,4]
// 现在numbers变成[1,5]

但splice还能插入新元素！比如在第1个位置插入"黄瓜"和"番茄"：

javascript复制
shoppingList.splice(1,0,"黄瓜","番茄");

这个0表示不删除任何元素。就像在队伍中间硬塞两个人进去，后面的人自动往后挪。

四、那些容易踩的坑

新手最容易犯的错是什么？我见过有人用for循环删元素，结果数组长度变化导致跳过元素。这时候应该??倒着循环??：

javascript复制
for(let i = arr.length-1; i >=0; i--){
  if(条件) arr.splice(i,1);
}

再比如说concat和push的区别：

javascript复制
let a = [1,2];
let b = a.concat(3); // [1,2,3]
a.push(3); // [1,2,3]

看起来效果一样？错！push会改变原数组，concat会返回新数组。这点差别在React这类框架里能要人命。

五、小编的实战建议

有读者问我：这些方法需要全背下来吗？我的建议是：??先掌握push/pop/shift/unshift/splice这五个，其他边用边查??。就像学做菜，先把炒锅用熟了再研究空气炸锅。

最近在写电商项目时，用splice实现购物车商品删除功能，结果因为没考虑index偏移差点出bug。所以重点说三遍：??注意索引位置！注意索引位置！注意索引位置！??

最后说个冷知识：join方法能把数组转字符串，但参数选得好能省不少事。比如：

javascript复制
["2023","08","15"].join("-") // "2023-08-15"

这不比手动拼接字符串香？好了，今天就唠到这儿，赶紧打开编辑器实操吧！遇到问题别慌，多console.log看看数组状态，慢慢就摸到门道了。