ES11 中的可选链、nullish 合并和原型的陷阱
随着前端技术的不断发展，不断有新的功能和特性出现。其中，ES11 带来的新功能包括可选链、nullish 合并和原型的陷阱。这些功能给开发人员带来了方便和效率，但有时也可能会带来一些问题。本文将详细介绍这些功能的使用和可能的问题，并给出一些学习和指导意义。
可选链
在开发过程中，经常需要从一个嵌套的对象或数组中获取数据。在过去，我们通常使用繁琐的 if 语句或者三元运算符来判断数据是否存在，以避免程序崩溃。但是这样的代码十分冗长，不利于开发效率。
ES11 中新出现了可选链（Optional Chaining）的运算符 ?.，可以让开发者避免这种冗长的代码。使用可选链，可以在对象属性访问和函数调用时不用担心数据是否存在，如果数据不存在返回 undefined。
下面是一个例子：
----- ---- - -
----- -
----- -----
--
------ ---------
--
----- -------- - ----------------
----- --------- - -----------------
---------------------- -- -----
----------------------- -- ---------在上面的代码中，我们使用可选链运算符 ?. 来获取 data 对象的 user 和 other 属性中的 name 值。这样就不用先判断数据是否存在，代码更加简洁明了。
nullish 合并
在开发中，经常会出现需要设置默认值的情况。在过去，我们通常使用 || 运算符来实现这个功能。但是，在一些特殊情况下，这种方法可能会有缺陷。
ES11 中的 nullish 合并（Nullish Coalescing）运算符 ?? 可以更好地解决这个问题。使用 nullish 合并，可以在变量为 null 或 undefined 时设置默认值。
下面是一个例子：
----- - - ----- ----- - - ---------- ----- - - -- ----- - - - -- ---------- ----- - - - -- ---------- ----- - - - -- ---------- --------------- -- --------- --------------- -- --------- --------------- -- -
在上面的代码中，我们使用 nullish 合并运算符 ?? 来为变量 a 和 b 设置默认值。如果变量为 null 或 undefined，就会返回默认值；否则返回变量的值。
原型的陷阱
在开发中，经常会使用面向对象编程的方式来组织代码。这时候，我们就会使用原型来创建对象。
在 JavaScript 中，对象可以通过原型继承另一个对象，从而共享属性和方法。但是，如果不小心修改了原型，就会导致所有派生自该原型的对象都受到影响，导致一些不可预期的结果。
下面是一个例子：
-------- ------------ - --------- - ----- - ------------------------ - -------- -- - --------------- ---- -- ---------------- -- ----- --- - --- -------------- ----- --- - --- -------------- -------------- -- -- ---- -- ---- -------------- -- -- ---- -- ---- ------------------------ - -------- -- - --------------------- -- -------------- -- ----- -------------- -- -----
在上面的代码中，我们定义了一个 Animal 类，并通过原型添加了一个方法 sayName。然后，我们创建了两个实例对象 dog 和 cat，并且它们都正确地输出了自己的名字。
但是，当我们修改 Animal.prototype 中的 sayName 方法后，所有派生自该原型的实例对象都受到了影响，导致输出结果不再正确。
为了避免这种问题，我们应该在修改原型时谨慎行事，并且在需要公用属性和方法时使用共享属性和方法的方法，如 Object.create 或者 class 继承。
结论
ES11 中的可选链、nullish 合并和原型的陷阱都是比较重要的特性。它们可以帮助我们提高开发效率和代码质量。然而，在使用这些功能时，我们需要注意一些细节，以避免可能的问题。同时，这些功能也告诉我们，在开发过程中，应该时常关注新的技术和特性，以不断提高自己的水平，提高开发效率，做出更好的产品。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6732b88c0bc820c5823e7f35