重学前端

4.操作符

2019-04-25  本文已影响0人  ChangLau

一元操作符

递增递减操作符

前置型操作符

var num1 = 2
var num2 = 20
// 先执行减法操作,在运算
var num3 = --num1 + num2 // 21
var num4 = num1 + num2 // 21

后置型操作符

var num1 = 2
var num2 = 20
// 先运算,在执行减法操作
var num3 = num1-- + num2 // 22
var num4 = num1 + num2 // 21

递增递减操作符适用于字符串、布尔、浮点、null、undefined 和对象

// 所有的非数值的值,先调用Number()方法转化为数值再进行计算
var str = "2",
  str2 = "z",
  flag = false,
  obj = { a: 1 },
  n = null,
  u = undefined;
--str // 1
--str2 // NaN
--flag // -1
--obj // NaN
--n // -1
--u // NaN

一元加减运算符

var num = 1
num = -num // -1

应用于非数值

// 所有的非数值的值,先调用Number()方法转化为数值再进行计算
var s1 = "01",
    s2 = "1.1",
    s3 = "z",
    b = false,
    f = 1.1,
    o = {
        valueOf: function () {
            return -1
        }
    }
s1 = -s1 // -1
s2 = -s2 // -1.1
s3 = -s3 // NaN
b = -b // 0
f = -f // -1.1
o = -o // 1

布尔操作符

逻辑非

首先将操作数转化为布尔类型,然后对其求反

!0 // true
!123 // false
!null // true
!undefined // true
!"" // true
!"str" // false
!true // false
!false // true
!NaN // true

同时使用两个逻辑非操作符,能够模拟 Boolean()转型函数的行为

!!"" // false
!!"123" // true
!!NaN // false
!!0 // false
!!12345 // true
逻辑与

应用于布尔值

第一个操作数 第二个操作数 结果
true true true
true false false
false true false
fasle false false

应用于任何类型的值。

"" && "123" // ""
"1" && "123" // "123"

逻辑与属于短路操作符,只要第一个值为 false,就不会计算后面的值

"" && aaa // ""
"123" &&  aaa // Error : aaa is not undefined
逻辑或

应用于布尔值

第一个操作数 第二个操作数 结果
true true true
true false true
false true true
fasle false false

应用于其他类型的值

"" || "123" // "123"
"123" || "345" // "123"

逻辑或属于短路运算符,只要第一个值为 true,就不会计算后面的值

"1" || aaa // "1"
"" || aaa // Error : aaa is not undefined

可以利用逻辑与的短路行为为函数参数设置默认值

function defaultValue(param){
  param = param || 0
  return param
}
defaultValue() // 0
defaultValue(1) // 1

乘性操作符

乘法
var res = 12 * 2 // 24

如果参与的操作符非数值,则先调用 Number()运算符转化为数值再进行计算

除法
var res = 4 / 2 // 2

如果参与的操作符非数值,则先调用 Number()运算符转化为数值再进行计算

求模(余数)
var res = 26 % 5 // 1

如果参与的操作符非数值,则先调用 Number()运算符转化为数值再进行计算

加性操作符

加法
1 + 2 // 3

如果其中一个操作符为字符串,则将另一个操作符转为字符串拼接起来

1 + 'abc' // '1abc'
1 + '' // '1'
var num1 = 5, num2 = 10;
// Error
var message = "The sum of 5 and 10 is " + num1 + num2 // "The sum of 5 and 10 is 510"
// True
var message = "The sum of 5 and 10 is " + (num1 + num2) // "The sum of 5 and 10 is 15"
减法
2 - 1 // 1

如果操作数非 Number 类型,则先调用 Number()函数将操作数转化为数值再进行计算

5 - 'abc' // NaN
5 - '1' // 4
5 - '' // 5
5 - true // 4
5 - null // 5
5 - undefined // NaN

关系操作符

>、<、>=、<=

5 < 3 // false
5 > 3 // true
"23" < "3" // true 两个都是字符串,比较的是两个字符串对应的字符编码值
"23" < 3 // false 一个是数值,另一个操作符转化为数值进行比较

// "a"转化为NaN,任何操作数与NaN比较都返回false
"a" < 3 // false
NaN < 3 // false
NaN >= 3 // false

相等操作符

相等和不不相等

== 和 !=(先转化在比较

先转化操作数为 Number 类型,然后进行比较

null == undefined // true
"NaN" == NaN // false
5 == NaN // false
NaN == NaN // false
false == 0 // true
true == 1 // true
true == 2 // false
undefined == 0 // false
null == 0 // false
"5" == 5 // true
全等和不全等

=== 和 !==(比较的时候不转化,直接比较

"5" == 5 // true
"5" === 5 // false
"5" != 5 // false
"5" !== 5 // true
null == undefined // true
null === undefined // false

条件操作符

三目运算符,如果表达式值为 true,则返回 ? 号后的值,否则返回 : 后的值

// 返回最大值
var max = num1 > num2 ? num1 : num2

赋值运算符

var num = 10
num = num + 10

复合赋值操作(只是写法上的简洁,不带来任何性能优化)

var num = 10
num += 10 // 跟 num = num + 10相同

主要复合赋值操作符

逗号操作符

用来声明多个变量

var str = "2",
  str2 = "z",
  flag = false,
  obj = { a: 1 };
上一篇下一篇

猜你喜欢

热点阅读