深入js系列-语法

语法

语句和表达式

我们用英语的术语来说明它们的区别

“句子”（sentence）是完整表达某个意思的一组词，由一个或多个“短语”（phrase）组成，它们之间由标点符号或连接词（and 和or 等）连接起来。短语可以由更小的短语组成。有些短语是不完整的，不能独立表达意思；有些短语则相对完整，并且能够独立表达某个意思。这些规则就是英语的语法。

JavaScript 的语法也是如此。语句相当于句子，表达式相当于短语，运算符则相当于标点

符号和连接词。

语句的结果值

获得结果值最直接的方法是在浏览器开发控制台中输入语句，默认情况下控制台会显示所执行的最后一条语句的结果值。

操作

这里var规范规定返回值未undefined

之所以关注表达式，我们希望可以将语句当成表达式来处理，从而不需要将语句封装到函数再用return返回值，我们怎么在代码环境中获取表达式的返回值呢

var b;
if (true) {
  b = 4 + 38;
}
// 控制台和REPL中会输出42

代码块的结果就类似隐式返回，但是我们无法直接显式获取，比如这样

var a, b;
a = if (true) {
  b = 4 + 38;
};

我们可以用eval(),虽然不是个好方法，但是确实管用

var a, b;
a = eval( "if (true) { b = 4 + 38; }" );
a; // 42

目前ES7有规范，目前暂未实现

var a, b;
a = do {
  if (true) {
    b = 4 + 38;
  }
};
a; // 42

上下文规则

1.大括号

// 对象常量
var a = {
  foo: bar()
}

// 标签 在很多语言中goto语法被设计成break 和 continue 结合标签进行类似goto的操作
{
  foo: bar()
}

2.代码块 左边的{}会被解析为代码块

[] + {}; // "[object Object]"
{} + []; // 0

3.对象解构

function getData() {
// ..
return {
  a: 42,
  b: "foo"
  };
}
var { a, b } = getData();
console.log( a, b ); // 42 "foo"

自动分号(ASI)

只在换行符处添加

ASI的陷阱

function foo(a) {
  return a * 2
    + 3 / 12
}

// 等同于
function foo(a) {
  return a * 2;
    + 3 / 12
}

// 解决方案
function foo(a) {
  return a * 2
    + 3 / 12;
}

function foo(a) {
  return (a * 2
    + 3 / 12);
}

return 返回值跨行时，需要用()包起来,或者最后一行加上;

完全依赖ASI进行编码，会出现一些意料之外的陷阱

let d
let a = {
  c: 3
}
({c:d} = a)

这里只为了解构a中的c，d变量已经被声明，我们不能按照常规的解构赋值，{ c:d } = a 可以将a中的c解构给d，但是这是不合法的语法，{ c:d } 被认为是代码块，= a被认为是非法的，必须使用()来考虑js引擎这是一个语句，然而这会报错，因为{}()被认为是运行前面的对象

处理这些陷阱的办法，就是依赖ASI编码时，在() []前面加一个分号来隔断

let d
let a = {
  c: 3
}
;({c:d} = a)