ES-4 解構賦值、函數默認值、數組解構、對象解構
ES-5 隱式轉換、函數參數解構、解構本質、()用法

一 解構賦值

1 虛值

• 含義：在Boolean轉換結果為假的值falsy

2 函數默認值

ES6 內部使用嚴格相等運算符（===），判斷一個位置是否有值。所以，只有當一個數組成員嚴格等于undefined，默認值才會生效。（默認值如果是函數，當非undefined的情況，函數不會執行，只有在用到的時候，才會求值。）

// es5寫法 function foo(x, y) {// x = x || 1;// y = y || 2;// 以上寫法，遇0出bug// 計算類型的，要取得正確結果，要考慮0的情況，應如下if (x !== 0) {x = x || 1;}if (y !== 0) {y = y || 1;}console.log(x + y); }

以上計算，更人性化的寫法應當是將null也轉為0

// es6寫法 能計算正確結果 function foo(x = 1, y = 2) {console.log(x + y) } // 轉譯es5 "use strict";function foo() {var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;console.log(x + y); } // null的時候，涉及到隱式類型轉化Number(null)為0 let x = 1; function foo(x = 2) {let x = 2; // 報錯// Identifier 'x' has already been declared.console.log(x) } foo() let x = 1; function foo(y = x) {console.log(y) // 1 } foo()

不要和for循環的父子級作用域搞混了，函數形參和函數體屬于同一作用域。

• 現象

function foo(x = x) {console.log(x) // 無實參時報錯，TDZ } foo() let x = 1; function foo(x = x) {console.log(x) // 無實參時報錯，2 } foo(2) // 不報錯！ function bar(x = 2, y = x) {return [x, y]; } bar(); // [2, 2]

注意

var w = 1, z = 2; function foo(x = w + 1, y = x + 1, z = z + 1) {// 報錯地方在z// Uncaught ReferenceError: Cannot access 'z' before initializationconsole.log(x, y, z) } foo()

• 形參默認值 - 惰性求值，不緩存，每次都重新計算

let a = 99; function foo(b = a + 1) {console.log(b) } foo() // 100 a = 100 foo() // 101

• 在項目中的應用
  

3 數組解構

• 模式匹配（結構化賦值）
• 解構失敗時，結果為undefined
• 不完全解構：提供的值比需要解構的變量多
• 變量給默認值+解構

let [a = 6] = [1] console.log(a) // 1 let [a = 6] = [] console.log(a) // 6 // 解構失敗，模式不匹配 let [a = 6] = {} // 報錯 // {} is not iterable console.log(a) let [a, b = 6] = [1, undefined] console.log(a, b) // 1 6 let [a, b = 6] = [1, null] console.log(a, b) // 1 null let [a = 1, b = a] = [] console.log(a, b) // 1 1 let [a = 1, b = a] = [2] console.log(a, b) // 2 2

4 對象解構

let firstName = 'Jessica'; let lastName = 'Jung'; let superIdol = {[firstName + lastName]: 'owner of e&b' } console.log(superIdol)

• 解構語句的語法報錯：認為等號左邊是語法塊
  

• 加()變成表達式
  
  

• 聲明變量時不要亂加括號

[(b)] = [3]; console.log(b); // 3 ({a:(b) = {}}) // 本身沒有進行匹配，而是默認值 console.log(b); // {}

• 變量值互換

let a = 1, b = 100; [a, b] = [b, a] console.log(a, b) // 100 1

5. 解構本質

事實上，只要某種數據結構具有 Iterator 接口，都可以采用數組形式的解構賦值。

• 變量的解構就是變量的賦值
• 模式匹配可以匹配同源屬性
  

var x = 200, y = 300, z = 100; var obj1 = {x: {y: 42},z: {y: z} }; ({ y: x = { y: y } } = obj1);// x = {y: y} → x = {y: 300} ({ z: y = { y: z } } = obj1);// y = {y: z} → y = {y: 100} ({ x: z = { y: x } } = obj1);// z = {y: 42}console.log(x.y, y.y, z.y) // 300 100 42 function test([x, y]) { // 報錯// Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))console.log(x, y) } test() function foo({ x = 10 } = {}, { y } = { y: 10 }) {console.log(x, y) } foo() // 10 10 foo({}, {}) // 10 undefined foo({x: 2}, {y: 3}) // 2 3

注意

({ x = 10 } = {}); // ({ x: x = 10 } = {}); 以上是屬性和變量相同時的es6寫法 ({ y } = { y: 10 }); // ({ y: y } = { y: 10 }); console.log(x, y); // 10 10

6 解構的隱式轉換

• 字符串隱式轉換類數組

const [a, b, c, d, e] = 'hello' console.log(a, b, c, d, e) // h e l l o let {length: len} = 'hello' console.log(len) // 5

• 數字類型/布爾值隱式轉換為包裝類
  

解構賦值的規則是，只要等號右邊的值不是對象或數組，就先將其轉為對象。由于undefined和null無法轉為對象，所以對它們進行解構賦值，都會報錯。

7. 對函數length屬性的影響

• 當函數形參給默認值時，從當前位置及之后都不計入length（形參個數）的計算
• 也就是說，指定了默認值后，length屬性將失真。
• 這是因為length屬性的含義是，該函數預期傳入的參數個數。某個參數指定默認值以后，預期傳入的參數個數就不包括這個參數了。同理，后文的 rest 參數也不會計入length屬性。

function test(a, b, c = 0) { } console.log(test.length) // 2

• 如果設置了默認值的參數不是尾參數，那么length屬性也不再計入后面的參數了。

function test(c = 0, a, b) { } console.log(test.length) // 0

• 形參實參的映射關系不再成立

8. 函數默認值與作用域

相當復雜的一系列例子

一旦設置了參數的默認值，函數進行聲明初始化時，參數會形成一個單獨的作用域（context）。等到初始化結束，這個作用域就會消失。這種語法行為，在不設置參數默認值時，是不會出現的。

總結

以上是生活随笔為你收集整理的ES6-4/5 解构赋值、函数默认值、数组解构、对象解构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。