💡 JavaScript语法定义了词法规则（运算符、关键字）是如何构成可运行的程序代码

参考英语语法

  • “句子”是完整表达某个意思的一组词，由一个或多个“短语”组成；
  • “短语”由标点符号或连接词连接起来；
  • “短语”可以由更小的“短语”组成；

  • 有的“短语”不完整，不能独立表达完整意思，有的短语完整，可以独立表达完整意思

    语句和表达式

  • 语句是表达完整意思的一组词，由一个或多个表达式构成，表达式由运算符连接起来

  • 表达式可以返回一个结果值
    1. var a = 1 + 1;  // 1 + 1 是表达式，返回2  var a = 1 + 1 是声明语句
    2. var b = a;  // a是表达式，返回2， var b = a 是声明语句
    3. b; // b是表达式，返回2 b 也是语句，可以叫做表达式语句（虽然没有什么意思）
    这三行代码都是包含表达式的语句

    语句的结果词

    📌 语句都有一个结果值（undefined也算），获得结果最直接的方法就是在浏览器开发控制台中输入语句，默认情况下就会显示执行最后一条语句的结果值 ```javascript var a = 1 // 这里返回的是 undefined

/*/

var a = 1; a // 这里返回的是1

  2. 📌 代码块｛...｝的结果值是其最后一个语句/表达式的结果
  3. ```javascript
  4. var a;
  5. if (true) {
  6.     a = 1 + 1
  7. }
  8. // 这里直接返回 2

a++ 与 ++a

  • a++/a--，运算符在后，先赋值，后自增/自减
  • ++a/--a，运算符在前，先自增/自减，后赋值 ```javascript var a = 1 var b = a++ // a先赋值给b,然后再自增1 a // 2 b // 1

/**/

var a = 1 var b = ++a // a先自增1，然后再赋值给b a // 2 b // 2

  1. 💡 逗号表达式 可以将多个表达式串联成一个语句
  3. ```javascript
  4. var a = 1;
  5. var b = (a++ , a)  // a 在 a++ 之后执行, 结果为 2 ，然后赋值给b (涉及运算符优先级)
  7. a;  // 2
  8. b;  // 2

上下文规则

在JavaScript语法规则中，有时候相同的语法在不同情况下有不同的解释

  • 大括号｛｝

    • 对象常量

      1. var a = {
      2. foo: bar()  // 这里假设 bar() 已经被定义过
      3. }
      4. // 这里将 {...} 赋值给 a,所以它是个对象常量

    • 标签

      1. {
      2. foo: bar()  // 这里假设 bar() 已经被定义过
      3. }
      4. // 这里 {...} 是一个普通的代码块

  • 代码块

    • 😂一个涉及强制隐式转换的坑 ```javascript [] + {} // “[object Object]” // {} 出现在 + 运算符表达式中，它被当做一个值（空对象）处理， // [] 强制转换为 “”, {} 强制转换为 “[object Object]”, “” + “[object Object]” 结果为 “[object Object]”

/**/ {} + [] // 0
// {} 被当做一个独立的空代码块（不执行任何操作），+ [] 将 [] 强制转换为 0

  2. - 对象解构
  4. - else if 和可选代码块
  5.    - 实际上js中没有else if 
  6. ```javascript
  7. // else if 实际上是这样
  8. if (a) {
  9.     //...
  10. } else {
  11.         if (b) {
  12.        // ...
  13.     } else {
  14.           // ...
  15.     }
  16. }

运算符优先级

image.png

优先级

参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

关联性 a OP b OP c

  1. // 左关联
  2. (a OP b) OP c
  4. // 右关联
  5. a OP (b OP c)

📢 关联性对执行顺序的影响只在运算符优先级相同的情况下生效

  1.  a && b || c ? c || b ? a : c && b : a   // 🤦‍♂️
  3. // 优先级 && 💨 || 💨 ? : 💨 =
  4. (a && b) || c ? c || b ? a : (c && b) : a     // &&
  6. ((a && b) || c) ? (c || b) ? a : (c && b) : a    // ||
  8. ((a && b) || c) ? ((c || b) ? a : (c && b)) : a   // ? :