运算符和表达式

JavaScript 讲解方式——从小到大。

  • Atom
  • Expression
  • Statement
  • Structure
  • Program/Module

表达式

概要

  • 语法层面
    • 语法树跟运算符优先级的关系
    • 运算符左值和右值的区别
  • 运行时
    • 类型转换
    • 引用

语法树跟运算符优先级

举例:乘除比加减运算符的优先级要高,乘除会优先形成更小一级的语法结构,加减会形成更高级的语法结构。如果需要,可以使用 () 来提升加减运算符的优先级,因为 () 的优先级比乘除更高。

下面按照运算符优先级从高到低的顺序开始讲。

Member

  • a.b
  • a[b]
  • foo`string`
  • super.b
  • super['b']
  • new.target
  • new Foo()

New

  • new Foo

举例:

// 先计算 new a(),再用结果跟 () 配合使用
new a()()
// 现计算 new a(),在将结果跟前面的 new 使用
new new a()

运行时的设施

一个 Refrence 分两个部分:Object 和 Key(String 或者 Symbol)

  • delete
  • assign

Call Expression

  • foo()
  • super()
  • foo()['b']
  • foo().b (点运算符被 Call Expression 拉低了优先级)
  • foo()`abc`
// 先执行 new a(),在执行属性访问 ['b']
new a()['b']

左值和右值

// √
a.b = c
// ×
a + b = c

JS 中,一个表达式不是左值(能不能放在等号左边),那么一定是右值。

从下面一级开始,就都是 right hand expression 了,在 JS 里, left hand expression 几乎一定是 right hand expression,反之就不是的了

Update

  • a++
  • a--
  • --a
  • ++a

Unary

  • delete a.b
  • void foo()
  • typeof a
  • +a
  • -a
  • ~a
  • !a
  • await a

Exponental

JS 唯一右结合的运算符:**

3 ** 2 ** 3
// 等同于
3 ** (2 ** 3)

JS 大部分的运算符都是左结合的

乘法和加法

  • Multiplicative
    • *
    • /
    • %
  • Additive
    • +
    • -

移位

  • Shift
    • <<
    • >>
    • >>>

关系

  • Relationship
    • <
    • >
    • <=
    • >=
    • instanceof
    • in

相等比较

  • Equality
    • ==
    • !=
    • ===
    • !==

位运算

  • Bitwise
    • &
    • ^
    • |

逻辑(短路)

  • Logic
    • &&
    • ||

条件(短路)

  • Conditional
    • ? :

类型转换

重学前端
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。