微信扫一扫打赏支持

ES6课程---6、解构赋值

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>

 

 

 

 
posted @ 2020-04-29 22:01  范仁义  阅读(253)  评论(0)    收藏  举报