[JS]表达式与操作符

表达式

表达式是一个可以被求值并产生一个值的JavaScript短语,常量、变量都是最简单的表达式,它们可以被求值和赋值(即产生新值)。基于简单表达式来构建复杂表达式的方式是使用操作符,操作符以某种方式组合两个及以上的简单表达式,列如:let result = x * y,x 与 y两个简单表达式被操作符*组合起来,形成的一个值为result。

主表达式

最简单的表达式称为主表达式,通常包括常量、变量等。

1.23 // 数值
"hello" // 字符串
true // 布尔值true
false // 布尔值false
null // null值
this // 当前对象
i // 变量i
sum // 变量sum

函数定义表达式

函数定义表达式定义JavaScript函数,其值为新定义的函数,函数定义表达式由function关键字、参数列表、函数代码块(函数体)构成。

let square = function(x, y) {
  // ......
  return x * y
}

属性访问表达式

属性访问表达式是求对象属性或数组元素的值,JS有两种方式访问属性的语法,一个是表达式后跟一个句点和一个标识符,另一个是表达式位于方括号的表达式。

let a = {x: 1, y: {z: 3}}
let b = [a, 4, [5, 6]]

// 第一种,句点
a.x // 1
a.y.z // 3

// 第二种,方括号
a[1] // 4
a[0].x // 1

条件式属性访问

当使用属性访问表达式时,如果.[]的左侧的表达式求值为null或undefined,会报TypeError。因此,使用?.?.[]语法防止这种错误发生。

let a = { b: null }
a.b?.c.d // undefined

let a = { b: undefined }
a.b?.c.d // undefined

let a = { b: {} }
a.b.c?.d // undefined

操作符

操作符用于算术表达式、比较表达式、逻辑表达式、赋值表达式等。多数的操作符都以+=这样的标点符号表示,但是也有一些以delete和instanceof关键字表示。关键字也是操作符,只是它的语法没有那么简短。

操作符操作的对象叫做操作数,比如 a + b = c 中,+操作符需要操作a和b两个操作数,并且+操作符操作数个数为2。

in操作符

in操作符期待左侧操作数是字符串、符号或可以转换为字符串的值,期待右侧操作数是对象。

let a = { x: 1, y: 1 }
‘x‘ in a // true,对象a存在属性名x
‘c‘ in a // false,对象a不存在属性名c

let b = [1, 2, 3]
‘2‘ in b // true,b数组有索引值2
‘3‘ in b // false,b数组没有索引值3

instanceof操作符

instanceof操作符期待左侧操作数是对象,右侧操作数是对象类的标识。简而言之,instanceof用于判断一个操作数是否为某个对象的实例。

let d = new Date()
d instanceof Date // true
d instanceof Object // true,所有对象都是Object的实例
d instanceof Array // false

typeof操作符

typeof操作符通常用于获取一个操作数的类型,它返回的结果为字符串,有"number"、"boolean"、"string"、"function"、"object"、"undefined"六种结果。

instanceof操作符是一个二元操作符,它需要有两个操作数才可以完成运算,而typeof是一元运算符,它仅需要一个操作数即可运算。

let b = 10
let a = "hello word!"
typeof b // number
typeof a // string

delete操作符

delete是一元操作符,删除对象属性或数组元素。

let a = { x: 1, y: 2 }
delete a.x
‘x‘ in a // false,对象a不存在属性名x

条件操作符

条件操作符又称为三元运算符,因为它有三个操作数,a ? b : c

let a = 10
let flag = false
a > 0 ? (flag = true) : (flag = false) // flag为true

如果第二和第三操作数相对复杂,可以在其首尾添加一堆括号。

三元操作符简化了if语句,上述代码可以写成:

if (a > 0) {
  flag = true
} else {
  flag = false
}

先定义(??)

先定义操作符??是一个二元操作符,只有在第一个操作数值为null或undefined时才会返回第二个操作数的值。

let a = null
a ?? 10 // 结果为10

因为a为null值,所以返回第二个操作数的值。所以先定义操作符类似于如下表达式:

let a = null
a === null ? 10 : null // 结果为10

?? 是对 || 的一个有用的代替,适合选择先定义的操作数,而不是第一个为真值的操作数。

let maxWidth = 0
let preference = {
    maxWidth: 120,
    title: "",
    visited: false
}

let max = maxWidth ?? preference.title ?? preference.visited ?? preference.maxWidth ?? 500 // 结果为0

若操作数的值为0、空字符串和false,而这些值在某些情况下是完全有效的,比如maxWidth是0所以就会被忽略。

let maxWidth = 0
let preference = {
    maxWidth: 120,
    title: "",
    visited: false
}

let max = maxWidth || preference.title || preference.visited || preference.maxWidth || 500 // 结果为120

若操作符改为 ?? ,那么对于该表达式来说,0也会成为有效值,所以max为0。

[JS]表达式与操作符

上一篇:C++:不同循环结构计算从1到100的累加和


下一篇:Apache Superset 1.2.0教程 (二)——快速入门(可视化王者英雄数据)