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>