ES6参考---解构赋值
一、总结
一句话总结:
1、解构赋值就是从对象或数组中提取数据, 并赋值给变量(多个)
2、对象的解构赋值:左边的全局变量放在对象中:let {n, a} = {n:'tom', a:12}
3、数组的解构赋值:左边的全局变量放在数组中:let [a,b] = [1, 'atguigu']
1、解构赋值(解构对象实例)?
依次将对象里面的name属性和age属性的值传递给name和age全局变量:let {name, age} = {name : 'kobe', age : 39};
let {name, age} = {name : 'kobe', age : 39};
console.log(name, age);
2、解构赋值(解构数组实例)?
依次赋值,可以直接在全局打印a、b的值:let [,,a,b] = ['abc', 23, true,12];
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];
let arr = ['abc', 23, true,12]; let [,,a,b] = arr;
4、解构赋值(解构对象) 在函数传递时的实例?
直接将实参obj对象传递给形参{name, age}:function person1({name, age}) {} person1(obj);
let obj = {name : 'kobe', age : 39}; function person1({name, age}) { console.log(name, age); } person1(obj);
二、解构赋值
博客对应课程的视频位置:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>03_变量的解构赋值</title> 6 </head> 7 <body> 8 <!-- 9 1. 理解: 10 * 从对象或数组中提取数据, 并赋值给变量(多个) 11 2. 对象的解构赋值 12 let {n, a} = {n:'tom', a:12} 13 3. 数组的解构赋值 14 let [a,b] = [1, 'atguigu']; 15 4. 用途 16 * 给多个形参赋值 17 --> 18 <script type="text/javascript"> 19 let obj = {name : 'kobe', age : 39}; 20 // let name = obj.name; 21 // let age = obj.age; 22 // console.log(name, age); 23 //对象的解构赋值 24 let {age} = obj; 25 console.log(age); 26 // let {name, age} = {name : 'kobe', age : 39}; 27 // console.log(name, age); 28 29 //3. 数组的解构赋值 不经常用 30 let arr = ['abc', 23, true]; 31 let [a, b, c, d] = arr; 32 console.log(a, b, c, d); 33 //console.log(e); 34 function person(p) {//不用解构赋值 35 console.log(p.name, p.age); 36 } 37 person(obj); 38 39 function person1({name, age}) { 40 console.log(name, age); 41 } 42 person1(obj); 43 44 45 </script> 46 </body> 47 </html>