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

 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 //注意：数组的模式是成员，而不是成员的值，两回事，在最后的圆括号内会提及

 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 ​

 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 }

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

 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时会触发默认值

 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 //以上基本都是有数组，值传递的点，这些点注意可以使用解构赋值，会更加的方便，在学习复习后面的知识的时候，都会穿插举例子，越学越明白

 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值对应的数组的第一个成员，而括号里的是数组第一个成员对应的值。