JavaScript 数组常用方法

前面几篇文章讲了数组的增删改和遍历。这一节介绍四个常用的查询和转换方法，includes、indexOf、join、slice。它们都不修改原数组，这一点和增删改那一组方法不一样。

includes 判断是否包含

includes 用来判断数组里有没有某个值，返回 true 或 false。

const fruits = ['苹果', '香蕉', '橙子'];
console.log(fruits.includes('香蕉'));
console.log(fruits.includes('西瓜'));

第一行输出 true，第二行输出 false。includes 常用于条件判断，比如检查用户的输入在不在允许列表里。

const allowList = ['admin', 'editor'];
const user = 'guest';
if (allowList.includes(user)) {
  console.log('允许进入');
} else {
  console.log('禁止进入');
}

输出 禁止进入。把 user 改成 ‘admin’ 再运行，就输出 允许进入。

indexOf 查找位置

indexOf 查找某个值在数组中的位置，返回索引。找不到时返回 -1。

const fruits = ['苹果', '香蕉', '橙子'];
console.log(fruits.indexOf('橙子'));
console.log(fruits.indexOf('西瓜'));

第一行输出 2，第二行输出 -1。判断包含可以检查返回值是不是 -1，但更直观的写法是直接用 includes。

join 转成字符串

join 把数组的所有元素拼接成一个字符串，参数是连接符。

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

输出 苹果、香蕉、橙子。不传参数时，默认用英文逗号连接。

const nums = [1, 2, 3];
console.log(nums.join('-'));

输出 1-2-3。join 经常用来拼接展示文本，比如把购物车里的商品名拼成一串展示给人看。

slice 截取一段

slice(开始, 结束) 从数组中截取一段，返回一个新数组。结束位置不包含在内，原数组不变。

const nums = [1, 2, 3, 4, 5];
const part = nums.slice(1, 3);
console.log(part);
console.log(nums);

第一行输出 [2, 3]，截的是索引 1 和 2 的元素，索引 3 不在范围内。第二行输出 [1, 2, 3, 4, 5]，原数组没变。

slice 只传一个参数时，从该位置一直截到末尾。

const nums = [1, 2, 3, 4, 5];
console.log(nums.slice(2));

输出 [3, 4, 5]。

slice 和 splice 名字很像，作用完全不同。splice 直接修改原数组，slice 返回新数组不改原数组。增删改用 splice，取一部分用 slice。

综合小例子

用购物车场景把今天的方法串起来。

const cart = ['苹果', '香蕉', '橙子', '葡萄'];
if (cart.includes('橙子')) {
  console.log('购物车里有橙子');
}
console.log('橙子在第' + (cart.indexOf('橙子') + 1) + '个位置');
console.log('购物车里的水果是' + cart.join('、'));
const part = cart.slice(1, 3);
console.log('中间两项是' + part.join('和'));

依次输出 购物车里有橙子、橙子在第3个位置、购物车里的水果是苹果、香蕉、橙子、葡萄、中间两项是香蕉和橙子。判断包含、查位置、拼字符串、取片段，四个方法各司其职。

小结

includes 判断包含返回布尔值。indexOf 查找位置，找不到返回 -1。join 用指定连接符把数组拼成字符串。slice 截取一段返回新数组，结束位置不包含，原数组不变，和 splice 的区别要分清。