第三讲 变量的解构赋值
本章是ES6的新的知识点，值得学习哦^.^
3.1 为什么使用解构赋值
体验之前的代码变量方式
//1.旧社会如何使用变量;
//赋值方式
// let a=250;
// let b=666;
// let c=888;
// console.log(a,b,c);
//提升一下,变量比较多，数组;
let arr=[251,667,889];
console.log(arr[0],arr[1],arr[2]);
//不想输入arr，a,b,c
let a=arr[0],b=arr[1],c=arr[2];
console.log(a,b,c);
//就可以使用我们今天要讲的技术点，解构赋值;
3.2 数组的解构赋值
解构赋值的概念：
按照一定的模式，从数组和对象中提取值，对变量进行赋值。
let [a,b,c]=[252,668,890];
console.log(a,b,c);
注意事项：
- 左右结构必须一致
- 右边必须有值
- 声明和赋值必须在一起（在一起）
//解构赋值的两种情况
//解构不成功
let [mytt]=[];
console.log(mytt); //undefined
//不完全解构
let [x,y,z]=[22,33,44,55,66];
console.log(x,y,z);
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';