JavaScript 是一门灵活性非常高的语言,但它的一些特性却会在编码的时候出现一些问题,例如 undefined 和 null 的处理等等。ES2020 的新功能和语法能够较好地解决这些问题,这篇文章将详细讲解这些新特性。
链式判空操作符
链式判空操作符 ?.
是一项非常实用的新语法,它的作用是在对象属性的“链”中安全地访问它的属性而不必担心其中任何一步的值为 null
或 undefined
而导致代码执行错误。
示例:
-- -------------------- ---- ------- ----- ------ - - ----- -------- -------- - --------- -------- - -- --------------------------------------- -- -------- --------------------------------- -- ---------
可以看到,这个新语法在链式对象访问的过程中能够判断各个链的值是否存在而不会导致错误(如对 null
或 undefined
访问属性时会报错),同时还能保持代码逻辑的简洁。
空值合并操作符
空值合并操作符 ??
可以在变量为空或者未定义时使用一个默认值,这个操作符是一个有意义的代替或或或(||
)的操作符。
示例:
let person = { name: undefined, age: 20 }; console.log(person.name ?? 'No Name'); // 'No Name' console.log(person.age ?? 'No Age'); // 20 console.log(person.job ?? 'No Job'); // 'No Job'
可以看到,??
操作符在变量为空时使用默认值,但不包含 0
或者空字符串等等 “假值”。
“=”、“+=” 和 “-=” 的可选链操作
除了上述两个新特性,ES2020 还加入了可选链操作符(?.)和 ??
操作符与其他操作符的组合,以便方便地处理 null 和 undefined 的情况。
例如,使用可选链语法,可以安全地设置对象属性,即使目标对象为 null 或 undefined:
let user = null; user?.name = "John"; // 由于 user 是 null,因此对它的任何赋值都会被忽略。
类似地,可以方便地为未定义或未定义数组的属性或元素设置默认值。
例如,如果尝试从未定义、为 null 或长度为零的数组中设置值:
let arr = null; arr?.[0] = 10; // 由于 arr 是 null,因此对它的任何赋值都会被忽略。
语法也可以使用 ??
一起使用,例如:
let user = null; let x = 10; console.log(user?.name ?? "Anonymous"); // Anonymous console.log(x ?? 0); // 10 console.log(user?.name = "John" ?? "Anonymous"); // "Anonymous",这里 "John" 没有被赋值
总结
ES2020 的新特性对于解决 JavaScript 中一些很难处理的问题帮助非常大,特别是在安全访问对象属性、处理空值等方面,这些新特性对于任何使用 JavaScript 的开发人员都非常有意义,可以在编写 JavaScript 代码的时候更安全、更方便、更整洁地处理各种类型的数据。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64edd1a4f6b2d6eab37f8132