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

在这里插入图片描述

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

文章目录

一、温故
二、知新
- - `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]