深刻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)