JavaScript有哪些不改变原始值的新方法？

公号是前端必修课2023-12-26 16:27

JavaScript其实每年都会发布一些新功能，改变以往的一些不好的设计，比如今天我要和大家分享的：

如何不改变原始值？4个新方法

不改变原始值什么意思了？我举个例子

比如，我们需要在一个数组中插入一个新元素，使用 splice 方法，为了避免原数组改变，我不得不克隆一个新数组来操作。那假如有一个方法直接对原数组进行操作，返回一个插入好的新数组而又改变原数组那不是更高效吗？这种没有副作用的操作是我推荐的

以下四个方法对数据的处理不会造成意外的副作用，确保代码更易于维护和理解。

方法一: 数据排序（toSorted）

当我们需要对一个数组进行排序，有一个方法 sort ，为了不改变原来数组，我们需要这样操作

js 复制代码

const nums = [7, 2, 3, 9, 1];
const sorted = [...nums].sort();
console.log(sorted);

新方法这样操作

方法二: 数据插入（toSpliced）

当我们需要往一个数组里插入一个新元素，而又不希望改变原始数组，我们可以使用 splice方法，这样操作：

js 复制代码

const fruits = ['apple', 'banana', 'orange', 'kiwi', 'grape'];
const newFruits = [...fruits];
newFruits.splice(1, 2, 'mango', 'strawberry');
console.log(newFruits)

新方法这样操作

方法三: 数据反转（toReverse）

当我们需要对一个数组反转排序，而又不希望改变原始数组，我们可以使用reverse方法，这样操作：

js 复制代码

const arr = [5, 4, 3, 2, 1];
const newArr = [...arr]
newArr.reverse()
console.log(newArr);

新方法这样操作

方法四: 数据替换（with）

当我们需要替换数组中某一个元素时，最直接的方法就是通过索引直接去改变值，这样操作：

js 复制代码

const arr = ["dragon", "orc", "human", "elf", "undead"];
const replace = [...arr];
replace[2] = "goblin";
console.log(replace);

新方法这样操作