第三讲 变量的解构赋值
上节课我们讲解了变量和常量，这节课来学习一下变量的解构赋值。
那么为什么要学习解构赋值呢？
3.1 为什么使用解构赋值
为了更加简化变量的赋值方式。
旧式参考代码如下
//1.赋值a ,b,c
// let a=250;
// let b=666;
// let c=888;
// console.log(a,b,c);
//简化一下;
/* 提升2
let arr=[250,666,999];
console.log(arr[0],arr[1],arr[2]);
//数组名[下标],我还想使用a,b,c
let a=arr[0];
let b=arr[1];
let c=arr[2];
console.log(a,b,c);*/
//贴麻烦
3.2 数组的解构赋值
概念：
按照一定模式，从数组和对象中提取值，对变量进行赋值。
特征：
使用了解构赋值后的代码：
//解构赋值，非常简单的方式;
let [a,b,c]=[251,666,999];
console.log(a,b,c);
//特征：1.左右结构必须一致;
//2.右边必须有值;
//3.声明和赋值不能分开，必须在一起（在一起）；
//深入讲解.3.1 解构不成功的情况 3.2不完全解构
//3.1解构不成功
// let [mytt]=[];
// console.log(mytt); //不成功，显示undefined
let [you,mytt]=["咪咪"]; //左边 2个变量，右边1
console.log(you,mytt); //mytt解构不成功，仍然显示undefined
//3.2 不完全解构;
let [x,y]=[111,222,989];
console.log(x,y); //989没有显示，不完全解构，左边只匹配右边数组的一部分，解构可以成功滴。
特征：
- 左右结构必须一致
- 右边必须有值
- 声明和赋值不能分开（在一起）
3.3 字符串的解构赋值
//1.常量
const [x,y,z]="HOP";
console.log(x,y,z);
//字符串当成了一个字符数组，进行解构赋值;
3.4 对象的解构赋值
参考代码：
//对象:json
//{}格式;
const cai={
name:"蔡徐坤",
age:'18',
gender:'未知',
hobby:function () {
console.log('我爱打篮球');
}
};
//假设
let name="张老师";
//对这个cai对象进行解构赋值;
//name:n(别名),严格一点也叫属性,对象的内部机制，先找到同名属性，然后再赋值给对应的变量.
let {name:n,age,gender,hobby}=cai;
//输出
console.log(n,age,gender,hobby);
//调用方法
hobby();
3.5 复杂的解构赋值
补充知识点
默认值
//1.补充
//y=10,就是数组解构赋值的时候，一个默认值;
// let [x,y=10]=[22]; //左2，右1
// console.log(x,y);
// //对象也可以使用默认值
// let {host='tea.com',port}={port:8088};
// console.log(host,port);
复杂的解构赋值:可以将我们讲解的数组、字符串、对象综合起来，进行解构赋值,必须遵循解构赋值的三个特征;
let [one,two,three]=[[2,3,4],{name:'蔡徐坤',age:18},'hello'];
console.log(one);
console.log(two);
console.log(three);
console.log("-------------")
//对立面进行具体的赋值
let [[a,b,c],{name,age},three2]=[[2,3,4],{name:'蔡徐坤',age:18},'hello'];
console.log(a,b,c);
console.log(name,age);
console.log(three2);
3.5 用途
//1.交换变量的值
let [a,b]=[250,666];
//交换a b的值
[a,b]=[b,a];
console.log(a,b);
//简洁、易读性强、语义格式清晰;
//2.从函数返回值,一般都是单个值；如果要返回多个值的时候，必须将值放在数组、集合、对象中;
//有了解构赋值之后，看一下
function getArr() {
return [4,9,16];
}
let [x,y,z]=getArr();
console.log(x,y,z);
//同样返回一个对象也一样;
function getHost() {
return {
hostname:'ZTE',
port:8088
}
};
let {hostname,port}=getHost();
console.log(hostname,port);
//3.可以导入模块的指定方法
// import {add,edit} from 'comm.js';
