1、数组的解构赋值:
<script> // 1、这样会依次把10赋值给x,20赋值给y,z不够则是未定义的,超过的话不影响 let [x, y, z] = [10, 20]; console.log(x); console.log(y); console.log(z); //2、数组解构默认值,这样的话如果有值,则x2=10根本不会被执行, // 只有当后面解构出来对应的值无对应值得时候才会走默认值 let [x1, x2 = 10] = [1,] console.log(x1, x2); //3、这样的话10,20将解构出来的值无对应信息,只有m=30 let [, , m] = [10, 20, 30]; console.log(m); //4、不定参数赋值 //这样会把1赋值给y1,2赋值给y2,后面的全部解析成一个数组赋值给y3 let [y1, y2, ...y3] = [1,2,3,4,5,6,7,8,9] console.log(y1, y2, y3);
</script>
2、对象的解构赋值:
<script> //1、如果变量名和属性名一样,可以直接省略写法,不一样的时候不可省略 // let {name=name,age=age} = {name:'test',age:18} // let {name,age} = {name:'test',age:18}//上面这样可以省略成这样情况 // let {name,age} = {name123:'test',age:18}//这样会导致name没有定义 //2、不同名时候 //赋值属性在冒号左,变量名在右,并且解构赋值时,只是更新了默认值,不能覆盖对象原有的属性值。 //这样相当于name赋值给name1这样变量,age赋值给age1这个变量 // let {name:name1,age:age1} = {name:'test',age:18}//这样会导致name没有定义 // console.log(name1);//text // console.log(age1);//18 //3、赋默认值的时候 // let {name:name, age=20} = {name:'测试',age:10} // console.log(name, age);//测试 10 // let {name:name, age=20} = {name:'测试'} // console.log(name, age);//测试 20 // let {name:name, age=20, sex} = {name:'测试',age:undefined} // console.log(name, age, sex);//测试 20 undefined // let {name:name2='这是测试', age:age2=20, sex:sex2='男'} = {age:18} // console.log(name2, age2, sex2);//这是测试 10 男 //4、嵌套赋值 // let {name,age,list:[x,y,...z]} = {name:'wzx',age:20,list:[10,20,30,40,50]} // console.log(name, age, x,y,z); // let {age:age2,list:[...z]} = {name:'wzx',age:20,list:[10,20,30,40,50]} // console.log(age2, z); let user = { name: 'jenny', id: 18, desc: { pos: { lng: 111, lat: 333 } } } let {desc: {pos}} = user console.log(pos) // { lng: 111, lat: 333 } let {desc: {pos: {lng}}} = user console.log(lng) // 111 let {desc: {pos: {lng: longitude}}} = user console.log(longitude) // 111 let {sex:sex1,...test} = {name:'wzx',age:20,sex:'男'} console.log(test,sex1);//{name:'wzx',age:20} 男
</script>
3、函数的解构赋值:
<script> //函数的解构赋值 function f([a,b,...c]) { console.log(a, b, c); console.log(c[2]); //输出1 2 [3, 4, 5, 6] } f([1,2,3,4,5,6]) function f1({name,age:age1=18,...other}) { console.log(name, age1, other); //输出wzx 18 {sex: "男", school: "贵州师范大学"} } f1({name:'wzx',sex:'男',school:'贵州师范大学'}); </script>