JavaScript运算符基本术语和运算优先级介绍!

1,227 阅读5分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」,赢取创作大礼包,挑战创作激励金

虽然小学就已经学过数学的加减乘除了,可是你有好好学过JS里面的加减乘除吗?一起来看看吧!

提问

PS:答案都在文中

👉 什么是运算元,一元运算符,二元运算符?

👉 加号,是一元运算符,还是二元运算符?

👉 如果要排个优先级,一元运算符,二元运算符谁更高?

👉 上期回顾:说说JavaScript的变量

活动需要集齐🥂【10个评论】🥂,当前进度还是为零😭,所以

9H2{R6QV0ZF0{JUH~~P3RPM.png

基本术语

运算元:运算符应用的对象,比如【乘法运算 5 * 2】中,5和2就叫做运算元(更经常的是被叫做参数)

一元运算符:当【运算符】只有一个【运算元】时,被称为【 一元运算符】,如

let x = 1;
x = -x; //这里的-,就叫做【一元负号运算符】

二元运算符:当一个【运算符】有两个【运算元】时,就被称为【 二元运算符】,如

let x = 1, y = 3;
console.log( y - x  ); // 2,这里的-,就叫做【二元减号运算符】

运算符优先级

如果一个表达式拥有超过一个运算符,执行的顺序则由 优先级 决定。

比如:

  • 表达式 1 + 2 * 2 中,乘法先于加法计算
  • 圆括号拥有最高优先级,可用于修改优先级(1 + 2) * 2

每个运算符都有对应的优先级数字。数字越大,越先执行。如果优先级相同,则按照由左至右的顺序执行。

:你只要先记住【一元运算符优先级高于二元运算符】,其它的想要了解,可以看👉 Mozilla 的 优先级表

JavaScript支持的数学运算

  • 加法 +
  • 减法 -
  • 乘法 *
  • 除法 /
  • 取余 %
  • 求幂 **

以下只对特殊的运算符进行加以说明

加法 +

当它是【二元运算符】时,它可以用于

  • 数学上用于求和

  • 字符串上用于字符串拼接

    let s = "my" + "string";
    console.log(s); // mystring
    

    注:只要任意一个运算元是字符串,那么另一个运算元也将被转化为字符串。

    console.log( '1' + 2 ); // "12"
    console.log(2 + 2 + '1' ); // "41",不是 "221",运算符是按顺序工作
    
  • 【加 +】运算符,是唯一一个以这种方式支持字符串的运算符;

  • 其他算术运算符只对数字起作用,并且会将其运算元转换为数字;

console.log( 6 - '2' ); // 4,将 '2' 转换为数字
console.log( '6' / '2' ); // 3,将两个运算元都转换为数字

当它是【一元运算符】时,

  • 对数字无效
  • 可以把其它的【转化】为数字
// 对数字无效
let x = 1;
console.log( +x ); // 1

let y = -2;
console.log( +y ); // -2

// 转化非数字
console.log( +true ); // 1
console.log( +"" );   // 0

tip:可以利用这个来给字符串数字求和

//📒默认是字符串合并
let apples = "2";
let oranges = "3";
console.log( apples + oranges ); // "23",二元运算符加号合并字符串

//📒如果想要当成数字对待,可以这样改:【一元运算符加号(字符串转为数字);二元运算符加号(数字求和)】
console.log( +apples + +oranges ); // 5

//📒等同于
console.log( Number(apples) + Number(oranges) ); // 5

取余 %

a % b = a除b的余数

console.log( 5 % 2 ); // 1,5 除 2 的余数
console.log( 8 % 3 ); // 2,8 除 3 的余数

求幂 **

求幂运算 a ** ba 乘以自身 b 次。

console.log( 2 ** 2 ); // 4  (2 * 2,自乘 2 次)
console.log( 2 ** 3 ); // 8  (2 * 2 * 2,自乘 3 次)
console.log( 2 ** 4 ); // 16 (2 * 2 * 2 * 2,自乘 4 次)

赋值运算符

= 也是一个运算符,它叫赋值运算符号,它的优先级非常低,只有 3,所以通常在最后才被执行;

比如:

//所有的计算执行完,才执行=,将计算赋值给x
let x = 2 * 2 + 1;
console.log( x ); // 5

看个复杂的例子:

let a = 1;
let b = 2;
let c = 3 - (a = b + 1);
console.log( a ); // 3
console.log( c ); // 0

这个例子,(a = b + 1) 的结果是赋给 a 的值(也就是 3)。然后该值被用于进一步的运算。(需要了解一下,但是实际开发中最好不要这样写。)

还可以链式赋值,链式赋值从右到左进行计算

let a, b, c;
a = b = c = 2 + 2;
console.log( a ); // 4
console.log( b ); // 4
console.log( c ); // 4

修改并赋值

我们经常会遇到,需要对一个变量做运算,并将新的结果存储在同一个变量中。

常规写法:

let n = 2;
n = n + 5;
n = n * 2;

可以使用运算符 +=*= 来缩写这种表示。

let n = 2;
n += 5; // 现在 n = 7(等同于 n = n + 5)
n *= 2; // 现在 n = 14(等同于 n = n * 2)

这类运算符的优先级与普通赋值运算符的优先级相同,所以它们在大多数其他运算之后执行:

let n = 2;
n *= 3 + 5;// 16 (右边部分先被计算,等同于 n *= 8)

所有算术和位运算符都有简短的“修改并赋值”运算符:/=-=

结语

文章会持续更新,优化,以及重构!

「本文已参加【掘力星计划】,在本文评论区下发布评论,就有机会参加【100份掘金周边】💥抽奖活动💥,徽章、拖鞋、马克杯、帆布袋等你来拿,👉活动详情」。

参考资料:Basic operators, maths


🎨【点赞】【关注】不迷路,更多前端干货等你解锁

往期推荐

👉 来看看最新版的谷歌浏览器开发者工具都更新了些什么?

👉 layui镜像合集+怎么把人家整个网站拷贝下来的

👉 从0开始学习JavaScript

👉 HTTP备忘录 | 常用状态码&请求头&响应头&Cookies及请求方法合集