浏览器最近新增了一种可对数组调用的可互操作方法:
Array.prototype.with()
。
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
本文探讨了此方法的工作原理以及如何使用它更新数组 而不改变原始数组。
Array.prototype.with(index, value)
简介
Array.prototype.with(index, value)
方法会返回其所在数组的副本
调用,并将 index
设置为您提供的新 value
。
以下示例展示了一个年龄数组。您想要为以下内容创建一个新副本: 数组,同时将第二个年龄从 15 更改为 16:
const ages = [10, 15, 20, 25];
const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)
分解代码:ages.with(...)
会返回 ages
变量的副本
而无需修改原始数组。ages.with(1, …)
替换第二项
(index = 1
)。ages.with(1, 16)
将第二个项分配给 16
。
这就是创建包含修改的新数组副本的方式。
如果您希望确保原始数组保留下来, 未更改,本文将介绍此功能的一些用例。但就目前而言 让我们看看如果使用括号表示法会怎样:
const ages = [10, 15, 20, 25];
const newAges = ages;
newAges[1] = 16;
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)
如您所见,此示例中也修改了 ages
变量。也就是
因为当您分配 ages = newAges
时,JavaScript 不会复制数组,而是
而是创建对另一个数组的引用。因此,只要在一个文件中做出任何更改
会影响另一个元素,因为它们都指向同一个数组。
Array.prototype.with() 和不可变性
不可变性是许多前端库和框架的核心 包括 React(和 redux)和 Vue
此外,其他库和框架不一定要求不可变, 有助于提升性能:Angular 和 Lit
因此,开发者经常必须使用其他方法来返回数组副本 牺牲了代码的可读性:
const ages = [10, 15, 20, 25];
const newAges = ages.map((age, index) => {
if (index === 1) {
return 16;
}
return age;
});
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (Remains unchanged)
以下是一个 Codepen 示例,其中介绍了如何在 React 中组合使用 .with()
使用 useState 不可变地更新项数组:
由于 .with()
方法会返回数组的副本,因此您可以将多个
.with()
调用甚至其他数组方法。以下示例演示了
递增数组中的第二个和第三个年龄:
const ages = [10, 15, 20, 25];
const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1)
console.log(newAges); // [10, 16, 21, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)
其他新的不可变方法
最近,有另外三种方法实现了互操作:
Array.prototype.toReversed()
该函数会反转数组,而不改变 原始数组。Array.prototype.toSorted()
该函数用于对数组进行排序 更改原始数组。Array.prototype.toSpliced()
其工作原理类似于.splice()
,但不更改原始数组。
根据 MDN,这三种方法是 副本。这些方法也可用于预期不可变性或 。
总之,在 Google Cloud 中,可以更轻松地实现
将 JavaScript 与本文介绍的四种方法之一结合使用。具体而言,
.with()
方法可让您更轻松地更新数组的单个元素
而不改变原始数组。