JavaScript数组（Array）方法 - toReversed、toSorted、toSpliced

最近发现几个数组方法，是一些常规方法的升级版，比较有意思，分享给大家

一、温故

• 我们先来回顾几个比较常用的方法：reverse，sort，splice
• 众所周知，reverse：翻转数组，sort：数组排序，splice：删除指定位置的元素并可选的替换成新元素。
• 他们都有一个共同的特点就是都会改变原数组。

const reverseArr = ["a", "b", "c"];
console.log( reverseArr.reverse() );// 返回值：['c', 'b', 'a']
console.log( reverseArr );          // 原数组：['c', 'b', 'a']

const sortArr = [5, 3, 6, 2, 7];
console.log( sortArr.sort() );      // 返回值：[2, 3, 5, 6, 7]
console.log( sortArr );             // 原数组：[2, 3, 5, 6, 7]

const spliceArr = [1, 2, 3, 4, 5];
console.log( spliceArr.splice( 2, 2, "a", "b" ) );  // 返回值：[3, 4]
console.log( spliceArr );           // 原数组：[1, 2, 'a', 'b', 5]

• 如果你在对数组进行翻转、排序、删除并替换新元素时，不准备修改原数组。那么只能提前将数组拷贝一份，还需要注意深浅拷贝带来的影响。

const reverseArr = ["a", "b", "c"];
console.log( [...reverseArr].reverse() );// 返回值：['c', 'b', 'a']
console.log( reverseArr );               // 原数组：['a', 'b', 'c']

• 此处借助了展开运算符拷贝数组。

二、知新

• 今天要介绍的这几个新方法，就完美的解决了上面的问题。

toReversed

• reverse方法的升级版，返回值为翻转后的新数组，不改变原数组

const reverseArr = ["a", "b", "c"];
console.log( reverseArr.toReversed() ); // 返回值：['c', 'b', 'a']
console.log( reverseArr );              // 原数组：['a', 'b', 'c']

toSorted

• sort方法的升级版，返回值为排序之后的新数组，不改变原数组

const sortArr = [5, 3, 6, 2, 7];
console.log( sortArr.toSorted() );  // 返回值：[2, 3, 5, 6, 7]
console.log( sortArr );             // 原数组：[5, 3, 6, 2, 7]

toSpliced

• splice的升级版，返回值为删除并替换后的新数组，不改变原数组
  • 因为返回了操作后的新数组，所以无法获取被删除的元素

const spliceArr = [1, 2, 3, 4, 5];
console.log( spliceArr.toSpliced( 2, 2, "a", "b" ) );  // 返回值：[1, 2, 'a', 'b', 5]
console.log( spliceArr );           // 原数组：[1, 2, 3, 4, 5]

• 这三个方法，除了 返回值 和 对原数组的影响 外，其 参数 和 功能 并无差异。
• 这对于我们需要修改数组并保留原数组的需求来说非常方便：既能减少代码量，还可以节省变量的创建，使我们的代码更加简洁，逻辑更加直观。
  

如果你对数组的其他常规方法了解的不多，也可以先阅读这篇文章【数组方法大全】