ES6-变量的解构赋值复习+学习

ES6------变量的解构赋值

　　由于之前学过ES6的解构赋值，但是只是略看了一点网上的视频，所以今天就看了看ES6对这一部分的详细介绍，然后做一个总结的笔记。

　　首先，先大概说一下什么是变量的解构赋值，大概了解一下是什么？然后从几个方面分别对这个概念，以及相应的知识做一个总结和学习，最后总结一下具体的用途，然后再看一下涉及到的不足，以及解决方法！具体分为以下几点：

1.基本用法（模式匹配），同时借此理解什么是变量赋值

2.对象的解构赋值

3.字符串的解构赋值

4.数值和布尔值的解构赋值

5.函数参数的解构赋值

6.重要的用途都有哪些

7.涉及到的括号问题

　　接下来就从上面这七点展开复习和学习！

1.基本用法（模式匹配），同时借此理解什么是变量赋值

 1 //1.首先，什么是解构赋值？
 2 //在ES6中，允许按照一定的模式从数组和对象中提取值，然后对变量进行赋值，这个被称为解构赋值，举个例子：
 3 let a = 1;
 4 let b = 2;     //普通的变量声明
 5 let [a,b] = [1,2];   //利用解构赋值进行的变量声明（该方法为“模式匹配”）
 6 //至此我想大家都应该知道解构赋值的大概意思了吧！
 7 //利用模式匹配的方法对数组进行解构：
 8 let [a,[b,c]] = [1,[2,3]]; //简单理解就是对应变量对应的值
 9 ​
10 ​
11 //2.模式匹配的三种情况：解构成功，解构不成功，不完全解构,以及模式匹配的条件。如下：
12 //(1)解构成功就是对应都有值，这个就不再多说
13 //(2)解构不成功，则变量的值就是undefined，例如：
14 let [f] = [];
15 let [a,f] =[1];    //这两个都是解构不成功，对应的f就是undefined
16 //(3)不完全解构，意思应该是数值较多，变量少的情况。例如：
17 let [a,b,c] = [1,2,3,4];  //这里右边有四个数值，左边有三个变量，那就是从左向右对应赋值，解构可以成功，但是不完全。
18 //(4)模式匹配的条件：如果等号右边不是可遍历的解构，那么将会报错。例如：
19 let [f] = 2;
20 let [f] = false;
21 let f = NaN;        //这几个都会报错，原因就是等号右边的值转为对象后不具备Iterator接口，或者就是本身就没有这个接口
22 let f = undefined;
23 //只要有Iterator接口，或者是Generator函数，也都可以进行解构赋值，例如：
24 function *fibs(){
25     let a = 0;
26     let b = 1;
27     while(true){
28         yield a;
29         [a,b] = [b,a+b];
30     }
31 }
32 let [a,b,c,d,e,f] = fibs(); //f = 5;
33 //当然Iterator，Generator是什么？大家可以先搜索一下了解一下，在之后我会就这部分单独进行学习和复习，以及做笔记。
34 ​
35 ​
36 //3.默认值
37 //(1)解构赋值可以做默认值，那么默认值是干什么的？是什么？看以下例子你就知道了：
38 let [f = 1] = [];   //f的值是1
39 let [x = 1] = [undefined]   // x的值是1
40 let [x = 1] = [null]   //x的值是null，这种情况和上面的不同，为什么呢？
41 //大家看完上面的例子为什么最后一个是null？看第(2)点。
42 //(2)注意一个默认值规则：ES6内部的默认值是先进行===判断，然后再让默认值生效的。
43 let [x = 1] = [null]  //当执行这一句，会先判断等号右边括号内是否是undefined，此时右边是null与undefined不一样，所以默认值不会生效，结果就是null
44 let [x = 1] = [];    //等号右边是空，空也就是undefined，所以默认值可以生效，所以x=1成立
45 //(3)默认值的方式
46 //默认值可以是变量：
47 let [x =1,y = x]= [];  // x=1;y=1;
48 let []x = 1,y=x] =[2]; //x = 2,y = 2; 先进行===比较，如果右边有值，先赋值，如果没了，取默认值
49 //默认值可以表达式，而表达式是惰性的，在用时才会执行：
50 function(){
51     console.log('aaa');
52 }
53 let [x = f()] = [1];   //在该代码中，等号右边数组里面有值，则x可以取到值，因此不需要默认值，那么f()这个表达式根本不会执行。
54 ​
55 //注意：数组的模式是成员，而不是成员的值，两回事，在最后的圆括号内会提及

2.对象的解构赋值

 1 //1.对象解构的规则（与数组解构的区别）
 2 //(1)对象解构与数组解构不同，对象解构是匹配属性名的，而不看顺序:
 3 let {b,f} = {f:"f",b:"b"};  //得到的结果b为b，f为f
 4 //(2)对象解构是属性找不到匹配值会得到undefined
 5 //(3)对象的匹配模式，不同变量名的解构赋值操作：
 6 let{匹配已有属性名：真正想要改变值的属性名} = {匹配已有的属性名：对应的属性值};
 7 let{f:f} = {f:"fff"}; //对象的匹配模式是等号左边的f属性的值是个f变量，这样匹配到的f属性的值才是fff
 8 let{f:a} = {f:"fff"}; //对象中含有属性a，但是等号右边没有属性a，此时怎么对属性a赋值呢？利用f属性：对应属性就可以让a得到fff
 9 let{foo:bar} = {foo:"barbarbar"}  //结果就让bar得到了barbarbar字符串
10 //在上面的代码中，foo与f是匹配的模式，f，a，bar才是变量，才是真正被赋值的，而不是匹配模式
11 //(4)匹配模式的嵌套理解：
12 var demo = {
13     a:{
14         b:{
15             c=1
16         }
17     }
18 }
19 var {a,a:{b},a:{b:{c}}} = demo;  //c:1,b为{c=1},a为{b:obj},该匹配等号左边的a相当于 a:a的形式
20 ​
21 ​
22 //2.对象解构的默认值
23 //对象解构也可以有默认值，默认值的条件仍旧是等号右边对象属性判断为undefined
24 var {x = 3} ={}  //x = 3
25 var {x:y = 3}={} //匹配模式x为匹配名字，对应得还是y得值改变，此时等号右边为undefined，y取默认值
26 var {x:x = 3} = {x:null}  //仍旧为null
27 ​
28 ​
29 //3.对象解构与数组解构
30 //因为数组得本质也是对象，因此可以让对象与数组相互使用:
31 let arr = [1,2,3];
32 let{0:a,1:b,2:c} = arr;  //a=1,b=2,c=3 此时就很类似伪数组
33 ​

3.字符串的解构赋值

 1 //字符串也可以解构赋值，此时就转化为一个伪数组形式
 2 const [a,b,c]="big";   //a为b，b为i，c为g
 3 //伪数组（对象）也有一个length属性
 4 let {length:len} = "hello";  //len = 5;
 5 //创建一个伪数组对象类似于下列：
 6 var ar={
 7     0:'1',
 8     1:'2',
 9     length:2
10 }

4.数值和布尔值的解构赋值

1 //等号右边是数值或者布尔值，则会先转化为对象，而undefined，或者null无法转化为对象，因此肯定会报错：
2 let {toString:a} = 1;
3 let {toString:a} = true;
4 //a都可以取到一个Number，一个Boolean ， 因为数值和布尔值对象里面都含有toString方法，含有就可以用

5.函数参数的解构赋值

 1 //函数得参数可以解构赋值
 2 function add([x,y]){
 3     return x+y;
 4 }
 5 add([1,2])   //3,其中[1,2]与形参[x,y]就相当于一个解构赋值 [x,y]=[1,2];
 6 //函数参数解构可以有默认值，下面介绍两种不同形式
 7 function x({x=0,y=0}={}){
 8     return [x,y];
 9 }
10 x({x:1,y:2});   //[1,2]   第一种参数
11 x({});    //[0,0]  第二种参数
12 x();    //[0,0]   第三种参数
13 //以上为第一种情况，当参数种等号右边传进去得值为第一种得时候，判断对象为非undefined则执行赋值，当传入的是第二种参数时，判断对象为undefined，此时就会有默认值x = 0， y = 0；
14 function({x,y}={x:0,y:0}){
15     return [x,y];
16 }
17 x({x:3,y:8});   //[3,8]
18 x({})  //[undefined，undefined];  当传入为undefined，
19 //综上所属，实际上时函数参数来得到默认值，而不是变量x，y。当有undefined时会触发默认值

6.重要的用途都有哪些

 1 //1.交换变量的值
 2 let x = 1;
 3 let y = 2;
 4 [x,y] = [y,x];
 5 //2.从函数返回多值
 6 function sss(){
 7     return [1,2,3];
 8 }
 9 let [a,b,c] =sss();  //当然也可以返回一个对象，
10 //3.函数参数定义，这个就不多说了
11 //4.提取JSON数据
12 let jsonDate = {
13     id:1,
14     status:'OK',
15     data:[888,888]
16 }
17 let {id,status,number} = jsonData;
18 //5.函数参数的默认值
19 //6.遍历Map解构
20 //任何部署了Iterator接口的对象都可以用for...of循环遍历。Map解构原生支持Iterator接口，配和变量值取值就很方便
21 var map = new Map();
22 map.set('a','b');
23 ​
24 for(let [key,value] of map){
25     console.log(key + "is" + value);
26 }
27 //该部分如果涉及到那些不了解的部分可以先自行查阅，后面我也会一一学习map与Iter接口。
28 //7.输入模块的指定方法
29 const{SourceMapConsumer,SourceNode} = require("source-map");
30 //以上基本都是有数组，值传递的点，这些点注意可以使用解构赋值，会更加的方便，在学习复习后面的知识的时候，都会穿插举例子，越学越明白

7.涉及到的括号问题

 1 //这里就涉及到解构赋值的问题了，解构赋值虽然很方便，但是解析起来并不是很容易，对于具体的种类需要遇到等号的时候才可以得到答案，出现[]，{}都可以理解，但是出现了()又怎么办呢？ES6的解释就是，那就别用()了,哈哈，有问题，就跳过问题，不就没问题了？我直呼好家伙！当然肯定尽量不使用()。
 2 //1.不能使用()的情况
 3 //(1)变量的声明
 4 let [(a)] = [1];   //肯定报错
 5 let {x:(c)} = {}   //报错
 6 let {(x):c} = {}   //报错
 7 let (o:({p:p}))={o:{p:2}};   //报错
 8 //声明变量绝对不可以用()
 9 //(2)函数的参数，也属于变量声明肯定不可以加()，这里就不举例子了，把上面的等号左边的变量或者对象直接放到函数小括号内就是了
10 //(3)赋值语句
11 ({p:a}) = {p:42};  //报错
12 ({p:(d)}) = [5];  //报错
13 [({p:a}),{x:c}] = [{},{}];  //报错
14 //把代码模式放到括号里，把一部分放到括号里都会导致报错
15 ​
16 //2.可以使用的情况
17 //只有一种赋值语句非模式部分可以使用()
18 [(b)] = [3];  //第一种数组
19 ({p:(d)}) ={})   //非模式部分可以使用括号
20 //首先，可以使用的原因，都是赋值语句，不是声明语句，括号里都不属于模式的一部分，第一种数组的模式是b值对应的数组的第一个成员，而括号里的是数组第一个成员对应的值。

今天的学习，就到这里，大家可能看到有些东西在哪里见过，当然我也不是无敌的，我自己原创一个内容，我肯定也是学习别人的知识，然后自己做个笔记方便日后复习，同时记录一下今天的学习内容，一天一点进步，一大堆的文字，没有什么图片，不精彩啊。但是，知识的学习就是这样，你想搞懂这个情况，肯定要阅读大量的文字，这也是一个过程，当你真正的体会到理解到知识的时候，就也有一种成就感吧，小小的喜悦。当然，我一个字一个字写了这么多，总结了记下了这些笔记，虽然在别人眼里可能很简单，没必要，但是一步一步我也会涉及到深层知识，就想Vue一样，渐进式的由浅入深，加油吧少年，奥里给！！！