一、变量的解构 1.什么是解构？ es6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，被称为解构（Destructuring） 对变量进行批量赋值 2.数组解构赋值 var arr=[1,2,3]; var a=arr[1],b=arr[2],c=arr[3]; ===>es6数组解构语法 var arr=[1,2,3]; let[a,b,c]=arr; console.log(a,b,c);//1,2,3 1)数组解构解析 从数组中取值，按照对应的位置，对等号左边的中括号里边的变量进行赋值，这种写法属于‘匹配模式’，只要等号两边模式相同，左边的变量就会被赋予对应的值 2）解构失败 如果解构失败，那么失败的变量值为undefined 如果等号左边的模式变量数量大于右边数组的元素数量，多出来的变量会解析失败 eg:let[a,b,c,d,e,f]=[1,2,3];//变量d,e,f会解析失败 3）不完全解构 等号左边模式中的变量数量小于右边数组中的元素数量，有部分数组元素没有对应的变量，叫做不完全解构 eg:let[a,b]=[1,2,3]; 4)如果模式不同，会报错（等号同右边不是数组，报错） 特殊情况：字符串可以与数组模式进行解构 eg:let[a,b,c]={a:1,b:2,c:3};//报错 let[a,b,c,d]='hello';//不报错 5）解构的默认值 只有当解构失败，赋值出现undefined，默认值才会生效，否则默认值不生效 也就是说解构赋值出现===undefined才会触发默认值 默认值的作用：防止出现解构失败的情况，影响变量使用 如果默认值是一个表达式，这个表达式将是惰性的，也就是只有在用到的时候才会执行表达式 6）默认值可以使用其他变量 但是被引用的变量必须已经被定义过 . eg:let[a,b,c=a]=[1,2];//1,2,1 let[a,b=c,c=a]=[1];//引用错误 3.对象解构 语法： let {a,b}={a:1,b:2}; console.log(a,b);//1 2 ===》 let {a:a,b:b}={a:1,b:2}; console.log(a,b);//1 2 1)解构规则： 数组解构是按照等号左右对应顺序进行赋值的，但是对象解构变量的取值没有顺序，按照左边变量的键和右边对象元素的键，相同的进行赋值 let {a:a,b:c}//第一个a和b都是模式（键）用于匹配 第二个a和c都是变量用于赋值 2）如果变量名和属性名（键）不一样 let{a:c,b:b}={a:'aaa',b:'bbb'}; a:是解构的模式 c是变量 b是解构的模式 b是变量 c是'aaa' b='bbb' es6允许对象中键和值用同一个字母或单词表示，此时可以省略冒号以及后面的变量： var a=100; let obj={a:a}===>{a} 思路： 先找同名的属性（冒号前面的内容），然后将对象右边的值赋值给模式中冒号右边的变量 3）变量同名怎么办 es6规定，let定义的变量不能重名，所有解构赋值也不能重复 如果变量重名，解决办法： 在es6中，如果使用let声明两个相同名字的变量会报错，但是如果第二个变量不用let声明就不会报错，但是编辑器会将大括号理解为一个块级作用域，代码块是不能进行运算的，所有还会报错，此时我们将整个解构赋值的表达式用小括号括起来，将整个赋值过程降级为表达式，就不会被认为是代码块了。此时就可以完整执行 eg： let a=1； （{a}={a:100,b:100}）; console.log(a)//100 4.解构的嵌套 对象解构嵌套的前提是等号左右结构必须一致 5.默认值 当解构赋值===undefined，会触发默认值 四、字符串解构 字符串解构时，会将字符串转为类数组， 解构方式与数组类似： 语法： let[a,b,c,d,e]='hello'; console.log(a,b,c,d,e);//h e l l o 注意：字符串解构时，会先将字符串转为类数组，然后再利用数组的结构方法进行解构 大部分字符串被转为类数组时，会产生一个属性length，可以将其解构出来，表示字符串长度 解构length的方法： let{length}='hello'; console.log(length);//5 5.数值与布尔值的解构赋值 一切皆对象 使用对象的解构方案，在数值和布尔值进行解构时，其实是先将其转为对象，再进行解构 解构原则：如果右边不是数组或者字符串，就会报错 对象解构：如果有变不是对象。就会先将其转为对象，然后按对象解构的规则进行解构 注意：由于null和undefined都无法转为对象，所有null和undefined进行解构都会报错 6.函数的解构赋值 语法： function f([x,y,z=3]){ //系统自动帮我们做形参与实参的解构let[x,y,z=3]=[1,2] console.log(x+y+z); } f([1,2]);//6 function fun({a,b}){ //系统自动帮我们做形参与实参的解构let(a,b)={a:2,b:4}; console.log(a*b); } fun({a:2,b:4});//8 函数的参数是一个数组。传入的值也是数组，其实上就是形参与实参之间的解构赋值 可以根据数组解构或对象解构规则使用默认值 7.解构的用途 1）交换变量值 2）函数中返回多个值 函数只有一个return。只能返回一个值，想要返回多个值。就要将多个值放入数组或对象中返回，此时可以使用解构，轻松的将数组或对象中的返回内容接受出来 3）函数参数传参（函数解构） 有序传参 [] 无序传参{} 4)设置函数参数的默认值 es6允许函数参数设置默认值 5）提取json 解构对提取json尤为有用