在 JavaScript 中，Object.assign 函数经常被用来将一个或多个对象的属性和方法复制到目标对象中。然而，Object.assign 也有一些缺陷，这些缺陷可能会导致一些奇怪的行为，从而影响您的代码逻辑。在 ES10 中，新增了一些特性来解决这些问题，并增强了 Object.assign 函数的能力。在本文中，我们将重点介绍 ES10 中的新特性，并讨论如何使用它们来提高前端开发中的开发效率和代码健壮性。
Object.fromEntries
Object.fromEntries 是 ES10 中引入的一个新函数，它可以将一个包含键值对的数组转换成一个对象。从技术角度来讲，这个函数实际上是 Object.entries 的逆操作。
以下是一个简单的示例：
const arr = [['name', 'lin'], ['age', 20], ['gender', 'male']];
const obj = Object.fromEntries(arr);
console.log(obj); // {name: "lin", age: 20, gender: "male"}使用 Object.fromEntries 函数可以解决 Object.assign 函数的一个缺陷，即对象的深度复制。
在使用 Object.assign 函数时，如果源对象中包含了一个复杂对象作为属性值，那么将只复制该属性值的引用，而不是实际的对象（即浅复制）。因此，修改源对象中的属性值会同时修改目标对象中的属性值。
而在使用 Object.fromEntries 函数时，它会创建一个新对象，其中包含源对象中的所有属性值的深拷贝。因此，使用 Object.fromEntries 函数可以有效地避免对象深度复制的问题。 以下是一个示例，说明了使用 Object.fromEntries 函数的好处：
const obj1 = { name: 'lin', age: 20, address: { city: 'beijing', country: 'china' } };
const obj2 = Object.fromEntries(Object.entries(obj1));
console.log(obj2); // {name: "lin", age: 20, address: {…}}
console.log(obj1 === obj2); // false
console.log(obj1.address === obj2.address); // falseNullish 合并运算符
在 JavaScript 中，如果一个变量的值为 null 或 undefined，那么它有时被认为是 false。而当使用 || 运算符时，如果变量的值是空字符串、0 或 false，那么该变量也会被认为是 false。这可能会导致一些奇怪的行为，甚至是代码缺陷。
ES10 新增了一个 Nullish 合并运算符 ??，该运算符只在变量的值为 null 或 undefined 时返回 true。当变量的值为 false、0 或空字符串时，?? 运算符仍然返回 false。
以下是一个简单的示例，展示了如何使用 ?? 运算符：
-- -------------------- ---- ------- ----- ------ - ----- ----- ------ - --- ----- ------ - -- ----- ------ - ---------- ----- ------ - ------ ------------------ -- ----------- -- --------- ------------------ -- ----------- -- -- ------------------ -- --- -- - ------------------ -- ----------- -- --------- ------------------ -- ------ -- -----
在使用 Object.assign 函数时，我们经常需要检查属性值是否为 null 或 undefined，以避免将这些值复制到目标对象中。在这种情况下，Nullish 合并运算符可以使代码更简洁、更易读且更可维护。
以下是一个示例，展示了如何在使用 Object.assign 函数时，结合 Nullish 合并运算符的使用：
const obj1 = { name: 'lin', age: 20, address: null };
const obj2 = { name: 'lin', age: 27, address: 'beijing' };
Object.assign(obj1, { age: obj2.age, address: obj2.address ?? obj1.address });
console.log(obj1); // {name: "lin", age: 27, address: "beijing"}Promise.allSettled
Promise.all 是一个经常被使用的 Promise 方法，可以将多个 Promise 对象包装成一个 Promise 对象。当所有 Promise 对象都完成（或其中一个 Promise 对象被拒绝）时，Promise.all 将返回一组结果，这些结果将与每个 Promise 的结果一一对应。
不过，Promise.all 有一个不足之处，即如果其中一个 Promise 被拒绝，那么整个 Promise 链就会被拒绝，从而导致后续的操作无法继续执行。因此，当我们运行多个异步操作时，可能需要一个更健壮的方案来处理操作的结果。
ES10 中新增了一个名为 Promise.allSettled 的方法，该方法接受一个 Promise 对象数组，并在所有 Promise 对象都完成后返回它们的状态。与 Promise.all 不同，Promise.allSettled 不会因为其中一个 Promise 被拒绝而终止。
以下是一个示例，展示了如何使用 Promise.allSettled 方法：
-- -------------------- ---- ------- ----- -------- - - ------------------- ------------------------ ------------------ -- ------------------------------------------- -- - --------------------- --- -- ------- - -------- ------------ ------ --- -------- ----------- ------- --------- -------- ------------ ------ -- - --
在前端开发中，我们经常需要同时发送多个异步请求，并且需要对它们的结果进行处理。在这种情况下，Promise.allSettled 可以成为一个强有力的方案，可以更好地管理多个异步请求的结果，并准确地识别可能存在的问题，从而更好地维护您的代码。
总结
在本文中，我们讨论了 ES10 中的三个新特性，以及它们如何帮助我们解决 Object.assign 函数的一些缺陷，并提高前端开发中的开发效率和代码健壮性。具体来说，我们介绍了 Object.fromEntries、Nullish 合并运算符和 Promise.allSettled，以及它们的适用场景和示例代码。
尽管这些新特性在一些浏览器中可能尚未得到完全支持，然而，它们已经成为了前端开发中的必备工具之一。因此，学习和掌握这些特性对于前端开发者来说非常重要，也将为您的工作带来更便捷和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ffbb2b95b1f8cacde07cc8