JavaScript运算符

148 阅读3分钟

「这是我参与2022首次更文挑战的第18天,活动详情查看:2022首次更文挑战

Hope is a good thing, maybe the best of things. And no good thing ever dies—— 《The Shawshank Redemption》

前言

在JavaScript的世界上有很多的运算符,通常用来做赋值、比较、算数,位运算,逻辑等等功能。特别是三元运算符和逻辑运算符在我们的日常开发中使用特别多。

自己今天还犯了一个预算附优先级的问题,导致了代码的bug,所以今天就再来复习一下运算符的相关知识

运算符

赋值运算符

最简单的赋值运算符是等于(=),它将右边的操作数值赋给左边的操作数。当然了还有一些复合赋值,比如我们常用的:

名字简写含义
加法赋值x += yx = x + y
减法赋值x -= yx = x - y
求余赋值x %= yx = x % y

对于更复杂的赋值,解构赋值语法是一个能从数组或对象对应的数组结构或对象字面量里提取数据的 Javascript 表达式。

const obj = {a: 1, b: 2, c: 3};
const foo = ["one", "two", "three"];

// ❌ bad
const one = foo[0], two = foo[1], three = foo[2];
const a = obj.a, b = obj.b, c = obj.c;


// ✅ good
const [one, two, three] = foo;
const { a, b, c } = obj;

比较运算符

比较运算符比较它的操作数并返回一个基于表达式是否为真的逻辑值。 例如有:

  • 等于 (==) 不会比较类型,两边操作数相等时返回 true。
3 == '3' ; // true
  • 全等(===) 两边操作数相等且类型相同时返回 true。
3 === '3';  // false

其它的就不再多说了,可以查看 比较运算符

算术运算符

常见的需要我们理解有:

  • 求余(%) 二元运算符. 返回相除之后的余数.
5 % 2 ; //  1
  • 自增(++) 如果放在操作数前面 (++ x), 则返回加一后的值; 如果放在操作数后面 (x ++), 则返回操作数原值,然后再将操作数加一。
var a = 1, b = 1;
console.log(a++); // 1
console.log(++b); // 2

逻辑运算符

逻辑运算符常用于布尔(逻辑)值之间; 当操作数都是布尔值时,返回值也是布尔值。当操作数不是布尔值的时候返回值就可能不是布尔值。

常用的场景: 断路逻辑求值

false && other  // 被短路求值为 false
true || other   // 被短路求值为 true

const obj = {a: 1, b: 2, c: 3};
const result = obj.a || '11212'; // 1

const obj = {b: 2, c: 3};
const result = obj.a || '11212'; // 11212

使用逻辑运算符的是需要注意:

null0NaN, 空字符串("")和undefined 会被转为 false

条件(三元)运算符

语法规则:

条件 ? 值1 : 值2

// ❌ bad
const obj = {b: 2, c: 3};
let result;
if(obj.a) {
    result = 1;
} else {
    result = 0
}

// ✅ good
const obj = {b: 2, c: 3};
const result = obj.a ? 1 : 0;

关于操作符的复习,今天就到此位置了。明天继续回顾它的优先级

结语

如果这篇文章帮到了你,欢迎点赞👍和关注⭐️。

文章如有错误之处,希望在评论区指正🙏🙏

欢迎关注我的微信公众号,一起交流技术,微信搜索 🔍 :「 五十年以后