1. 数组的结构赋值
1.1 原理:
1.1.1 模式(结构)匹配
1.1.2 索引值相同的完成匹配,不取的逗号跳过
const [a,[,,b],c] = [1,[2,4,5],3];
console.log(a,b,c); // 1 5 3
const [m] = [1,[2,4,5],3];
console.log(m) // 1
const [,n] = [1,[2,4,5],3];
console.log(n) // [2,3,4]
1.2 数组解构赋值的默认值:
1.2.1 生效条件:只有当一个成员 ===unefined的时候,对应的默认值才会生效
1.2.2 默认值是表达式 —— 惰性求值
// 默认值非表达式
const [a=1,b=2] = [];
console.log(a,b) // 1 2
const [x=1,y=2] = [4];
console.log(x,y) // 4 2
// 默认值为表达式 —— 惰性取值
const func = () => {
console.log('我是默认值')
}
const [m = func()] = [111];
console.log(m) // 111
const [m = func()] = [];
console.log(m) // 我是默认值
1.3 数组解构赋值 —— 实际应用
1.3.1 arguments\Nodelist
1.3.2 函数参数的解构赋值
1.3.3 交换变量的值
// arguments\Nodelist
const [a,b] = auguments;
const[p1,p2,p3] = document.querySelectorAll('p')
// 函数参数的解构赋值
const array = [1,1];
const add = [(x,y)] =>x=y;
console.log(add(array));
// 交换变量的值
let x = 1;
let y =2;
[x,y] = [y,x];
console.log(x,y);
2. 对象解构赋值的原理
2.1 原理:
2.1.1 模式(结构)匹配
2.1.2 属性名相同的完成赋值
const person = { name:'Alex', age:18 };
const { age, name } = person
console.log(age, name) // 18 Alex
// 可以取别名
const person = { name:'Alex', age:18 };
const { age: userage , name: username} = person
console.log(userage ,username) // 18 Alex
2.2 对象解构赋值的注意事项:
2.2.1 对象解构赋值的默认值 —— 和数组类似(===unefined的时候生效,惰性求值)
2.2.2 将一个已经声明的变量用于解构赋值 —— 整个赋值需要在括号内完成
2.2.3 可以取到继承属性(包括方法)
// 将一个已经声明的变量用于解构赋值
let x =2;
{ x } = { x: 1111 }
console.log(x) // identifier 'x' has already been declared
// 整个赋值需要在括号内完成
let y =2;
({ y } = { y: 111 })
console.log(y) // 111
// 取得继承属性(包括方法)
const { toString } = {}
console.log(toString) // toString是继承来的方法
2.3 复杂的嵌套
2.3.1 字符串的解构赋值
const [a,b,,c] = 'hello';
console.log(a, b, c); // h e o
const {0:a, 1:b, length} = 'hello';
console.log(a, b, length); // h e 5
2.3.2 数值和布尔值的解构赋值(只有使用对象的形式进行结构,即先将=右边的转为对象)
new Number(123);
const { a=1, toString } = 123;
new Boolean(true);
const{ b=2, toString } = true;
2.4 undefined\null 不能转换为对象 ,不能解构赋值,会报错
3. 解构赋值常见的应用场景
3.1 交换变量的值
3.2 从函数中返回多个值
3.3 函数参数的定义
3.4 指定函数参数的默认值
3.5 遍历map结构
3.6 提取JSON数据 —— json数据一般是数组或对象
3.7 加载模块
// 3.1 交换变量的值
let x = 1;
let y =2;
[x,y] = [y,x];
console.log(x,y);
// 3.2 从函数中返回多个值
// 返回一个数组
const returnArr = () => {
return [1,2,3]
}
const [a,b,c] = returnArr()
console.log(a,b,c) //1 2 3
// 返回一个对象
const returnObj = () => {
return { aa:11, bb:22, cc:33 }
}
const {aa, bb, cc} = returnObj()
console.log(aa, bb, cc) // 11 22 33
// 3.3 函数参数的定义
// 参数是一组有次序的值
function fun([x,y,z]) = {
console.log(x,y,z)
}
fun([10,20,30]) // 10 20 30
// 参数是一组无次序的值
function func({
x,
y,
z
}) = {
console.log(x,y,z)
}
func({ z: 10, x: 20, y: 30 }) // 20 30 10
// 3.4 指定函数参数的默认值
function foo({m,n=2}) {
console.log(m,n)
}
foo({}) //undefined 5
foo({m:1}) //1 2
foo({m:20, n:80}) //20 80
// 3.5 遍历map结构 —— [key, value]
var map = new Map()
map.set('Mike', '18')
map.set('Nancy', '20')
for(let [key, value] of map){
console.log(`${key}今年${value}岁`)
}
// 3.6 提取JSON数据
var jsonData = {
"name": "小慕",
"age": "18",
"data": [1, 2, 3, 4],
"status": "OK"
}
let {
name,
age,
data,
status
} = jsonData
console.log(name, age, data, status);
// 3.7 加载模块
import { x, y } from 'xxx'
import { reactive, ref } from 'vue'