ES6中js的运算符( ?. ?? )


一、JS 逻辑运算符 (也叫短路运算)

js中为我们提供了三种逻辑运算符: 或 || 与 && 非 ! 。这三个都是针对布尔值进行的,如果不是布尔类型,则需要将他转换为布尔类型,然后在进行相应的运算。

如果一个值可以被转换为true,那么这个值就是所谓的 truthy,如果可以被转换为false,那么这个值就是所谓的falsy
尽管 && || 运算符能够使用非布尔值的操作数,但它们依然可以被看作是布尔操作符,因为它们的返回值总是能够被转换为布尔值,如果要显式地将它们的返回值或者表达式转换为布尔值,可以使用双重非运算符即 !! 或者 Boolean() 构造函数

🔔🔔 JS中的6个假 :0、""、null、false、undefined、NaN都会判为false,其它都为true


🌟 1、逻辑或 ||

||OR ,逻辑或, expr1 || expr2 ,若 expr1 可转换为 true 则返回 expr1 ,否则返回 expr2

可以对符号两侧的数据进行 或 运算。当两个数据都为false时,才会返回false;当两个数据中有一个为true时,就会返回一个true。
js中的 "或"短路或,即当两个数据中,只要第一个为true,就不会看第二个数;但当第一个为false时,就需要看第二个值,才能知道结果。

只要 || 前面为 false,不管 || 后面是 true 还是 false,都返回 || 后面的值
只要 || 前面为 true , 不管 || 后面是 true 还是 false,都返回 || 前面的值


总结:真前假后    === >    一真则真

// 逻辑 或 示例
console.log(true || true);   // 结果: true (第1个为true, 则返回第1个值)
console.log(false || true);  // 结果: true (第1个为false, 则返回第2个值)
console.log(true || false);  // 结果: true (第1个为true, 则返回第1个值)
console.log(false || (3 === 4));  // 结果: false (第1个为false, 则返回第2个值, 而 3 === 4 为false)

console.log("Cat" || "Dog");  // 结果: "Cat" (第1个为true, 则返回第1个值)
console.log(false || "Dog");  // 结果: "Dog" (第1个为false, 则返回第2个值)
console.log("Cat" || false);  // 结果: "Cat" (第1个为true, 则返回第1个值)

console.log("" || false);  // 结果: false (第1个为false, 则返回第2个值)
console.log(false || "");  // 结果: "" (第1个为false, 则返回第2个值)

✳️ 寻找第一个 truthy 的值
|| 逻辑运算符的一个很重要的用法就是寻找第一个 truthy 的值,这个操作的使用频率非常高,通常用来赋值默认值。

// 寻找第一个 truthy 的值
let val0 = 0, val1 = 1, val2 = 2;
let result = val0 || val1 || val2;
console.log(result); // 结果: 1

// 设定默认值
let v1 = 0;
let result_default = v1 || 1;
console.log(result_default); // 结果: 1

🌟 2、逻辑与 &&

&&AND ,逻辑与, expr1 && expr2 ,若 expr1 && expr2 可转换为 true 则返回 expr2 ,否则返回 expr1

可以对符号两侧的数据进行 与 运算。当两个数据都为true时,则会返回true;只要有一个为false,则就会返回一个false。
js中的 "与"短路与,两个数据中 当第一个数据为false时,就不会就看第二个值,当第一个数据为true时,则需要看第二个数据才能知道结果。

只要 && 前面为 false,不管 && 后面是 true 还是 false,都返回 && 前面的值
只要 && 前面为 true , 不管 && 后面是 true 还是 false,都返回 && 后面的值


总结:假前真后    === >    一假则假

// 逻辑 与 示例
console.log(true && true);   // 结果: true (第1个为true, 则返回第2个值)
console.log(false && true);  // 结果: false (第1个为false, 则返回第1个值)
console.log(true && false);  // 结果: false (第1个为true, 则返回第2个值)
console.log(false && (3 === 4));  // 结果: false (第1个为false, 则返回第1个值)

console.log("Cat" && "Dog");  // 结果: "Dog" (第1个为true, 则返回第2个值)
console.log(false && "Dog");  // 结果: false (第1个为false, 则返回第1个值)
console.log("Cat" && false);  // 结果: false (第1个为true, 则返回第2个值)

console.log("" && false);  // 结果: "" (第1个为false, 则返回第1个值)
con
要在 Vue CLI 构建的 Vue 2 老项目添加对 ES2020 新语法可选链运算符(?.)的支持,你需要更新你的项目配置和安装相应的插件。以下是步骤: 1. **检查当前支持情况**: 首先,确认你的项目是否已经使用了 Babel 或者 TypeScript 进行 ES6 以上的语言特性转码。如果没有,你将需要它们。 2. **安装依赖**: 如果你使用的是 JavaScript,可以考虑安装 `@babel/plugin-proposal-nullish-coalescing-operator` 和 `@babel/plugin-proposal-optional-chaining` 插件来引入可选链运算符。如果你已经通过 Webpack 或者 Vue CLI 的 babel 配置管理插件,可以在 `.babelrc` (`.babelrc.js` 或 `.babel.config.js`) 添加如下内容: ```json { "plugins": [ "@babel/plugin-proposal-nullish-coalescing-operator", "@babel/plugin-proposal-optional-chaining" ] } ``` 如果你使用 TypeScript,那么 TypeScript 自带了这些新特性的支持,无需额外安装。 3. **更新配置**: 如果你在使用 .vue 文件,确保 Vue CLI 的 TypeScript 或者 Babel 模板已启用。如果你使用的是 Vue CLI 3 及以上版本,可以运行 `npm run upgrade` 来更新你的模板到最新版,这通常会包含新的 Babel 配置。 4. **重启服务**: 完成上述步骤后,重启你的开发服务器 (`npm run serve` 或者 `yarn serve`)以应用新的设置。 5. **开始使用可选链**: 现在你可以直接在代码使用 `.?.` 运算符了,例如 `user?.name`。如果 `user` 为 `null` 或 `undefined`,表达式不会抛出错误,而是返回 `undefined`。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值