ES6作业好手-解构作业博客说明文中所涉及的信息来源于网络及个人总结，旨在总结个人的学习和经验。如有侵权，请联系我删除，谢谢！介绍ES6允许按照一定的模式从数组和对象中提取值，并为变量赋值，这称为解构。有了这个操作，赋值操作会更加简洁实用。解构赋值其实就是一种模式匹配。只要等号两边的模式相同，左边的变量就会被赋予相应的值。数组的解构可以从数组中取出值，根据对应的位置给变量赋值。//之前leta=1;letb=2;letc=3;//ES6允许这样写。让[a,b,c]=[1,2,3];可以嵌套，有完全解构和不完全解构之分，即等号左边的模式只匹配等号右边的部分数组。这种情况下，解构还是可以成功的。let[aa,[[bb],cc]]=[1,[[2],3]];aa//1bb//2cc//3let[,,third]=["aa","bb","cc"];third//"cc"让[x,,y]=[1,2,3];x//1y//3let[head,...tail]=[1,2,3,4];head//1tail//[2,3,4]let[x,y,...z]=['a'];x//"a"y//undefinedz//[]如果解构不成功，则变量的值等于undefined。让[foo]=[];让[bar,foo]=[1];如果等号右边不是数组（不是可遍历结构），那么就会报错。让[foo]=1；让[foo]=false；让[foo]=NaN；让[foo]=undefined；让[foo]=null；让[foo]={}；使用解构赋值对Set结构有Iterator接口，你也可以对数组使用解构赋值。让[x,y,z]=newSet(['a','b','c']);x//"a"默认值解构赋值允许指定默认值。let[foo=true]=[];foo//truelet[x,y='b']=['a'];//x='a',y='b'让[x,y='b']=['a',undefined];//x='a',y='b'注意，null的使用使用了ES6内部的严格相等运算符（===）来判断一个位置是否有值。因此，只有当一个数组成员严格等于undefined时，默认值才会生效。因为null并不严格等于undefined，所以设置null的默认值仍然是null。让[x=1]=[未定义]；x//1让[x=1]=[null];x//空对象的解构分配对象的解构与数组有一个重要区别。数组的元素是有序排列的，变量的值由它的位置决定；而对象的属性没有顺序，变量必须和属性同名才能得到正确的值。let{bar,foo}={foo:'aaa',bar:'bbb'};foo//"aaa"bar//"bbb"let{baz}={foo:'aaa',bar:'bbb'};baz//undefined如果解构失败，变量的值等于undefined。let{foo}={bar:'baz'};foo//undefined获取对象的方法对象的解构赋值，可以方便的将已有对象的方法赋值给一个变量。将console.log分配给日志变量。const{log}=console;log('hello')//hello模式和变量let{foo:baz}={foo:'aaa',bar:'bbb'};baz//"aaa"foo//error:fooisnotdefined分析上面的代码，foo是匹配模式，baz是变量。实际上赋值的是变量baz，而不是模式foo，所以使用的时候要用baz。对象的解构赋值可以被继承注意对象的解构赋值可以获得继承的属性。在下面的代码中，对象obj1的原型对象是obj2。foo属性不是obj1本身的属性，而是继承自obj2的属性，可以通过解构赋值得到。constobj1={};constobj2={foo:'bar'};Object.setPrototypeOf(obj1,obj2);const{foo}=obj1;foo//解构和赋值“bar”对象时的注意事项1.已经声明的变量使用解构赋值。直接使用{x}时，{x}会被解释为代码块，导致语法错误。把整个解构赋值语句放在括号里，就可以正确执行了。letx;{x}={x:1};//SyntaxError:语法错误//正确的写法letx;({x}={x:1});2.由于数组本质上是特殊的对象，所以Object属性可以在数组上进行解构。letarr=[1,2,3];let{0:first,[arr.length-1]:last}=arr;first//1last//3字符串也可以被解构和赋值。这是因为此时，字符串被转换为类数组对象。const[a,b,c,d,e]='你好';a//"h"b//"e"c//"l"d//"l"e//"o"Array-likeObjects有一个length属性，所以这个属性也可以被解构和赋值。let{length:len}='hello';len//5数值和布尔值的解构赋值解构赋值时，如果等号右边是数值或布尔值，则转为先对象。let{toString:s}=123;s===Number.prototype.toString//truelet{toString:s}=true;s===Boolean.prototype.toString//true在上面的代码中，值和布尔值value包装对象具有toString属性，因此变量s可以获得值。解构赋值规则解构赋值规则是只要等号右边的值不是对象也不是数组，就先转为对象。由于undefined和null不能转化为对象，解构赋值会报错。让{prop:x}=undefined;//TypeErrorlet{prop:y}=null;//TypeError函数参数的解构赋值函数的参数也可以使用解构赋值。函数add的参数是一个数组，但是传入参数时，数组参数被分解成变量x和y，在函数内部可以直接使用。函数添加([x,y]){返回x+y;}添加([1,2]);//3括号问题解构赋值很方便，但是解析起来不太方便。对于编译器来说，从一开始就无法知道公式是模式还是表达式，必须解析（或不解析）才能知道等号。由此产生的问题是，如果模式中有括号，该怎么办。ES6规则是，只要存在可能导致解构的歧义，就不得使用括号。不能使用括号的情况1、变量声明语句let[(a)]=[1];let{x:(c)}={};let({x:c})={};let{(x:c)}={};让{(x):c}={};让{o:({p:p})}={o:{p:2}};2.函数参数函数参数也是变量声明，所以不能有括号。函数f([(z)]){返回z;}functionf([z,(x)]){返回x;}3.赋值语句的模式({p:a})={p:42};([a])=[5];可以使用圆括号的情况只有一种情况可以使用圆括号：赋值语句的非模式部分可以使用圆括号。[(b)]=[3]；//正确({p:(d)}={});//正确[(parseInt.prop)]=[3];//赋值目的变量的正确解构赋值在实际开发中非常有用。设x=1；让y=2;[x,y]=[y,x];上面的代码交换变量x和y的值，不仅简洁，而且易读，语义非常清晰。从一个函数中返回多个值一个函数只能返回一个值。如果要返回多个值，只能以数组或对象的形式返回。通过解构赋值，可以很方便的提取这些值。//返回一个数组functionexample(){return[1,2,3];}let[a,b,c]=example();//返回一个对象functionexample(){return{aa:1,bb:2};}let{aa,bb}=example();函数参数的定义和解构赋值可以方便地将一组参数与变量名联系起来。//参数是一组有序值functionf([x,y,z]){...}f([1,2,3]);//参数是一组无序值functionf({x,y,z}){...}f({z:3,y:2,x:1});拿JSON数据解构赋值对来提取JSON对象中的数据，在获取请求数据中的使用非常广泛。letjsonData={code:200,status:"OK",data:[1,2]};让{代码，状态，数据：数字}=jsonData;console.log(id,status,number);//200,"OK",[1,2]函数参数的默认值jQuery.ajax=function(url,{async=true,beforeSend=function(){},cache=true,complete=function(){},crossDomain=false,global=true,//...更多配置}={}){//...dostuff};指定参数的默认值，避免在函数体内写varfoo=config.foo||'默认富';这样的说法。遍历Map结构任何使用Iterator接口部署的对象都可以使用for...of循环遍历。Map结构原生支持Iterator接口，通过变量解构赋值获取键名和键值非常方便。constmap=newMap();map.set('first','hello');map.set('second','world');for(let[key,value]ofmap){console.log(key+"is"+value);}//firstishello//secondisworld如果只想获取键名，或者只想获取键值，可以这样写。//Getthekeynamefor(let[key]ofmap){//...}//Getthekeyvaluefor(let[,value]ofmap){//...}的指定方法inputmodule加载模块时，往往需要指定进入哪些方法。解构赋值使得输入语句非常清晰。const{SourceMapConsumer,SourceNode}=require("source-map");感谢全能网络菜鸟教程阮一峰的es6语法教程和辛勤的自我，个人博客，GitHub
