JS操作符

JavaScript中的运算符主要用于连接简单的表达示,组成一个复杂的的表达式
一些运算符可以作用于任何数据类型(typeof),但大部分操作符希望操作数是特定的类型,而且大部分操作符会计算出(我们也常说返回)一个特定类型的值(typeof返的全是string)

在JavaScript中运算符通常会根据需要对操作数进行类型转换,乘法操作符希望操作数是数字,但是 "3" * "5"也是合法的,JavaScript会自动将其转换为数字计算,返回Number 15。

大多数运算符都是由标点符号组成(+、>、!),也有关键字运算符如typeof、delet、instanceof

加性操作符

加法和减法是最简单的算数操作符,但是在JavaScript中运算符会根据需要对操作数进行类型转换

+ 加法

如果两个操作数都是Number类型,则执行常规运算;
如果两个操作数不同类型则会按特定规则对操作数进行类型转换,规则如下:

只要其中有一个数是NaN结果就是NaN(任何涉及到NaN是运算都会返回NaN)

var numberNaN = 1 + NaN;

操作数涉及boolean值true会转换成1,false为0

var num = 1 + true;//2

涉及到字符串的运算
如果两个数值都是字符串就会把这两个字符串拼接起来

var java = "Java"
var javaScript = java + "Script";
console.log(javaScript);//"JavaScript" 两个字符被拼接了

如果其中只有一个操作数是字符串,会将另一个操作数转换成字符串,然后再拼接

var num = 456;
var str = num + "789"
console.log(typeof(str));//"string"
console.log(str)//"456789"

如果一个操作数是对象
会调用这个对象valueOf()或者toString()方法

    var obj = {
        toString: function(){
            return "20"
        },
        valueOf:function(){
            return 10;
        }
    }
console.log(1 + obj)//11 valueOf的优先级比toString高

+号运算符会将操作数进行类型转换,这是我们可以利用的。

我们可以通过 +号运算符来把某个值按照转换规则转换成数值,规则如下

  • 如果是Boolean值,true和false分别为0和1
  • null 为0
  • undefiend为NaN

涉及到字符串
如果字符串中只包含数值(包括前面带正号和负号的情况),会装换成十进制数字

var number = + "123"//结果为:number 123;

如果字符中包含有效的十六进制格式,则会转换成相同大小的十进制格式的整数

var number = + 0xf;//15

如果字符串为空""则为0

var number = + "";//0

如果字符串中包含上面叙述格式外的字符则为NaN

var numberNaN = + "this is NaN"//NaN

- 减法

不同于+号运算符可以用于拼接字符串,减法只能用于运算,所以会尽量把操作数转换为数值
操作数中有无法转换成数值的字符串结果就会为NaN

var str1 ="aaaa"
var str2 ="bbbb"
var test = str1 - str2;//NaN

如果是操作数中的字符串能转换成数值的就转换成数值进行减发运算

var str1 = "1"
var str2 = "2"
var test = str1 - str2;//-1

如果操作数是对象依然和+好运算符一样调用valueOf和toString,然后进行减法运算

乘性操作符

乘性操作符和减号操作符其实很类似,它们的作用都限于数值操作所以都会把操作数尽可能的转换成数值

乘法

使用(*),用于计算两个数的乘积

  • 如果两个操作数都是数值执行常规运算
  • 如果一个操作数是为NaN,结果为NaN
  • 如果一个操作数不是数值则转换为数值进行计算,如果无法转换为数值则为NaN;

除法

由(/)表示

  • 如果两个操作数都是数值执行常规运算
  • 如果一个操作数是为NaN,结果为NaN
  • 如果一个操作数不是数值则转换为数值进行计算,如果无法转换为数值则为NaN;

求模

求摸(余数)操作符由(%)表示

  • 如果两个操作数都是数值则执行常规除法,返回其余数
  • 如果被余数为0,这返回0
  • 如果操作数不是实在则转换为数值,无法转换为NaN

自增和自减操作符

分为前置型和后置型,前置型位于操作数之前而后置型反之

前置型自增与自减

前置型自增与自减都会在语句被求值之前作用在操作数上

var num1 = 2;
var num2 = 22;
var num3 = --num1 + num2;
var num4 = num1 + num2;
console.log(num3);//23
console.log(num4);//23

上面这个例子 num3之所以等于21是应为num1先减去了1才和num2相加。
而num4也等于21是因为num1已经被减去了1然后进行加上num2的22就是等于23
原理是前置自增和前置自减在操作符中的优先级比+ =都要高所以在这两个操作符还没执行时,num1已经进行了自减

后置型自增和自减

后置型自增与自减会在语句被求值之后再作用于操作数上

var num1 = 2;
var num2 = 20;
var num3 = num1++ + num2;//22
var num4 = num1 + num3;//23

num3的结果为22,而num4的结果为23就是因为语句被后置++--的优先级比=赋值操作符的优先级低,所以num1+num2的计算结果都赋值给了num3后才执行。

赋值运算符

赋值运算符用于给变量赋值,最常见的赋值运算符,当然就是等号,表达式x=y表示将y赋值给x。除此之外,JavaScript还提供其他11个赋值运算符。

x += y // 等同于 x = x + y
x -= y // 等同于 x = x - y
x *= y // 等同于 x = x * y
x /= y // 等同于 x = x / y
x %= y // 等同于 x = x % y
x >>= y // 等同于 x = x >> y
x <<= y // 等同于 x = x << y
x >>>= y // 等同于 x = x >>> y
x &= y // 等同于 x = x & y
x |= y // 等同于 x = x | y
x ^= y // 等同于 x = x ^ y

比较运算符

比较运算符比较两个值,然后返回一个布尔值,表示是否满足比较条件。JavaScript提供了8个比较运算符。

==  //相等
=== //严格相等
!= //不等于
!== //严格不等于
< //小于
<== //小于或等于
> //大于
>==//大于或等于

布尔运算符

布尔运算符非常重要

逻辑非(!)

可以应用于任何值。无论这个值是什么类型都会返回一个布尔值,当这个布尔值是求反后的结果

var num = 1;
var boo = !num;//false

但是使用两个逻辑非就会有和类型装换函数一样的效果

var num = 1;
var boo = !!num;//true

逻辑与(&&)

同样可以用于所以类型
如果第一个操作数为false就直接返回第一个操作数
如果第一个数为true则返回第二个操作数

var num1 = 1;
var num2 = NaN;
var test = num1 && num2;
console.log(test);//NaN;

操作数不是布尔值的情况下会按照Boolean()转型函数的规则来装换成布尔值进行比较

逻辑与的逻辑就是得两个操作数都为true才会得到ture,有一个为false就会返回false。如果第一个操作数是就是false那就不需要要看第二个操作数了所以会直接把第一个操作数返回,如果第一个操作数为true才会考虑第二操作数

逻辑或

由(||)表示
如果第一个操作数能转换为true就会返回第一个操作数
如果第一个操作数为false,则无论如何都会返回第二个操作数

var num1 = NaN;
var num2 = 2;
var test = num1 || num2
console.log(test);//2

逻辑或就是两个操作数中有其中一个为true就会返回true,所以第一个操作数为true时就不会考虑第二操作数,如果第一个操作数为fasle时返回第二操作数

三目运算符

condition? true case : false case

var a = 1;
var b = 3;
b > a ? console.log("b>a"):console.log("a>b")
//b>a

运算符优先级

MDN运算符优先级汇总表

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容