JavaScript中常用的数组操作方法详解

在日常开发中，处理列表数据几乎离不开ref="/tag/146/" style="color:#3D6345;font-weight:bold;">数组。无论是从后台接口拿到的用户列表，还是前端需要动态渲染的商品信息，数组操作都是绕不开的基础技能。掌握一些常见的数组方法，能让代码更简洁、逻辑更清晰。

添加和删除元素

往数组里加东西或者删东西是最常见的操作。比如你有个购物车，用户点击“加入购物车”时，就要把商品推进数组里。

let cart = ['苹果', '香蕉'];
cart.push('牛奶'); // 在末尾添加
console.log(cart); // ['苹果', '香蕉', '牛奶']

如果想从前面加，可以用 unshift，对应地，从前面删就是 shift。而 pop 是去掉最后一个，很适合实现“撤销”类功能。

遍历数组用 forEach 和 map

当你需要对数组中的每一项做点事情，比如显示在页面上，forEach 就派上用场了。

let names = ['小明', '小红', '小刚'];
names.forEach(name => {
  console.log('你好，' + name);
});

而如果你需要生成一个新数组，比如把价格都打个九折，那就得用 map。

let prices = [100, 200, 300];
let discounted = prices.map(price => price * 0.9);
// [90, 180, 270]

筛选数据用 filter

有时候列表太长，得筛一筛。比如只看价格超过150的商品。

let products = [
  {name: '耳机', price: 200},
  {name: '键盘', price: 120},
  {name: '鼠标', price: 80}
];

let expensive = products.filter(p => p.price > 150);
// 只保留价格大于150的

查找元素用 find 和 includes

想知道某个值在不在数组里，可以用 includes。比如判断用户是否已经收藏过某商品。

let favorites = ['电影', '音乐', '读书'];
if (favorites.includes('音乐')) {
  console.log('你喜欢音乐');
}

如果想找对象类型的某一项，find 更合适。比如找用户名为“admin”的用户。

let users = [
  {id: 1, username: 'john'},
  {id: 2, username: 'admin'}
];

let admin = users.find(u => u.username === 'admin');
// 返回匹配的第一个对象

排序和反转

展示排行榜时，通常要按分数从高到低排。数组的 sort 方法可以搞定，但要注意它默认是按字符串排序的。

let scores = [85, 92, 78, 98];
scores.sort((a, b) => b - a);
// [98, 92, 85, 78]，降序排列

reverse 则是直接把数组倒过来，适合做“最新在前”这类需求。

合并与切割

两个数组拼一起，可以用 concat。比如把本地缓存的记录和新拉的数据合并。

let local = ['a', 'b'];
let remote = ['c', 'd'];
let all = local.concat(remote);

想截取一部分，比如实现分页，可以用 slice。

let list = [1,2,3,4,5,6,7,8];
let page1 = list.slice(0, 4); // 取前4个