"Code tailor",为前端开发者提供技术相干资讯以及系列根底文章,微信关注“小和山的菜鸟们”公众号,及时获取最新文章。

前言

在开始学习之前,咱们想要告诉您的是,本文章是对 JavaScript 语言常识中 "操作符" 局部的总结,如果您已把握上面常识事项,则可跳过此环节间接进入题目练习

  • 一元操作符
  • 位操作符(理解)
  • 布尔操作符
  • 乘性操作符
  • 指数操作符
  • 加性操作符
  • 关系操作符
  • 相等操作符
  • 条件操作符
  • 赋值操作符
  • 逗号操作符
  • 运算程序

如果您对某些局部有些忘记, 曾经为您筹备好了!

什么是操作符 ?

在 ECMA-262 中形容了一组可用于操作数据值的符号被称为操作符

有哪些类型的操作符

一元操作符

只操作一个值的操作符叫一元操作符

1.递增/递加操作符

  • 递增操作符

有两种模式,即 ++ii++ (两者有些稍微区别)

let age = 29++age

实际上等于

let age = 29age = age + 1 //console.log(age) = 30

i++ 和 ++i 的区别

  • i++ :先援用后自加
  • ++i :先自加后援用
  • 递加操作符

同理 i-- --i 也有稍微区别

let age = 29--age //console.log(age) = 28let num = 2let num1 = 20let sum = num-- + num1 //console.log(sum) = 22;// 如果换成这样let sum = --num + num1 //console.log(sum) = 21;

留神: 该操作符能够作用于任何值,不限于整数 — 字符串、布尔值、浮点值、甚至对象都能够。

  • 对于字符串,如果是无效的数值模式,则转换为数值再利用扭转。变量类型从字符串变成数值。
  • 对于字符串,如果不是无效的数值模式,则将变量的值设置为 NaN 。变量类型从字符串变成数值。
  • 对于布尔值,如果是 false,则转换为 0 再利用扭转。变量类型从布尔值变成数值。
  • 对于布尔值,如果是 true,则转换为 1 再利用扭转。变量类型从布尔值变成数值。
  • 对于浮点值,加 1 或减 1
  • 如果是对象,则调用其 valueOf() 办法获得能够操作的值。对失去的值利用上述规定。如果是 NaN,则调用 toString() 并再次利用其余规定。变量类型从对象变成数值。

2.一元加和减

一元加和减操作符对大多数开发者来说并不生疏,它们在 ECMAScript 中跟在高中数学中的用处一样。
  • 一元加:由一个加号( + )示意,放在变量前头,对数值没有任何影响
let num = 25num = +numconsole.log(num) // 25

若利用到非数值,则会执行与应用 Number() 转型函数一样的类型转换;

留神:

  • 布尔值 falsetrue 转换为 0 和 1
  • 字符串依据非凡规定进行解析
  • 对象会调用它们的 valueOf() 和(或) toString() 办法以失去能够转换的值
let a = '01'let b = '1.2'let c = 'c'let d = falselet e = 1.2a = +a // 变为数值1b = +b // 变为数值1.2c = +c // 变为NaNd = +d // 变为数值0e = +e // 不变
  • 一元减: 由一个减号( - )示意,放在变量前头,次要用于把数值变成负值,如把 1 转换为 -1。
let num = 25num = -numconsole.log(num) // -25

若利用到非数值,一元减会遵循与一元加同样的规定,先对它们进行转换,而后再取负值

let a = '01'let b = '1.2'let c = 'c'let d = falselet e = 1.2a = -a // 变为数值-1b = -b // 变为数值-1.2c = -c // 变为NaNd = -d // 变为数值0e = -e // 变为-1.2

位操作符(理解)

用于数值的底层操作,也就是操作内存中示意数据的比特(位)

1.按位非

按位非操作符用波浪符(~)示意,它的作用是返回数值的一补数
let num1 = 25 // 二进制 00000000000000000000000000011001let num2 = ~num1 // 二进制 11111111111111111111111111100110console.log(num2) // -26

2.按位与

按位与就是将两个数的每一个位对齐,而后基于真值表中的规定,对每一位执行相应的与操作
let result = 27 & 4console.log(result) // 0/* 27 = 0000 0000 0000 0000 0000 0000 0001 1011 4  = 0000 0000 0000 0000 0000 0000 0000 0100---------------------------------------------AND = 0000 0000 0000 0000 0000 0000 0000 0000*/

3.按位或

按位或操作符用管道符(|)示意,同样有两个操作数,按位或遵循真值表
let result = 27 | 4console.log(result) // 31/* 27 = 0000 0000 0000 0000 0000 0000 0001 1011 4  = 0000 0000 0000 0000 0000 0000 0000 0100--------------------------------------------- OR = 0000 0000 0000 0000 0000 0000 0001 1111 */

4.按异位或

按位异或用脱字符(^)示意,同样有两个操作数,按位异或遵循真值表
let result = 27 ^ 3console.log(result) // 24/* 27 = 0000 0000 0000 0000 0000 0000 0001 1011 3  = 0000 0000 0000 0000 0000 0000 0000 0011---------------------------------------------XOR = 0000 0000 0000 0000 0000 0000 0001 1000*/

5.左移

左移操作符用两个小于号(<<)示意,会依照指定的位数将数值的所有位向左挪动
let oldValue = 2 // 等于二进制 10let newValue = oldValue << 5 // 等于二进制 1000000,即十进制 64

留神在移位后,数值右端会空出 5 位。左移会以 0 填充这些空位,让后果是残缺的 32 位数值,左移会保留它所操作数值的符号

6.有符号右移

有符号右移由两个大于号(>>)示意,会将数值的所有 32 位都向右移,同时保留符号(正或负)。有符号右移实际上是左移的逆运算
let oldValue = 64 // 等于二进制 1000000let newValue = oldValue >> 5 // 等于二进制 10,即十进制 2

7.无符号右移

无符号右移用 3 个大于号示意(>>>),会将数值的所有 32 位都向右移。对于负数,无符号右移与有符号右 移后果雷同
let oldValue = 64 // 等于二进制 1000000let newValue = oldValue >> 5 // 等于二进制 10,即十进制 2

对于正数,有时候差别会十分大。与有符号右移不同,无符号右移会给空位补 0,而不论符号位是什么。

let oldValue = -64 // 等于二进制 11111111111111111111111111000000let newValue = oldValue >>> 5 // 等于十进制 134217726/*11111111111111111111111111000000 => 等于-6400000111111111111111111111111110 => 等于134217726*/

布尔操作符

1.逻辑非

操作数返回值
对象false
空字符串true
非空字符串false
数值 0true
非 0 数值(包含 Infinity)false
nulltrue
NaNtrue
undefinedtrue
console.log(!false) // trueconsole.log(!'blue') // falseconsole.log(!0) // trueconsole.log(!NaN) // trueconsole.log(!'') // trueconsole.log(!12345) // false

2.逻辑与

第一个操作数第二个操作数后果
对象any返回第二个操作数
true对象返回第二个操作数
对象对象返回第二个操作数
nullany如果有一个操作数是 null,则返回 null
NaNany如果有一个操作数是 NaN,则返回 NaN
undefinedany如果有一个操作数是 undefined,则返回 undefined
let found = true;let clear = {};let result = (found && clear); // 返回clear

3.逻辑或

第一个操作数第二个操作数后果
对象any如果第一个操作数是对象,则返回第一个操作数
false对象如果第一个操作数求值为 false,则返回第二个操作数
对象对象如果两个操作数都是对象,则返回第一个操作数
nullnull如果两个操作数都是 null,则返回 null
NaNNaN如果两个操作数都是 NaN,则返回 NaN
undefinedundefined如果两个操作数都是 undefined,则返回 undefined
let myObject = preObject || afeObject

preObject 变量蕴含首选的值,afeObject 变量蕴含备用的值

  • 如果 preObject 不是 null,则它的值就会赋给 myObject
  • 如果 preObjectnull,则 afeObject 的值就会赋给 myObject
  • 这种模式在 ECMAScript 代码中常常用于变量赋值

乘性操作符

ECMAScript 定义了 3 个乘性操作符:乘法、除法和取模

1.乘法操作符

乘法操作符由一个星号(*)示意,能够用于计算两个数值的乘积。其语法相似于 C 语言
let result = 12 * 34

留神:

返回 NaN 的操作状况返回 Infinity 的操作状况
有任一操作数是 NaNInfinity 乘以 Infinity
Infinity 乘以 0Infinity 乘以非 0 的无限数值,则依据第二个操作数的符号返回 Infinity 或-Infinity

2.除法操作符

除法操作符由一个斜杠(/)示意,用于计算第一个操作数除以第二个操作数的商
let result = 34 / 12

留神:

操作数后果
有任一操作数是 NaNNaN
Infinity 除以 InfinityNaN
是 0 除以 0NaN
非 0 的无限值除以 0依据第一个操作数的符号返回 Infinity 或-Infinity
Infinity 除以任何数值依据第二个操作数的符号返回 Infinity 或-Infinity

3.取模操作符

取模(余数)操作符由一个百分比符号(%)示意
let result = 16 % 5 //余1个
操作数返回值
数值余数
如果被除数是有限值,除数是无限值NaN
如果被除数是无限值,除数是 0NaN
如果是 Infinity 除以 InfinityNaN
如果被除数是无限值,除数是有限值被除数
如果被除数是 0,除数不是 00
如果有不是数值的操作数,则先在后盾用 Number()函数将其转换为数值/

指数操作符

ECMAScript 7 新增了指数操作符(**),Math.pow() 当初有了本人的操作符,后果是一样的
console.log(Math.pow(4, 2); // 16console.log(4 ** 2); // 9console.log(Math.pow(16, 0.5); // 4console.log(16 ** 0.5); // 4

加性操作符

加性操作符,即加法和减法操作符,个别都是编程语言中最简略的操作符

1.加法操作符

第一操作数第二操作数返回值
数值NaNNaN
InfinityInfinityInfinity
-Infinity-Infinity-Infinity
Infinity-InfinityNaN
+0+0+0
-0+0+0
-0-0-0
字符串字符串拼接起来
字符串any将第二操作数转换为字符,再与第一操作数拼接起来

注:第一操作数和第二操作数无特定程序

let result = 10 + 10 // 20let result2 = 10 + '5' // 105

2.减法操作符

第一操作数第二操作数返回值
数值NaNNaN
InfinityInfinityNaN
-Infinity-InfinityNaN
Infinity-InfinityInfinity
-InfinityInfinity-Infinity
+0+0+0
-0+0-0
-0-0+0

补充:如果有任一操作数是字符串、布尔值、nullundefined,则先在后盾应用 Number()将其转换为数值,而后再依据后面的规定执行数学运算

let result1 = 6 - true // true 被转换为 1,所以后果是 5let result2 = NaN - 2 // NaNlet result3 = 6 - 3 // 3let result4 = 6 - '' // ""被转换为 0,所以后果是 6let result5 = 3 - '2' // "2"被转换为 2,所以后果是 1let result6 = 2 - null // null 被转换为 0,所以后果是 2

关系操作符

关系操作符执行比拟两个值的操作,包含小于(<)、大于(>)、小于等于(<=)和大于等于(>=),用法跟数学课上学的一样
let result1 = 6 > 3 // truelet result2 = 4 < 3 // false
操作数产生行为
都是数值数值比拟
都是字符串一一比拟字符串中对应字符的编码
任一操作数是数值则将另一个操作数转换为数值,执行数值比拟
任一操作数是对象调用其 valueOf()办法,如果没有 valueOf()办法,则调用 toString()办法,获得后果后再依据后面的规定执行比拟
任一操作数是布尔值将其转换为数值再执行比拟
//补充:let result1 = NaN < 5 // falselet result2 = NaN >= 5 // false

相等操作符

判断两个变量是否相等是编程中最重要的操作之一

ECMAScript 提供了两组操作符。第一组是等于不等于,它们在比拟之前执行转换。第二组是全等不全等,它们,在比拟之前不执行转换。

1.等于和不等于

等于操作符用两个等于号(==)示意,如果操作数相等,则会返回 true

不等于操作符用叹号和等于号(!=)示意,如果两个操作数不相等,则会返回 true

操作数产生行为
任一操作数是布尔值将其转换为数值再比拟是否相等(false :0 true :1)
字符串+数值尝试将字符串转换为数值,再比拟是否相等
一个操作数是对象,另一个操作数不是调用对象的 valueOf()办法获得其原始值,再依据之前规定比拟
任一操作数是 NaN相等操作符返回 false,不相等操作符返回 true
两个操作数都是对象比拟它们是否指向同一个对象

补充:(1)NaN 不等于 NaN

(2)nullundefined 相等

(3)nullundefined 不能转换为其余类型的值再进行比拟

2.全等和不全等

全等和不全等操作符需在比拟数在不转换的前提下全等或不全等才返回 true
let result1 = '34' == 34 // true,转换后相等let result2 = '34' === 34 // false,不相等,因为数据类型不同let result1 = '23' != 23 // false,转换后相等let result2 = '23' !== 23 // true,不相等,因为数据类型不同let result1 = null == undefined // truelet result1 = null === undefined // false,不是雷同的数据类型

条件操作符

条件操作符是 ECMAScript 中用处最为宽泛的操作符之一
let min = num1 < num2 ? num1 : num2//如果 num1 小于 num2 ,则返回num1 ,否则返回num2

赋值操作符

简略赋值用等于号(=)示意,将右手边的值赋给左手边的变量
let num = 100

每个数学操作符以及其余一些操作符都有对应的复合赋值操作符

乘后除值*=
除后赋值/=
取模后赋值%=
加后赋值+=
减后赋值-=
左移后赋值<<=
右移后赋值\>>=
无符号右移后赋值\>>>=

逗号操作符

逗号操作符能够用来在一条语句中执行多个操作
let num0 = 1,  num1 = 2,  num2 = 3

运算程序

1.优先级

JavaScript 各种运算符的优先级别(Operator Precedence)是不一样的。优先级高的运算符先执行,优先级低的运算符后执行。
3 + 1 * 2 // 6

在上段代码中,乘法运算符( * )的优先级高于加法运算符( + ),所以先执行乘法,后执行加法。

这是一个很简略的优先级问题,但如果多个运算符混写在一起,经常会令人困惑。

var x = 1var array = []var y = array.length <= 0 || array[0] === undefined ? x : array[0]
优先级
小于等于(<=)
严格相等(===)
或(|| )
三元(?:)
等号(=)
//因而上述代码理论运算是这样的var y = array.length <= 0 || array[0] === undefined ? x : array[0]

注:记住所有运算符的优先级是没必要的,用到时查问就好。

2.左联合和右联合

对于优先级别雷同的运算符,大多数状况,计算程序总是从左到右,这叫做运算符的“左联合”(left-to-right associativity),即从右边开始计算。
a + b + c

像这种很简略就是先计算右边 ab 的和,再计算与 c 的和

但有一些运算符的计算程序是从右到左,即从左边开始计算,这叫做运算符的"右联合"。次要有赋值运算符(=)和三元条件运算符( ?:

h = x = y = zi = a ? b : c ? d : e ? f : g// <==等价于==>h = x = y = zi = a ? b : c ? d : e ? f : g

题目自测:

1: 上面代码输入什么 ?

;+true!'Lydia'
  • A: 1 and false
  • B: false and NaN
  • C: false and false

2: 上面代码输入什么 ?

function sum(a, b) {  return a + b}sum(1, '2')
  • A. NaN
  • B. TypeError
  • C. "12"
  • D. 3

3: 上面代码输入什么 ?

!!null!!''!!1
  • A. false true false
  • B. false false true
  • C. false true true
  • D. true true false

4: 上面代码输入什么 ?

console.log(3 + 4 + '5')
  • A. "345"
  • B. "75"
  • C. 12
  • D. "12"

题目解析

一、

Answer: A

+ 号运算符将 true 转换为 Number 类型 1

string 类型 Lydia 转化为 Boolean 值为 true ,而后面有 ,故返回 false

二、

Answer: C

+ 运算符碰到数值与字符串相加时,将数值转化为字符串,再拼接

三、

Answer: B

nullfalse. !null 返回 true. !true 返回 false.

"" true . !"" 返回 true. !true 返回 false.

1true. !1 返回 false. !false 返回 true.

四、

Answer: B

运算符关联性是编译器计算表达式的程序,从左到右或从右到左。只有当所有运算符具备雷同的优先级时,才会产生这种状况。咱们只有一种运算符:+。此外,关联性是从左到右的。

先运算 3+4。后果是数字 7。

7+“5”隐式转化为“75”。JavaScript 将数字 7 转换为字符串,咱们能够应用 + 运算符连贯两个字符串。