常用的ES6新特性--解构赋值

开发中常用的ES6新特性–解构赋值let和const由于var可以重复声明，而且无法限制修改，也没有块级作用域，在一些时候不是很合适，所以出现了let和constlet：不能重复声明，可以修改，有块级作用域，适合for循环等一些场景const：不能重复声明，有块级作用域，不可以修改，比较适合做全局变量的结构赋值数组的解构赋值let [a,b,c] = [1,2,3]let [d,[[e],f]] = [1,[[2],3]]//d=1,e=2,f=3let [x,y,…z] =[‘a’];//x=“a”,y=undefined,z=[] 结构不成功变量的值就为undefined不完全解构let [a,[b],c] = [1,[2,3],4];//a=1,b=2,c=4对于set结构,可以使用数组的解构数组let [x,y,z] = new Set([‘a’,‘b’,‘c’]);//a=a,y=b,z=c主要数据结构具有Iterator接口，都可以采用数组形式的解构赋值，如下斐波那契数列的例子，利用generator函数function* fibs(){ let a = 0 ; let b = 1; while(true){ yield a;//利用yield返回中间值 [a,b] = [b,a+b]; }}let [first,second,third,fourth,fifth,sixth] = fibs();//first=0,second=1,third=1,fourth=2,fifth=3,sixth=5默认值解构赋值允许指定默认值,es6内部使用严格相等运算符===判断一个位置是否有值，所以只有当一个数组成员严格等于undefined，默认值才会生效;默认值可以引用解构赋值的其他变量，但该变量必须已经声明。let [x,y=‘b’] = [‘a’];//x=‘a’,y=‘b’let [x=1] = [undefined];//x=1let [x=1] = [null];//x=nulllet [x=1,y=x] = [2];//x=2,y=2 因为先把2解构赋给x，x把值赋给y，所以x，y都为2let [x=1,y=x]=[1,2];//x=1,y=2对象的解构赋值数组的解构和对象的解构有一个不同，数组的元素按次序排列，变量的取值由其位置决定；而对象的属性没有次数，变量必需和属性同名，才能取得正确的值。let {foo:foo,bar:bar} = {foo:‘qqq’,bar:‘www’}//foo=qqq,bar=www//嵌套解构let obj = {p:[‘hello’,{y:‘world’}]};let {p:[x,{y}]} = obj//x=hello,y=world 此时p作为模式不会被赋值let {p,p:[x,{y}]} = obj//p=[‘hello’,{y:‘world’}] 此时P作为变量赋值以下实例进行了三次解构，分别是对loc,start,line三个属性，但是最后解构赋值时，只有line是属性，start和loc都是模式,而不是变量const node = { loc:{ start:{ line:1, column:5 } }};//第一个参数是对loc进行解构，得到loc = { start: { line: 1, column: 5 } }//第二个参数对start进行解构，得到start = { line: 1, column: 5 }//第三个参数对line进行解构，得到 line = 1let{ loc,loc:{start},loc:{start:{line}}} = node;console.log(loc);//{ start: { line: 1, column: 5 } }console.log(start); //{ line: 1, column: 5 }console.log(line);//1嵌套赋值let obj = {};let arr = [];({foo:obj.prop, bar:arr[0]} = {foo:123,bar:true});console.log(obj);//{prop:123}console.log(arr);//[true]对象的默认值,和数组的默认值相似var {x:y=3}={x:5}//y=5var {x=3} = {x:undefined}//x=3var {x=3} = {x:null}//x=nullvar {foo} = {bar:‘bz}//foo=undefined解构失败变量的值等于undefined一些错误写法：let _tmp = {baz :‘bz’};_tmp.foo.baz;//报错，因为foo已经是undefined，再取子属性会报错let x；{x} = {x:1};//会报错，因为JavaScript引擎会把{x}解释成代码块，只有避免将大括号写在行首，避免将其解释成代码块，才能避免报错let x;({x} = {x:1});//正确写法字符串的解构赋值const [a,b,c,d,e] = ‘hello’//a=‘h’,b=‘e’,….let {length:len}=‘hello’//len=5数值和布尔值的解构赋值解构赋值时，如果等号右边是数值和布尔值，会先转为对象；而undefined和null无法转为对象，所以对它们解构赋值会报错let {toString:s} = 123;console.log(s === Number.prototype.toString);//truelet {toString:s} = true;console.log(s === Boolean.prototype.toString);//truelet { prop: x } = undefined; // TypeErrorlet { prop: y } = null; // TypeError函数参数的解构赋值[[1, 2], [3, 4]].map(([a, b]) => a + b);//[3,7]函数参数的解构可以使用默认值，但是不同的写法会有区别，有如下两种情况，一种是为函数的参数指定默认值，一种是为变量指定默认值变量的默认值函数test的参数是一个对象，通过对对象的解构，得到参数x,y，解构失败，参数为默认值function test({x=0,y=0} ={}){ return [x,y];}console.log(test({x:2,y:5}));//[2,5]console.log(test({x:2}));//[2,0]console.log(test({}));//[0,0]console.log(test());//[0,0]函数参数的默认值，下面是为函数的参数指定默认值function test({x,y} = {x:0,y:0}){ return [x,y];}console.log(test({x:2,y:5}));//[2,5]console.log(test({x:2}));//[ 2, undefined ]console.log(test({}));//[ undefined, undefined ]console.log(test());[0,0] 变量解构赋值的用途交换变量的值从函数返回多个值函数参数的定义提取JSON数据函数参数的默认值遍历Map结构输入模块的指定方法