副队长JavaScript教程(34)-数组的查找截取拼接排序

点此查看所有教程、项目、源码导航

1. 背景

上一篇我们学习了数组增删相关的内置函数：push、pop、unshift、shift、splice。
它们有一个共同特点：执行之后会直接修改原来的数组。

本篇再来学习另一组常用数组功能：查找、截取、拼接、排序，包含indexOf、includes、slice、concat、reverse、sort。

同样先说明：这些本质也是 JS 内置好的函数。现阶段大家不用死记硬背全部参数细节，只需要熟悉每个方法能干什么，有个印象就足够。等到实际开发需要使用的时候，再来查阅资料核对参数，是完全正常的学习和开发方式。

和上一组增删方法不一样，这里大部分方法不会改动原数组，处理之后会返回一个新数组或者结果。这是我们使用时需要重点留意的区别。

2. 查找相关：indexOf、includes

2.1 indexOf ()：查找元素下标

作用：在数组中查找指定元素，找到就返回它对应的下标；如果数组里面不存在这个元素，返回-1。

letfruitArr=["苹果","香蕉","橙子"];console.log(fruitArr.indexOf("香蕉"));// 1console.log(fruitArr.indexOf("葡萄"));// -1

小提示：它只会找到第一个匹配元素的下标，后面相同元素不会继续查找。

2.2 includes ()：判断元素是否存在

作用：判断数组里有没有这个元素，结果只有两种：找到返回true，找不到返回false。
如果我们只关心 “有没有”，不关心在哪个下标，优先使用includes，可读性更好。

letfruitArr=["苹果","香蕉","橙子"];console.log(fruitArr.includes("橙子"));// trueconsole.log(fruitArr.includes("葡萄"));// false

3. 截取：slice ()

slice用来截取数组的一部分，返回截取出来的新数组。
重点：slice 不会修改原数组！

语法：

arr.slice(起始下标,结束下标)

规则：包含起始下标，不包含结束下标。第二个参数省略时，默认截取到数组末尾。

letfruitArr=["苹果","香蕉","橙子","葡萄"];// 从下标1开始，截取到下标3（不包含下标3）letnewArr=fruitArr.slice(1,3);console.log(newArr);// ["香蕉", "橙子"]console.log(fruitArr);// 原数组不变 ["苹果", "香蕉", "橙子", "葡萄"]

4. 拼接：concat ()

concat可以把多个数组合并在一起，返回拼接完成后的新数组，原数组保持不变。

letarr1=[10,20];letarr2=[30,40];letarr3=[50];letnewArr=arr1.concat(arr2,arr3);console.log(newArr);// [10,20,30,40,50]console.log(arr1);// 原数组不变 [10,20]

5. 翻转与排序：reverse、sort

5.1 reverse ()：数组翻转

作用：把数组里面元素顺序颠倒，这个方法会修改原数组。

letnumArr=[10,20,30];numArr.reverse();console.log(numArr);// [30, 20, 10]

5.2 sort ()：数组排序

sort用来给数组排序，默认规则是按照字符串编码排序，这里有一个初学者高频踩坑点。

letnumArr=[2,11,5];numArr.sort();console.log(numArr);// [11, 2, 5]

可以看到直接写 sort，数字排序结果不符合我们预期。

数字正确排序写法现阶段先做了解。

letnumArr=[2,11,5];numArr.sort(function(a,b){returna-b;});console.log(numArr);// [2, 5, 11]

注意：这里用到了自定义函数，通过函数来指定一个排序的具体方式，我们暂时不深究原理，先记住这个坑即可，后面学完函数再回头理解。

6. 方法汇总对比

• indexOf：查找元素下标，找到返回下标，找不到返回 - 1
• includes：判断元素是否存在，返回布尔值 true /false
• slice：截取一段数组，返回新数组，不修改原数组
• concat：拼接多个数组，返回新数组，不修改原数组
• reverse：翻转数组顺序，会修改原数组
• sort：数组排序，默认按字符排序，数字排序需要额外写法，会修改原数组

7. 小结

• 查找、截取、拼接、排序是开发中非常高频的数组操作；
• 区分关键点：大部分方法返回新数组、不改动原数组，但是 reverse 和 sort 会直接修改原数组；
• sort 默认排序是字符串规则，数字直接排序会有异常，这个坑可以先记下来；
• 再次强调：不需要死记每一个参数。大家只要知道有这些能力，等到写代码遇到对应的场景，再去查阅资料核对用法就完全没问题。