js表達式和語句趣味題講解與技術分享

技術分享

---

問題1

{ a: 1 } + 1
// ?

({ a: 1 }) + 1
// ?

1 + { a: 1 }
// ?

---

答案

{ a: 1 } + 1
// 1


({ a: 1 }) + 1
// "[object Object]1"


1 + { a: 1 }
// "1[object Object]"

---

問題2

{ 1 + 1 } + '2'
// ?

({ 1 + 1 }) + '2'
// ?

'2' + { 1 + 1 }
// ?

---

答案

{ 1 + 1 } + '2'
// 2 (number)


({ 1 + 1 }) + '2'
// Uncaught SyntaxError: ...


'2' + { 1 + 1 }
// Uncaught SyntaxError: ...

---

問題3

function foo () {
  console.log('foo expression run! index: 1')
}

var fooAlias = function foo(again) {
  console.log('named function run! index: 2')
  if (again) {
    foo()
  }
};

console.log(fooAlias.name); // ?
foo(true); // ?
fooAlias(true); // ?

---

答案

function foo () {
  console.log('foo expression run! index: 1')
}

var fooAlias = function foo(again) {
  console.log('named function run! index: 2')
  if (again) {
    foo()
  }
};

console.log(fooAlias.name); // chrome: foo , ie: undefined
foo(true); // foo expression run! index: 1
fooAlias(true); // named function run! index: 2
                // named function run! index: 2

---

表達式和語句

expression & statement

var a = 1 + 1; // 怎麼區分表達式和語句？

1 + 1          // 算術表達式，返回一個值，（非表達式語句的表達式沒有反作用）

var a;         // 聲明語句，引發變化,產生反作用，使某件事發生

a = 1          // 賦值表達式，表達式語句

---

表達式

1.原始表達式

3
false
this

2.初始化表達式

{a: 1} // 容易和block混淆
[2,3]

---

表達式

3.函數定義表達式

var f = function f() {} // 注意這裏有個等號，同時函數不是匿名的。

4.對象建立表達式

new Object()

---

表達式

5.屬性訪問表達式

obj.a

6.調用表達式

f()

7.表達式計算

eval() // 用來把參數字符串當源代碼執行，並計算出一個值

---

表達式

8.使用運算符的表達式
（算術/比較/邏輯/賦值…表達式）

1 + 1
1 < 3
true && false
a = 1
typeof a
delete obj.a
...

---

語句

使某件事發生？  
1.計算帶有反作用的表達式（表達式語句）  
2.聲明新變量/函數（聲明語句）  
3.改變語句的默認執行順序（條件控制，循環，跳轉語句，複合/塊語句）

a++                   // 計算帶有反作用的表達式
var a;                // 聲明新函數
function b() {}       // 聲明新函數, 重點，與函數定義表達式混淆
if ()  else ()        // 改變語句的默認執行順序
while ()              // 改變語句的默認執行順序
{...}                 // 複合/塊語句 重點！與對象字面量易混淆

---

---

回顧問題1

{ a: 1 } + 1 // 1

({ a: 1 }) + 1 // "[object Object]1"

1 + { a: 1 } // "1[object Object]"

---

回顧問題2

{ 1 + 1 } + '2' // 2 (number)

({ 1 + 1 }) + 1 // Uncaught SyntaxError: ...

'2' + { 1 + 1 } // Uncaught SyntaxError: ...

---

回顧問題3

function foo () {
  console.log('foo expression run! index: 1')
}

var fooAlias = function foo(again) {
  console.log('named function run! index: 2')
  if (again) {
    foo()
  }
};

console.log(fooAlias.name); // chrome: foo , ie: undefined
foo(true); // foo expression run! index: 1
fooAlias(true); // named function run! index: 2
                // named function run! index: 2

https://www.cnblogs.com/TomXu/archive/2011/12/29/2290308.html

---

更多:

[1,2].map(function a (item) {
  return item + 1
})
// a 未定義
// -------------------------------------

console.log(foo);
if (true) {
  function foo() { console.log('foo run') }
}
// ie function foo... 其餘 undefined
// ie會看成函數定義語句，其餘瀏覽器會提高foo變量，並將函數聲明放到if語句頂部執行。
// 函數聲明只能出如今所嵌套函數或全局做用域的頂部，不該該出如今其餘語句中。
// 不然出現兼容性問題。

---

當即執行函數表達式(IIFE – Immediately-invoked function expression)

// 先用表達式和語句的知識來理解一下當即執行函數
function a () {}     // 函數聲明語句

(function a () {})   // 括號用於改變運算順序，這是一個返回函數的表達式

(function a () {})() // 返回的函數當即執行，並返回執行結果

(function a () {}()) // 返回函數執行後結果
// 除了第一句，其餘幾句運行後，a都是undefined，ie8如下會給a定義並提高

• 最後兩種方式的區別：
  https://toni.so/2014/09/04/iifede-er-chong-gua-hao-xie-fa-de-bu-tong-dian/

---

括號開頭要當心

let f = (function () {}())
(function () {}())
// Uncaught TypeError: (intermediate value)(...) is not a function

let f = (function () {}());
(function () {}())

http://www.javashuo.com/article/p-rahlaujk-eb.html

---

思考

eval("{foo: 123}");     // 123

eval("({foo: 123})");   // { foo: 123 }

'use strict' // 語句仍是表達式

---

問題4

var a
(function a() {
  return function (p) {
    console.log(eval('if (true) { { 1 + 1 } + "5" + p }'))
  }
}(3))
  (function a() {
    console.log('4')
    return 4
  }())
console.log(a)

A 4                 9                 undefined

B 4                 9                 function a() {...}

C 8                 4                 function a() {...}

D 8                 4                 undefined

---

答案

var a
(function a() {
  return function (p) {
    console.log(eval('if (true) { { 1 + 1 } + "5" + p }'))
  }
}(3))
  (function a() {
    console.log('4')
    return 4
  }())
console.log(a)

// 執行結果 
// 現代bro A 4 9 undefined
// ie8如下 B 4 9 function a() { console.log('4'); return 4; }

---

思考

• 爲何要分爲表達式和語句？

• 函數式編程倡導的無反作用與表達式之間的關係在哪？

---

謝謝！