数组的解构赋值
解构匹配，索引值相同
<script>
let a =[11,122,33];
const [ b,c,d ]=[11,122,33];
console.log(b,c,d);
</script>默认值的基本用法
右边没有需要被解构的值，那么左边的值仍是原来默认的值
// 默认值的基本用法
const [a=1,b=2]=[];
console.log(a,b)//1,2默认值生效的条件
当需要解构的值未undefined的时候
// 默认值生效的条件，其中一个是是Undefined
// 默认值失效
const [a=1,b=2]=[3,4];
console.log(a,b)//3,4
// 默认值失效
const [a=1,b=2]=[3,null];
console.log(a,b)//3 null
// 默认值生效
const [a=1,b=2]=[3];
console.log(a,b)//3 2当需要解构的值存在的时候，原来的值中如果有函数可以不执行，但是如果需要结构的值不存在，那么原来的值中的函数会执行。
// 当需要解构的值是函数的时候
const fun=()=>{
console.log("执行");
return 2;
};
const [x=fun()]=[];
console.log(x);常见的数组类解构
arguments和数组解构的应用
<script>
// arguments
function fun(){
console.log(arguments)
// arguments是类数组，不具备数组的方法
console.log(arguments.push);//undefined
// arguments的输入也可以解构
const [a,b]=arguments;
console.log(a,b);//1,2
}
// fun();//Arguments(0)
fun(1,2);//Arguments(2)0: 1,1: 2
var b =[11,22];
console.log(b.push)//ƒ push() { [native code] }
</script>DOM节点 document.querySelectorAll
<p>123</p>
<p>32645</p>
<p>456</p>
<script>
const op= document.querySelectorAll("p");
// console.log(op);//NodeList(3) [p, p, p]
const [p1,p2,p3]=op;
console.log(p1,p2,p3);//<p>123</p> <p>32645</p> <p>456</p>
</script>数组解构作为函数的参数
<script>
const sum = ([x,y])=>x+y;
console.log(sum([1,1])) ;//2
</script>两个变量交换值
<script>
let a=1;
let b=2;
[a,b]=[b,a];
console.log(a,b);//2,1
</script>对象的解构赋值
<script>
// 是根据属性名作为桥梁，但是赋值给的是属性名的变量
// v:k,属性名：属性值
// const {name,age} = {name:"xiaoming",age:18}
// console.log(name,age);//xiaoming 18
// 完整的对象解构
// const {name:name,age:age} = {name:"xiaoming",age:18}
// console.log(name,age);//xiaoming 18
// 可以改变变量的属性值的变量名称
const {name:name1,age:age1} = {name:"xiaoming",age:18}
console.log(name1,age1);//xiaoming 18
</script>
对象解构赋值的注意事项
对象解构赋值的默认值
// 对象解构的变量没有数组的时候，对应的变量为默认值
const {name="xiaohong",age=0} = {name:"xiaoming"};
console.log(name,age);//xiaoming 0对象解构赋值的惰性赋值
变量let在对象解构赋值前已经变量声明，需要整体添加（）
因为如果直接写{age}会被人为代码块
常量的话，是直接重新赋值，错误。
// 一个已经声明的变量let,不管是否立即赋值，在对象解构赋值的时候，前面不要再声明，同时用圆括号整体框住
let age=13;
({age}={age:12});
console.log(age);
可以获得继承的属性？
应用
对象的解构赋值作为函数的参数
<script>
// 不使用对象解构赋值的方法,参数是对象，函数体内需要打点调用
const user=(a)=>{
console.log(a.name,a.age)
}
user({name:"xiaoming",age:12});
//使用解构赋值，形参和实参对应，函数体不需要打点调用
const a=({name,age})=>{
console.log(name,age)
}
a({name:"xiaoming",age:12});
</script>嵌套
<script>
const a={
name:"xiaoming",
age :[12,13],
friend:{
name:"xiaohong",
age:14
}
}
const {name,age,friend}=a;
console.log(name,age ,friend);
// 获得小明的年龄
const {age:[xiaoming_age]}=a;
console.log(xiaoming_age);
// 获得小红的年龄
const{friend:{age:xiaohong_age}}=a;
console.log(xiaohong_age);
</script>字符串的解构赋值
可以通过数组或者对象的方式解构赋值。
<script>
const [a,b]="hello";
// console.log(a,b);//h e
const {0:c}="world";
console.log(c);//w
</script>
