ES6课程---6、解构赋值
一、总结
一句话总结：
1、解构赋值就是从对象或数组中提取数据, 并赋值给变量(多个)，也就是对数组或对象的批量赋值
2、对象的解构赋值：把对象的属性name和age对应的值分别赋值给变量name和age：let {name, age} = {name:'fry', age:12}
3、数组的解构赋值：把数组中的1和'fry'分别赋值给变量a和b：let [a,b] = [1, 'fry'];
1、对象解构赋值实例？
依次将对象里面的name属性和age属性的值传递给name和age全局变量：let {name,age} = {name : '铁扇公主', age : 35};
//2、对象的解构赋值
let {name,age} = {name : '铁扇公主', age : 35};
console.log(name,age);
2、数组解构赋值实例？
依次将数组里的值赋值给左边的变量a、b、c：let [a, b, c] = ['abc', 23, true];
let arr = ['abc', 23, true]; let [a, b, c, d] = arr; console.log(a, b, c, d);
3、数组解构赋值的时候，如何接收后面的参数（不按顺序接收参数）？
可以用逗号占位：let [,,a,b] = ['abc', 23, true,12];//a是true，b是12
let arr = ['abc', 23, true,12]; let [,,a,b] = arr;
4、对象解构赋值在函数传递时的实例？
直接将实参obj对象传递给形参name, age：function person1({name, age}) {} person1(obj);
let obj = {name : '牛魔王', age : 41};
function person1({name, age}) {
console.log(name, age);
}
person1(obj);
二、解构赋值
博客对应课程的视频位置：6、解构赋值
https://www.fanrenyi.com/video/24/203
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>解构赋值</title> 6 </head> 7 <body> 8 <!-- 9 1、理解: 10 解构赋值就是对数组或者对象的批量赋值 11 12 * 从对象或数组中提取数据, 并赋值给变量(多个) 13 * 左右的结构是一样的 14 2、对象的解构赋值 15 let {n, a} = {n:'fry', a:12} 16 3、数组的解构赋值 17 let [a,b] = [1, 'fry']; 18 4、用途 19 * 给多个形参赋值 20 --> 21 <script> 22 //一、对象的结构赋值 23 //1、普通的对象写法 24 // let obj = {name : '牛魔王', age : 39}; 25 // let name=obj.name; 26 // let age=obj.age; 27 // console.log(name,age); 28 29 //2、对象的解构赋值 30 //解构赋值左右两边的结构要保证一样 31 // let {name,age} = {name : '铁扇公主', age : 35}; 32 // console.log(name,age); 33 34 //3、解构赋值的部分传值 35 // let {age} = {name : '铁扇公主', age : 35}; 36 // console.log(age); 37 //变量名不对的情况 38 // let {age1} = {name : '铁扇公主', age : 35}; 39 // console.log(age1); 40 41 //在对象的结构赋值中，接收的变量的名字要和属性的名字一样 42 43 //二、数组的解构赋值 44 //数组在结构赋值的时候值是按照位置一一传递 45 // let arr = ['abc', 23, true]; 46 // let [a, b, c, d] = arr; 47 // console.log(a, b, c, d); 48 49 // let [a, b, c, d] = ['abc', 23, true]; 50 // console.log(a, b, c, d); 51 52 53 //结构数组的时候不按顺序拿值 54 // let arr = ['abc', 23, true]; 55 // let [,,a] = arr; 56 57 //在数组的解构赋值中 ，我们想拿到随便位置的元素，我们可以用逗号来占位 58 // let [,,a] = ['abc', 23, true]; 59 // console.log(a); 60 61 62 //三、解构赋值应用 63 //不用解构赋值 64 // let obj = {name : '牛魔王', age : 39}; 65 // function person(name,age) {//不用解构赋值 66 // console.log(name, age); 67 // } 68 // person(obj.name,obj.age); 69 //用解构赋值 70 // let obj = {name : '牛魔王', age : 41}; 71 // function person({name, age}) {//不用解构赋值 72 // console.log(name, age); 73 // } 74 // person(obj); 75 76 </script> 77 </body> 78 </html>