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）。等到初始化結束，這個作用域就會消失。這種語法行為，在不設置參數默認值時，是不會出現的。
)
