专栏首页code秘密花园JavaScript 数组新增 4 个非破坏性方法!

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

大家好,我是 ConardLi

今天聊 JavaScript 的最新提案,这是我 最新技术提案 专栏的第 16 篇文章了,感谢读者们一如既往的支持!

开门见山,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 等方法。

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

const sorted1 = array1.slice().sort();
const sorted2 = [...array1].sort();
const sorted3 = Array.from(array1).sort();

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

toSorted()

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

const array = ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i'];
const result = array.toSorted();
console.log(result); //  ['a', 'c', 'd', 'i', 'l', 'n', 'o', 'r']
console.log(array); // ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i']

下面是个简单的 polyfill

if (!Array.prototype.toSorted) {
  Array.prototype.toSorted = function (compareFn) {
    return this.slice().sort(compareFn);
  };
}

toReversed()

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

const array = ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i'];
const result = array.toReversed();
console.log(result); //  ['i', 'l', 'd', 'r', 'a', 'n', 'o', 'c']
console.log(array); // ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i']

下面是个简单的 polyfill

if (!Array.prototype.toReversed) {
  Array.prototype.toReversed = function () {
    return this.slice().reverse();
  };
}

with()

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

array[index] = value

如果我们只是想得到一个新数组,又不想改变原数组,可以这样用:

const array = ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i'];
const result = array.with(0, 'ConardLi')
console.log(result); //  ['ConardLi', 'o', 'n', 'a', 'r', 'd', 'l', 'i'];
console.log(array); // ['c', 'o', 'n', 'a', 'r', 'd', 'l', 'i']

下面是个简单的 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) 方法比其他几个破坏性方法更复杂点:

  • 它从 start 开始删除 deleteCount 个元素 ;
  • 然后把 items 插入到被删除的位置;
  • 最后返回已删除的元素。
const array = [1, 2, 3, 4, 5, 6];
const result = array.splice(1, 2, 0);
console.log(result); //  [2, 3]
console.log(array);  // [1, 0, 4, 5, 6]

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

const array = [1, 2, 3, 4, 5, 6];
const result = array.tospliced(1, 2, 0);
console.log(result); //  [1, 0, 4, 5, 6]
console.log(array);  // [1, 2, 3, 4, 5, 6]

下面是个简单的 polyfill

if (!Array.prototype.toSpliced) {
  Array.prototype.toSpliced = function (start, deleteCount, ...items) {
    const copy = this.slice();
    copy.splice(start, deleteCount, ...items);
    return copy;
  };
}

polyfill

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

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

文章分享自微信公众号:
code秘密花园

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:ConardLi
原始发表时间:2022-04-18
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 4个错误使用JavaScript数组方法的案例

    为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

    Fundebug
  • 19个JavaScript数组常用方法总结

    数组基本操作可以归纳为 增、删、改、查,需要留意的是哪些方法会对原数组产生影响,哪些方法不会

    @超人
  • 8个常用的JavaScript数组方法

    https://my.oschina.net/mikeowen/blog/4748663

    @超人
  • 13个JavaScript数组reduce的实例方法

    对比map、 forEach、 filter 等数组方法,reduce比它们更强。

    前端达人
  • 25个JavaScript数组方法代码示例

    要在给定数组上使用方法,只需要通过[].方法名即可,这些方法都定义在 Array.prototype 对象上。在这里,咱们先不使用这些相,反,咱们将从简单的方法...

    Fundebug
  • 15个必须知道的JavaScript数组方法

    原文 | https://www.ibrahima-ndaw.com/blog/15-must-known-javascript-array-methods-i...

    前端达人
  • 4个常用的 JS 数组内容默认填充方法

    在 JavaScript 中,我们往往会遇到需要使用某些默认值来填充数组的情况,那么都有哪些方式可以完成这样的功能呢?

    前端达人
  • 28个Javascript数组方法,开发者的小抄

    最近面试有道题是至少写出 15 个数组方法,数组方法平时经常用到的也就6-7个,突然要一下子写出15个,还是有点卡壳了,今天整理一波,日后好复习。

    前端小智@大迁世界
  • JavaScript 的 4 种数组遍历方法: for VS forEach() VS for/in VS for/of

    我们有多种方法来遍历 JavaScript 的数组或者对象,而它们之间的区别非常让人疑惑。Airbnb 编码风格禁止使用 for/in 与 for/of,你知道...

    Fundebug
  • 【JS】1081- 28个常用的JavaScript 数组方法备用清单

    concat() 方法用于连接两个或多个数组。此方法不会更改现有数组,而是返回一个新数组,其中,包含连接数组的值。

    pingan8787
  • 【翻译】JavaScript中5个值得被广泛使用的数组方法

    原文地址:http://colintoh.com/blog/5-array-methods-that-you-should-use-today?utm_sour...

    寒月十八
  • 共享可变状态中出现的问题以及如何避免[每日前端夜话0xDB]

    这里有两个独立的部分:函数logElements()和函数main()。后者想要在对数组进行排序的前后都打印其内容。但是它到用了 logElements() ,...

    疯狂的技术宅
  • 深入理解JavaScript(一)

    2.支持函数式编程(高阶函数、内置的map和reduce)和面向对象编程(对象、继承)的混合编程风格

    硬核项目经理
  • 脑图(H5新增标签,鼠标事件,MVC和MVVM的关系图解,ES6相关)

    ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

    生南星
  • 【拓展】未来的JavaScript记录与元组

    编者按:本文译者李松峰,资深技术图书译者,翻译出版过40余部技术及交互设计专著,现任360奇舞团Web前端开发资深专家,360前端技术委员会委员、W3C AC代...

    pingan8787
  • JavaScript 各版本介绍和特性

    Netscape Navigator 3.0在1996年8月19发布,是支持JavaScript的浏览器的第二个主要的版本。

    acc8226
  • Kotlin 1.2 的新增了哪些特性?

    KotlinConf 大会宣布了 Kotlin 1.2 RC 版,并宣布 Kotlin/Native 已支持用于开发 iOS 应用和 Web 应用开发。今天就学...

    开发者技术前线
  • ECMAScript 6 笔记(二)

      用两个双字节的形式表达字符时,如果直接在\u后面跟上超过0xFFFF的数值(比如\u20BB7),JavaScript会理解成\u20BB+7。由于\u20...

    超然

扫码关注腾讯云开发者

领取腾讯云代金券