JavaScript 数组新增 4 个非破坏性方法!

2022-05-13  本文已影响0人  猫大顾

开门见山,JavaScript 数组即将新增 4 个新的非破坏性方法:

.toReversed()

.toSorted()

.toSpliced()

.with()

Change Array by copy 提案

这四个方法来源于新的 Change Array by copy 提案,目前已经处于 stage3阶段,意味着基本上不会再有太大变化了,我们即将在各大浏览器里看到它们的实现。

提案地址:https://github.com/tc39/proposal-change-array-by-copy

数组的破坏性和非破坏性

为啥这个提案叫 Change Array by copy 呢?字面意思就是从副本里改变数组。

这就要说起数组的破坏性和非破坏性方法了:

有些数组的方法我们在调用的时候不会改变原始的数组,我们称它们为非破坏性方法,比如我们经常用到的 filter、some、map、find 等方法,都是不会改变原数组的:

但是,另外有一些方法是会改变原数组本身的,比如:sort、reverse、splice 等方法。

可以看到,原数组和排序后得到的新数组是一样的,说明这个方法改变了原数组。很多时候我们想用这些方法,但是又不想改变原数组,我们可能会先创建一个副本,比如下面这些操作:

几个数组的新方法,就是用来解决这样的问题的。

toSorted()

.toSorted() 是 .sort() 的非破坏性版本:

下面是个简单的 polyfill:

if (!Array.prototype.toSorted) {

  Array.prototype.toSorted = function(compareFn){

    return this.slice().sort(compareFn);

  };

}

toReversed()

.toReversed() 是 .reverse() 的非破坏性版本:

下面是个简单的 polyfill:

if (!Array.prototype.toReversed) {

  Array.prototype.toReversed = function(){

    return this.slice().reverse();

  };

}

with()

with() 是对数组的某个元素赋值操作的非破坏性版本,比如下面的操作:

下面是个简单的 polyfill:

if (!Array.prototype.with) {

  Array.prototype.with = function(index, value){

    const copy = this.slice();

    copy[index] = value;

    return copy;

  };

}

toSpliced()

.splice(start, deleteCount, ...items) 方法比其他几个破坏性方法更复杂点:下面是个简单的 polyfill:

它从 start 开始删除 deleteCount 个元素 ;

然后把 items 插入到被删除的位置;

最后返回已删除的元素。

.tospliced() 是 .splice() 的非破坏性版本,它会返回原数组变更后的版本,因此我们拿不到被删除的元素:

下面是个简单的 polyfill:

if(!Array.prototype.toSpliced) {

Array.prototype.toSpliced =function(start, deleteCount, ...items){

constcopy =this.slice();

copy.splice(start, deleteCount, ...items);

returncopy;

};

}

polyfill

提案目前还在 stage3阶段,在生产使用最好使用 polyfill:

https://github.com/tc39/proposal-change-array-by-copy/blob/main/polyfill.js

原文链接

上一篇 下一篇

猜你喜欢

热点阅读