最近发现几个数组方法,是一些常规方法的升级版,比较有意思,分享给大家
文章目录
- 一、温故
- 二、知新
- `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]
- 这三个方法,除了 返回值 和 对原数组的影响 外,其 参数 和 功能 并无差异。
- 这对于我们需要修改数组并保留原数组的需求来说非常方便:既能减少代码量,还可以节省变量的创建,使我们的代码更加简洁,逻辑更加直观。
如果你对数组的其他常规方法了解的不多,也可以先阅读这篇文章【数组方法大全】