ES12 之最新 JS 的基础常识

在前端开发中,JavaScript 是必不可少的一门语言。而随着时间的推移,JavaScript 也不断地升级和更新。最新的 ES12(也被称为 ES2021)已经发布了,本文就对 ES12 的一些基础要点进行详细的介绍。

变量声明的 let 和 const

ES6 引入了 let 和 const 这两个新的声明变量的方式,而在 ES12 中,这两个关键字也有了一些新的语法糖。

let 和 const 都是块级作用域,意味着在其声明的块中才能被访问到。而且在同一块中,let 和 const 声明的变量名是不能重复的。跟 var 不同的是,let 和 const 不支持变量提升(hoisting)。

在 ES12 中,let 和 const 还引入了一个新的语法糖,叫做“暂时性死区”(temporal dead zone)。在一个块作用域中, let 和 const 声明的变量会在初始化前处于一个“死区”,也就是在初始化之前不能被访问。例如:

--------------- -- -- ---------------- -----
--- - - --

在这个例子中,由于 x 被声明为 let,初始化之前的访问都是不允许的。

相比之下,var 声明的变量会被提升到函数或全局作用域的顶部,因此可以在变量声明前访问。

const 的特性

const 声明的变量是常量,也就是不能被赋值或者重新声明。例如:

----- - - --
- - -- -- -- -------------------
----- - - -- -- -- ------------- -----

但是 const 声明的变量不是绝对的不能改变。如果变量被声明为一个对象,那么对象的属性是可以改变的,只是不能对整个变量重新赋值。例如:

----- --- - --- ---
----- - -- -- ------
--- - --- --- -- -- -------------------

空位合并运算符

ES12 引入了一种新的运算符,“空位合并运算符”(nullish coalescing operator,??),用来处理 null 或 undefined 值的默认值。

空位合并运算符的语法如下:

- -- -

当 a 不是 null 或 undefined 时,返回 a,否则返回 b。

空位合并运算符可以和短路运算符结合使用,例如:

----- - - -----
----- - - ----------
----- - - --
----- - - - -- - -- -- -- -- -

在这个例子中,空位合并运算符会依次检查 x 和 y 是否为 null 或 undefined,如果都不是,返回 x;如果 x 是 null 或 undefined,检查 y,如果 y 不是 null 或 undefined,返回 y;如果都是 null 或 undefined,返回 z。

可选链运算符

可选链运算符(Optional Chaining Operator,?.)是一个允许在不确定对象是否存在的情况下访问其属性或方法的运算符。

在旧版的 JavaScript 中,要想安全地访问一个对象的属性或方法,需要这样写:

-- ---- -- -------- -- ---------------- -
  ------------------
-

有了可选链运算符,可以这样写:

----------------------

当 obj 存在且 obj.prop 存在且 obj.prop.method 存在时,方法才会被执行。

数字分隔符

ES12 引入了一种新的语法,用来在数字中添加分隔符,方便开发者更好地阅读和书写大的数字。

数字分隔符使用下划线(_)作为分隔符,例如:

----- --- - --------------

结论

本文详细地介绍了 ES12 中的一些基础要点,包括变量声明的 let 和 const、空位合并运算符、可选链运算符和数字分隔符。这些新特性可以帮助开发者更好地编写 JavaScript 代码,提升代码质量和效率。建议开发者尽早了解并熟练使用这些新特性。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/673079deeedcc8a97c920371