-数组的查找截取拼接排序)
点此查看所有教程、项目、源码导航文章目录1. 背景2. 查找相关indexOf、includes2.1 indexOf ()查找元素下标2.2 includes ()判断元素是否存在3. 截取slice ()4. 拼接concat ()5. 翻转与排序reverse、sort5.1 reverse ()数组翻转5.2 sort ()数组排序6. 方法汇总对比7. 小结1. 背景上一篇我们学习了数组增删相关的内置函数push、pop、unshift、shift、splice。它们有一个共同特点执行之后会直接修改原来的数组。本篇再来学习另一组常用数组功能查找、截取、拼接、排序包含indexOf、includes、slice、concat、reverse、sort。同样先说明这些本质也是 JS 内置好的函数。现阶段大家不用死记硬背全部参数细节只需要熟悉每个方法能干什么有个印象就足够。等到实际开发需要使用的时候再来查阅资料核对参数是完全正常的学习和开发方式。和上一组增删方法不一样这里大部分方法不会改动原数组处理之后会返回一个新数组或者结果。这是我们使用时需要重点留意的区别。2. 查找相关indexOf、includes2.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(葡萄));// false3. 截取slice ()slice用来截取数组的一部分返回截取出来的新数组。重点slice 不会修改原数组语法arr.slice(起始下标,结束下标)规则包含起始下标不包含结束下标。第二个参数省略时默认截取到数组末尾。letfruitArr[苹果,香蕉,橙子,葡萄];// 从下标1开始截取到下标3不包含下标3letnewArrfruitArr.slice(1,3);console.log(newArr);// [香蕉, 橙子]console.log(fruitArr);// 原数组不变 [苹果, 香蕉, 橙子, 葡萄]4. 拼接concat ()concat可以把多个数组合并在一起返回拼接完成后的新数组原数组保持不变。letarr1[10,20];letarr2[30,40];letarr3[50];letnewArrarr1.concat(arr2,arr3);console.log(newArr);// [10,20,30,40,50]console.log(arr1);// 原数组不变 [10,20]5. 翻转与排序reverse、sort5.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查找元素下标找到返回下标找不到返回 - 1includes判断元素是否存在返回布尔值 true /falseslice截取一段数组返回新数组不修改原数组concat拼接多个数组返回新数组不修改原数组reverse翻转数组顺序会修改原数组sort数组排序默认按字符排序数字排序需要额外写法会修改原数组7. 小结查找、截取、拼接、排序是开发中非常高频的数组操作区分关键点大部分方法返回新数组、不改动原数组但是 reverse 和 sort 会直接修改原数组sort 默认排序是字符串规则数字直接排序会有异常这个坑可以先记下来再次强调不需要死记每一个参数。大家只要知道有这些能力等到写代码遇到对应的场景再去查阅资料核对用法就完全没问题。
