JavaScript数组常用方法大全：从入门到实战应用-嘻道妙招

你是不是经常被JavaScript数组搞得头大？明明想操作数据，结果代码一跑就报错？或者看到别人用几行代码搞定你要写半天的功能？今天咱们就来唠唠这个让新手小白又爱又恨的数组方法。别慌，就算你现在连“新手如何快速涨粉”都搞不懂，这篇文章也能让你把数组玩出花！

一、先搞懂数组是个啥玩意儿

说白了，??数组就是个装东西的集装箱??。比如你网购了一堆东西，快递小哥把手机壳、充电宝、蓝牙耳机全塞进一个纸箱里——这个纸箱就是数组。在JS里，咱们用方括号[]来表示，比如：

javascript复制let shoppingCart = ["手机壳", "充电宝", "蓝牙耳机"];

??重点来了??：

数组能装??任何类型??的数据（数字、文字、甚至其他数组）
每个东西都有??专属座位号??（从0开始算）
集装箱长度会??自动伸缩??（塞东西就变长，拿东西就变短）

二、新手必知的7个生存技能

1. ??push() 和 pop()??

这俩就像集装箱的装卸工。push()往箱子??末尾塞新货??，pop()把??最后一件货踢出去??：

javascript复制shoppingCart.push("钢化膜"); // 现在有4件商品
shoppingCart.pop(); // 又变回3件了

2. ??shift() 和 unshift()??

跟上面那对相反，shift()??拿走第一件货??，unshift()??往最前面塞新货??。注意这俩操作会??改变所有货物的座位号??，大数组用起来可能会卡。

3. ??splice()??

瑞士军刀级方法，能同时实现??增删改??。记住这个公式：

javascript复制数组.splice(开始位置, 要删几个, 新增元素1, 新增元素2...)

实战案例：把购物车的充电宝换成快充版

javascript复制shoppingCart.splice(1, 1, "快充充电宝");

三、进阶玩家必备的神操作

1. ??slice() 和 concat()??

这俩都是??复制狂魔??，区别在于：

方法	操作方式	原数组是否变化
slice()	截取指定区间	不变
concat()	连接多个数组	不变

举个栗子：

javascript复制let newCart = shoppingCart.slice(0,2); // 拿到前两件商品
let comboCart = shoppingCart.concat(["数据线", "贴纸"]); // 合并新商品

2. ??forEach() 和 map()??

这俩都能遍历数组，但??map()会返回新数组??，而??forEach()只做事不吭声??。想改数据用map，单纯循环用forEach：

javascript复制// 给所有商品加个"特价"标签
let saleItems = shoppingCart.map(item => "特价-" + item);

四、自问自答环节

??Q：这么多方法我咋记得住啊？??
A：根本不用全记！记住三个核心场景：

??增删改查??用splice/push/pop
??复制拼接??用slice/concat
??循环处理??用forEach/map/filter

??Q：filter()和find()有啥区别？??
A：filter像捞鱼网，??一网下去捞所有符合条件的鱼??；find像钓鱼竿，??钓到第一条符合条件的就收杆??。需要多个结果用filter，只要一个用find。

??Q：reduce()看着好复杂，有必要学吗？??
A：等你需要做??累计计算??（比如算购物车总价）时，这就是神器。先搞定基础方法，回头再啃这块硬骨头。

五、实战：用户数据处理案例

假设我们从后台拿到这样的数据：

javascript复制let users = [
  {id:1, name:"张三", age:17},
  {id:2, name:"李四", age:25},
  {id:3, name:"王五", age:16}
];

??需求：??

过滤出所有成年人
把名字前面加上"用户-"前缀
统计平均年龄

??代码实现：??

javascript复制// 第一步：过滤未成年人
let adults = users.filter(user => user.age >= 18);

// 第二步：加工名称
let processedUsers = adults.map(user => ({
  ...user,
  name: "用户-" + user.name
}));

// 第三步：计算平均年龄
let totalAge = processedUsers.reduce((sum, user) => sum + user.age, 0);
let averageAge = totalAge / processedUsers.length;

小编观点

数组方法就像乐高积木，单个看没啥特别的，组合起来就能搭出变形金刚。刚开始别想着把所有方法都背下来，??先玩熟push/pop/map/filter这四大金刚??，遇到具体问题再查文档。记住了啊，代码是写给人看的，有时候多写两行清晰的代码，比硬凑一行高端写法更重要！

本文由嘻道妙招独家原创，未经允许，严禁转载

JavaScript数组常用方法大全：从入门到实战应用