暂时性死区、解构赋值

暂时性死区（Temporal Dead Zone）指的是在块级作用域内，使用 let 或 const 声明的变量在声明之前无法访问。如果尝试在声明之前引用该变量，会导致引用错误。

var x = 1;
{
  let x = x;
  // 在赋值前引用会报错
  console.log(x); // Uncaught ReferenceError: Cannot access 'x' before initialization
}

函数参数默认值

函数参数默认值允许在函数调用时，如果参数未传递或为 undefined，则使用预设的默认值。

ES5 中的实现

在 ES5 中，可以通过逻辑运算符或 typeof 检查参数是否为 undefined 来设置默认值。

function foo(x, y) {
  var x = typeof arguments[0] !== 'undefined' ? arguments[0] : 1;
  var y = typeof arguments[1] !== 'undefined' ? arguments[1] : 2;

  console.log(x + y);
}
foo(); // 3
foo(5, 6); // 11
foo(5); // 7
foo(null, 6); // 6
foo(0, 5); // 5

ES6 中的默认参数

ES6 引入了更简洁的默认参数语法，使代码更加易读和维护。

function foo(x = 1, y = 2) {
  console.log(x + y);
}
foo(); // 3
foo(5, 6); // 11
foo(5); // 7
foo(null, 6); // 6
foo(0, 5); // 5

函数形参与内部变量

函数形参与函数内部变量存在作用域关系，不能在内部重新声明同名变量。

function test(x = 1) {
  let x = 2;
  console.log(x); // Uncaught SyntaxError: Identifier 'x' has already been declared
}
test();

形参可以访问到外层作用域的变量。

let x = 1;

function test(y = x) {
  let x = 2;
  console.log(y); // 1
}
test();

特殊情况下，如果形参与内部变量同名，会导致冲突。

function test(x = 2) {
  let x = 2;
  console.log(x);
}
test();

暂时性死区示例：

let x = 1;
function test(x = x) {
  console.log(x); // Uncaught ReferenceError: Cannot access 'x' before initialization
}
test();

惰性求值

默认参数表达式在每次函数调用时都会重新计算。

let a = 99;

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

解构赋值

解构赋值通过模式匹配的方式从数组或对象中提取值，赋值给变量。

数组的解构赋值

简单的数组解构：

let [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3

多层级复杂的数组解构：

let [a, [b, [c, [e]], [f]]] = [1, [2, [3, [4]], [5]]];
console.log(a, b, c, e, f); // 1 2 3 4 5

解构失败

当解构的值不存在时，会使用 undefined 填充。

let [a, b, c] = [1, , 3];
console.log(a, b, c); // 1 undefined 3

当赋值的值多于变量时，多余的值会被忽略。

let [a, c] = [1, 2, 3];
console.log(a, c); // 1 2

解构的默认值

为解构变量设置默认值，可以避免 undefined。

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

只有当被解构的值为 undefined 时，默认值才会生效。

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

暂时性死区示例：

let [x = y, y = 1] = [];
console.log(x, y);
// Uncaught ReferenceError: Cannot access 'y' before initialization

对象的解构赋值

对象的解构赋值可以简化属性的提取和赋值。

简写属性和方法

ES6 中，对象属性和方法支持简写语法。

var name = 'zhang';
var age = '14';
var person = {
  name,
  age,
  sex: 'man',
  eat() {
    console.log(1);
  },
};
console.log(person);
person.eat();

属性名的动态拼接

可以通过计算属性名动态拼接对象属性。

let firstName = 'ai';
let secondName = 'xiaoye';
let name = 'ai xiao ye';
let person = {
  [firstName + secondName]: name,
};
console.log(person);

let firstName = 'ai';
let secondName = 'xiaoye';
let name = 'ai xiao ye';
let person = {
  [firstName + 'XY']: name,
};
console.log(person);

变量与属性名

解构赋值允许变量名与对象属性名不同。

let { a: a, b: b, c: c } = { a: 1, b: 2, c: 3 };
console.log(a, b, c); // 1 2 3

不完全解构

可以为部分变量设置默认值，解构顺序与属性顺序无关。

let { a = 2, b: b, c: c } = { c: 3, b: 2 };
console.log(a, b, c); // 2 2 3

通过解构提取值

解构赋值使得从复杂对象中提取值变得简便。

let a = [{ id: '2' }, { id: '23' }, { id: '12' }, { id: '45' }, { id: '8' }];
let [{ id: id1 }, { id: id2 }, { id: id3 }, { id: id4 }, { id: id5 }] = a;
console.log(id1, id2, id3, id4, id5); // 2 23 12 45 8

多层级对象的解构：

var person = {
  name: 'zhangshan',
  age: 50,
  son: {
    name: 'lisi',
    age: 30,
    son: {
      name: 'wangwu',
      age: 12,
    },
  },
};

let {
  son: { son: son2 },
} = person;
console.log(son2); // { name: 'wangwu', age: 12 }

---

以上内容涵盖了 ES6 中关于暂时性死区、函数参数默认值以及解构赋值的关键概念和实践示例，帮助理解和应用这些特性以编写更简洁和高效的 JavaScript 代码。