ES-4 解構(gòu)賦值、函數(shù)默認值、數(shù)組解構(gòu)、對象解構(gòu)
ES-5 隱式轉(zhuǎn)換、函數(shù)參數(shù)解構(gòu)、解構(gòu)本質(zhì)、()用法

一 解構(gòu)賦值

1 虛值

• 含義：在Boolean轉(zhuǎn)換結(jié)果為假的值falsy

2 函數(shù)默認值

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

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

以上計算，更人性化的寫法應(yīng)當(dāng)是將null也轉(zhuǎn)為0

// es6寫法 能計算正確結(jié)果 function foo(x = 1, y = 2) {console.log(x + y) } // 轉(zhuǎn)譯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的時候，涉及到隱式類型轉(zhuǎn)化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循環(huán)的父子級作用域搞混了，函數(shù)形參和函數(shù)體屬于同一作用域。

• 現(xiàn)象

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

• 在項目中的應(yīng)用
  

3 數(shù)組解構(gòu)

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

let [a = 6] = [1] console.log(a) // 1 let [a = 6] = [] console.log(a) // 6 // 解構(gòu)失敗，模式不匹配 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 對象解構(gòu)

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

• 解構(gòu)語句的語法報錯：認為等號左邊是語法塊
  

• 加()變成表達式
  
  

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

[(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. 解構(gòu)本質(zhì)

事實上，只要某種數(shù)據(jù)結(jié)構(gòu)具有 Iterator 接口，都可以采用數(shù)組形式的解構(gòu)賦值。

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

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 解構(gòu)的隱式轉(zhuǎn)換

• 字符串隱式轉(zhuǎn)換類數(shù)組

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

• 數(shù)字類型/布爾值隱式轉(zhuǎn)換為包裝類
  

解構(gòu)賦值的規(guī)則是，只要等號右邊的值不是對象或數(shù)組，就先將其轉(zhuǎn)為對象。由于undefined和null無法轉(zhuǎn)為對象，所以對它們進行解構(gòu)賦值，都會報錯。

7. 對函數(shù)length屬性的影響

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

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

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

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

• 形參實參的映射關(guān)系不再成立

8. 函數(shù)默認值與作用域

相當(dāng)復(fù)雜的一系列例子

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。