当前位置：首页 > news >正文

深入探讨-JavaScript-逻辑赋值运算符

news 2025/5/18 19:17:09

null && 100**2 // null

undefined && 100**2 // undefined

逻辑赋值运算符

&&= ||= ??=
这个运算符将赋值与条件逻辑运算符结合在一起，因此命名为**“逻辑赋值”** 。它们只是一种简写，例如，x && = y是x && (x = y) 的简写。

从逻辑赋值返回的值不是更新的赋值，而是已计算表达式的值。

由于先前的ECMAScript特性，比如默认参数和nullish合并操作符，你可以说在逻辑赋值所提供的功能中肯定存在一些冗余。虽然这种速记看起来很流畅，而且我相信当我们发现更多的用例时，它会派上用场的。

逻辑与赋值 ( &&= )

// 逻辑与
LHS &&= RHS
// 等价于
LHS && (LHS = RHS)

// 事例
// if x is truthy, assign x to y, otherwise return x
// 如果 x 为真值，则将 y 赋值给 x，否则返回 x
let x = 1
const y = 100
x &&= y // x 为 100

// 与上面对应的长的写法
x && (x = y)

逻辑或赋值 ( ||= )

// 逻辑或
LHS ||= RHS

// 等价于
LHS || (LHS = RHS)

// 事例
// 如果 x 为真值，返回 x，否则将 y 赋值给 x
let x = NaN
const y = 100
x ||= y // x 为 100

// 与上面对应的长的写法
x || (x = y)

逻辑 nullish 赋值 ( ??= )

// 逻辑 nullish
LHS ??= RHS

// 等价于
LHS ?? (LHS = RHS)

// 事例
// if x.z is nullish, assign x.z to y
let x = {}
let y = 100;
x.z ??= y // x 为 { z: 100 }

// 与上面对应的长的写法
x.z ?? (x.z = y)

实现中逻辑赋值的例子

React中的JSX

let loading = true
const spinner =
loading &&= spinner

DOM

el.innerHTML ||= ‘some default’

对象

// 如果对象没有 onLoad 方法，则设置一个方法
const config = {};
config.onLoad ??= () => console.log(‘loaded!’)

const myObject = { a: {} }

myObject.a ||= ‘A’; // 被忽略，因为 myObject 中 a 的值为真值
myObject.b ||= ‘B’; // myObject.b 会被创建，因为它不丰 myObject 中

// {
// “a”: {}
// “b”: “B”
// }

myObject.c &&= ‘Am I seen?’; // 这里的 myObject.c 为虚值，所以什么都不会做

如何在项目中使用逻辑赋值

Chrome 已经支持逻辑赋值。为了向后兼容，请使用 transformer。如果您使用的是Babel，请安装插件：

npm install @babel/plugin-proposal-logical-assignment-operators

并在 .babelrc 中添加发下内容：

{
“plugins”: [“@babel/plugin-proposal-logical-assignment-operators”]
}

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…