js中几个优雅的运算符使用技巧

一、可选链接运算符【 ?. 】

相信大部分前端小伙伴都会遇到null和未定义的属性。特别是在处理嵌套对象时，一下代码很常见：

if(data && data.children && data.children[0] && data.children[0].name){
	console.log(data.children[0].name)
}

我们在使用某对象的属性时，必须确保属性存在。但是，当对象具有具有可选属性或某些配置对象具有某些值的动态映射时，可能会遇到类似的情况，需要检查很多边界条件。
此时我们就可以使用 可选链接运算符【 ?. 】，一切就变得简单了。他为我们检查嵌套属性，而不必显式搜索梯形图。我们要做的就是使用 ?. 要检查空值的属性之后的运算符。我们可以随意在表达式中多次使用该运算符，并且如果未定义任何项，它将尽早返回。

对于静态属性用法是：

obj?.property

对于动态属性用法是：

obj?.[property]

以上代码可以简化为：

let name = data?.children?.[0]?.name

// 举例
let data;
console.log(data?.children?.[0]?.name)
// undefind

data = {
	children:[{
		name: "张三"
	}]
}
console.log(data?.children?.[0]?.name)
// 张三

这样写是不是更简单了呢？由于操作符一旦为空值就会终止，因此也可以使用它来有条件的调用方法或应用条件逻辑

const conditionProperty = null;
let index = 0;

console.log(conditionProperty?.[index++]); // undefined
console.log(index); // 0

对于方法的调用你可以这样写

obj.runOnlyIfMethodExists?.();


//例如
let parent = {
	name: "parent",
	friends: ["p1","p2","p3"],
	getName: function(){
		console.log(this.name)
	}
};
parent.getName?.(); // parent
parent.getTitle?.(); // 不会执行 undefined

如上案例，如果我们直接调用parent.getTitle()，则会报 Uncaught TypeError: parent.getTitle is not a function 错误，而parent.getTitle?.()则会终止不执行。

二、逻辑空分配【 ??=】

expr1 ??= expr2

逻辑空值运算符仅在 nullish 值 (null 或者 undefined ) 时才能将值分配给 expr1，表达方式：

x ??= y
//可能看起来等效于
x = x ?? y
// 但并非如此！ 有细微的差别

【??】运算符从左到右操作， 如果 X 不为 nullish 值时，Y表达式不执行。 因此，如果 X 不为 null 或者 undefined，则永远不会对表达式 Y 进行求值。如果 Y 为一个函数，它将根本不会被调用。因此，此逻辑赋值运算符等效于

x ?? x = y

三、逻辑或分配【 ||=】

x ||= y
// 等同于
x || x = y

这在我们想要保留现有值（如果不存在）的情况下很有用。例如，当搜索请求中没有数据，我们希望将元素的内部HTML设置为默认值。否则显示现有数据列表。如下：

document.getElementById('search').innerHTML ||= '<i>No posts found matching this search</i>'

三、逻辑与分配【 &&=】

可能你已经猜到了。此逻辑赋值运算符仅在左侧为真时才赋值。因此：

x &&= y
// 等同于
x && x = y

注意事项： IE浏览器不支持 可选链接运算符【 ?. 】，因此如果需要支持该版本或更旧版本的浏览器，则可能需要添加Babel插件。对于Node.js，需要为此升级到Node 14 LTS版本，因为12.X不支持该版本。