31.JavaScript数组进阶，一网打尽数组操作函数slice、filter、map、reduce、some、every、find、splice

---

文章目录

• 数组进阶
• • 元素删除（对象方式）
  • splice()
  • • 删除一个元素
    • 删除多个元素
    • 截断数组
    • 元素替换
    • 元素插入
    • 返回值
    • 负索引
  • slice()
  • concat()
  • forEach()
  • indexOf、lastIndexOf、includes
  • find、findIndex
  • filter
  • map
  • sort
  • reverse
  • str.split()和arr.join()
  • reduce、reduceRight
  • Array.isArray()
  • some、every
  • thisArg
  • 总结

数组进阶

上篇介绍了数组的基本概念和一些简单的数组元素操作函数，实际上，数组提供的函数还有很多。

push、pop、shift和unshift是操作数组首尾两端的函数，上文已经讲过，本文不再赘述。

元素删除（对象方式）

上篇已经简单介绍过，数组就是一个特殊的对象，因此我们可以尝试使用对象的属性删除方法：delete。

举个例子：

let arr = [1,2,3,4,5];
delete arr[2];
console.log(arr);

代码执行结果如下：

注意观察图中标黄的位置，虽然元素被删除了，但是数组的长度仍然是5，而且删除掉的位置多了一个空。如果我们访问下标为2的元素，会得到如下的结果：

造成这种现象的原因是，delete obj.key是通过key移除对应值的，也就是说delete arr[2]删除了数组中的2:3键值对，当我们访问下标2时，就是undefined了。

而在数组中，我们常常希望删除元素后，元素的位置会被后继的元素填补，数组的长度变短。

这个时候，我们就需要splice()方法。

splice()

需要提前说明的是，splice()方法的功能相当丰富，并非只能删除元素，以下是语法：

arr.splice(start[,deleteCount,e1,e2,...,eN])

splice方法从start位置开始，删除deleteCount个元素，然后原地插入e1,e2,e3等元素。

删除一个元素

以下实例可以从数组中删除一个元素：

let arr = [1,2,3,4,5]
arr.splice(0,1);//删除掉第一个元素1
console.log(arr)

以上代码删除数组中第一个位置的1个元素，执行结果如下：

删除多个元素

删除多个元素和删除一个元素用法相同，只需要将第二个参数改为指定数量就可以了，举例如下：

let arr = [1,2,3,4,5];
arr.splice(0,3);//删除前三个元素
console.log(arr);//[4,5]

代码执行结果如下：