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);
新方法这样操作