6.解构赋值

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'