js中各种运算符-Toy模板网

这篇具有很好参考价值的文章主要介绍了js中各种运算符。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

扩展运算符：...

var o={a:1,b:2};
var obj={...o,b:3};

console.log(b); // {a:1,b:3}

对象会重写值。
参考：https://www.cnblogs.com/crazycode2/p/9063497.html

逻辑运算符（&& 或 || ）

第一、&& (逻辑与)运算，看一个简单的例子：

var a = 1 && 2 && 3;
var b = 0 && 1 && 2;
var c = 1 && 0 && 2;
console.log(a);//值为3
console.log(b);//值为0
console.log(c);//值为0

运行的结果是：3，0，0。

解析：

“&&” 运算遇到false就返回；

变量a的计算：因为1 && 2，1为真，返回2；2&&3， 2为真，返回3 。

变量b的计算：因为0 && 1，0为假，返回0，不再往下计算。

第二、|| (逻辑或)运算，看一个简单的例子：

var d = 0 || 1 || 2;
var e = 1 || 0 || 2;
var f = 1 || 2 || 0;

console.log(d);//值为1
console.log(e);//值为1
console.log(f);//值为1

解析：

“||”运算遇到true就返回；

变量d的计算：因为0 || 1，0为假，返回1；1 || 2， 1为真，返回1 。

变量e的计算：因为1 || 0，1为真，返回1，不再往下计算。

三、&& (逻辑与) 和||（逻辑或）混合使用：

var g =  1 && 2 || 3;

var h = 1 || 2 && 3;

var i = 0 || 2 && 3;

console.log(g);//值为2
console.log(h);//值为1 

console.log(h);//值为3

解析：

&& (逻辑与) 优先级高于||（逻辑或）；

变量g的计算：因为1 && 2，1为真，返回2；2 || 3， 2为真，返回2 。

变量e的计算：等式看成 1 || （一个值），1为真，最终直接返回1，不需要计算后边的等式的值。

变量i的计算：因为2 && 3，2为真，返回3；0 || 3，0为假，返回3。

指数运算符（**）

问题：x的y次幂如何表示？
一、指数运算符（**）

console.log(2 ** 2); // 4
console.log(3 ** 2); // 9
console.log('3' ** '2'); // 9

二、Math.pow()

console.log(Math.pow(2, 2)); // 4
console.log(Math.pow(3, 2)); // 9
console.log(Math.pow('3', '2')); // 9

参考：https://www.cnblogs.com/mazey/p/8447098.html

可选链运算符（?.）

空值合并运算符（??）

js中各种运算符
最近出现的 a?.b 以及 a ?? b 语法编译报错是因为browserslist升级到4.21.0导致的，@babel/preset-env 依赖browserslist的配置来加载对应的插件，最近升级的 browserslist 4.21.0 把IE11标记为dead了，导致 > 1%, not dead, last 2 versions 这个条件不包括IE11，而其他浏览器最新版本都已经原生支持上述两个语法，所以@babel/preset-env就不加载转译上述语法的插件，原样输出对应的语法，而我们的devops上默认的node版本是12，不支持上述两种语法，导致报错

解决办法：
1、使用node16，上述两种语法都支持
2、手动配置 babel插件 plugins: [
‘@babel/plugin-proposal-nullish-coalescing-operator’,
‘@babel/plugin-proposal-optional-chaining’
]
3、配置 “browserslist”: [
“> 1%”,
“last 2 versions”,
“not dead”,
“IE 11”
],

相关链接：
https://github.com/vuejs/vue-cli/issues/7209
https://github.com/browserslist/browserslist/blob/4.21.0/CHANGELOG.md#421文章来源地址https://www.toymoban.com/news/detail-450217.html

到了这里，关于js中各种运算符的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！