欢迎光临
我的个人博客网站

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一样,渐进式的由浅入深,加油吧少年,奥里给!!!

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

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » ES6-变量的解构赋值复习+学习
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏