社区编辑申请
注册/登录
JavaScript 数组新增四个非破坏性方法!
开发
今天聊 JavaScript 的最新提案。开门见山,JavaScript 数组即将新增四个新的非破坏性方法。

今天聊 JavaScript 的最新提案。开门见山,JavaScript 数组即将新增四个新的非破坏性方法:

  • 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秘密花园
相关推荐

2022-08-10 12:02:52

面试JavaScript

2022-04-28 08:41:53

JavaScript数组

2020-03-19 15:30:08

JavaScript数组字符串

2020-08-21 17:40:15

JavaScript开发 技巧

2021-09-22 23:17:09

2020-02-26 13:38:44

数据结构JavaScript人生第一份工作

2020-02-27 09:55:46

开发技能代码

2021-01-13 07:52:35

JS数组数据集合

2020-08-04 08:30:18

JS数组技巧

2020-10-09 10:45:22

语言代码数组

同话题下的热门内容

Rust难懂?一文解读其“所有权”和“借用”概念太强了!Python 开发桌面小工具,让代码替我们干重复的工作!K8s需要替代品!你离完全理解 SQL 只差这十步分享六个 Vue3 开发必备的 VSCode 插件程序员如何寻找技术突破、体现技术价值?接口性能优化实战:从20s到500ms,三招搞定六七十岁程序员工资暴涨 就因为这门没啥人学的编程语言

编辑推荐

2017年9月编程语言排行榜:Java、C与C++三巨头还能统治排行榜多久?2017年最受欢迎的5个前端框架比较2017年11月编程语言排行榜:脚本语言怎么了?2017年3月编程语言排行榜:Swift首次进入前十最近租房有点烦!技术人如何用Python找到称心如意的“小窝”?
我收藏的内容
点赞
收藏

51CTO技术栈公众号