let 和 const 命令、变量的解构赋值

目录

let 和 const 命令

1、let 命令

2、const 命令

变量的解构赋值

1、数组的解构

2、对象的解构

3、字符串的解构赋值

4、用途

1、交换变量

2、提取 JSON 数据

3、按需加载

---

let 和 const 命令

1、let 命令

块级作用域。

{
  var b = 2;
  let a = 1;
}

console.log(b); // 2
console.log(a); // ReferenceError: a is not defined

不具备变量提升。

console.log(a); // undefined
var a = 1;

console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 1;

暂时性死区（temporal dead zone，简称 TDZ）。

// TDZ 开始
a = 1;
console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a; // TDZ结束
console.log(a); // undefined

2、const 命令

const 用来声明一个常量，一旦声明不能修改，并且必须立即初始化。

const A; // SyntaxError: Missing initializer in const declaration

const A = 1;
A = 2; // TypeError: Assignment to constant variable.

const 作用域和 let 相同：只在声明所在的块级作用域内有效。

let 和 const 都不可重复声明。

---

变量的解构赋值

解构赋值是对赋值运算符的扩展。

1、数组的解构

基本用法

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

可嵌套

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

可忽略

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

解构默认值

// 默认值
let [a = 1] = [];
console.log(a); // 1

剩余运算符

// 剩余运算符
let [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

2、对象的解构

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

基本用法

// 基本用法
let { a, b, c } = { a: "a", b: "b" };
console.log(a); // a
console.log(b); // b
console.log(c); // undefined

可嵌套

// 可嵌套可忽略
let obj = { a: "a", b: [{ c: "c" }] };
let {
  a,
  b: [{ c }],
} = obj;
console.log(a); // a
console.log(c); // c

可忽略

// 可忽略
let obj = { a: ["b", { c: "c" }] };
let {
  a: [b, {}],
} = obj;
console.log(b); // b

解构默认值

// 解构默认值
let obj = {};
let { a = 1, b = a } = {};
console.log(a); // 1
console.log(b); // 1

剩余运算符

// 剩余运算符
let obj = { a: "a", b: "b", c: "c" };
let { a, ...b } = obj;
console.log(a); // a
console.log(b); // {b: 'b', c: 'c'}

3、字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

let [a, b, c, d, e] = 'hello';
console.log(a); // h
console.log(b); // e
console.log(c); // l
console.log(d); // l
console.log(e); // o

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let { length: len } = "hello";
console.log(len); // 5

4、用途

变量的解构赋值用途很多，列举几个。

1、交换变量

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

2、提取 JSON 数据

// 提取 JSON 数据
let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309],
};
let { id, status, data: number } = jsonData;
console.log(id); // 42
console.log(status); // OK
console.log(number); // [867, 5309]

3、按需加载

// 按需加载
import { ref } from "vue";