es6之变量的解构赋值
es5中通常我们声明变量都是以下的方式:
1 var a = 10; 2 var b = 20; 3 var c = 30; 4 5 //或者 6 7 var a = 10,b = 20,c = 30; 8 9 //或者 10 11 var arr = [1,2,3,4,5]; 12 var a = arr[0]; 13 var b = arr[1]; 14 var c = arr[3]; 15 16 //或者 17 18 var obj = { 19 name: 'gary', 20 age: 20 21 } 22 23 var a = obj.name; 24 var b = obj.age; 25 26 //或者 27 28 //等等
有时变量多写起来真的很麻烦,很多繁琐的差不多的重复工作,es6为我们提供了多种更加便利的声明变量的形式——变量的解构赋值
es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值。本质是模式匹配。
变量的声明和赋值是一体的,使用let或者const不可以重复定义
数组的解构赋值
数组的解构赋值需要左边的变量结构需要等于右边的值的结构,即给对应位置的变量声明对应位置的值,变量的取值由位置决定
只要某种数据类型具有迭代器(iterator)接口,就可以使用数组的解构赋值,不一定非是数组
es6中具有iterator接口的数据类型有:数组,类数组对象,字符串,Set,Map,Generator函数
注:对象不具有iterator接口,需要自己配置
1 var [a,b,c] = ['a','b']; 2 console.log(a); //a 3 console.log(b); //b 4 5 var [a,[[b],c]] = [1,[[2],3]]; 6 console.log(a); //1 7 console.log(b); //2 8 console.log(c); //3 9 10 //不完全解构,左边只是右边的一部分,但是模式是正确的 11 var [a,,c] = ['a1','b1','c1','d1']; 12 console.log(a); //a1 13 console.log(c); //c1 14 15 var [a,...b] = ['a2','b2','c2','d2']; 16 //rest参数:...b 获取多余的数组元素,组成一个新数组,常用于函数参数中,作用与arguments类似,arguments是类数组 17 console.log(a); //a2 18 console.log(b); //['b2','c2','d2'] 19 20 var [a,b,...c] = ['a3']; 21 //rest参数必须是最后一个元素 22 console.log(a); //a3 23 console.log(b); //undefined 解构不成功就是undefined 24 console.log(c); //[] rest参数解构不成功是空数组[] 25 26 //字符串具有iterator接口 27 var [a,b,c] = 'hello'; 28 console.log(a); //h 29 console.log(b); //e 30 console.log(c); //l 31 32 var [a,b,c] = new Set(['aa','bb','cc']); 33 console.log(a); //aa 34 console.log(b); //bb 35 console.log(c); //cc
对象的解构赋值
对象的属性没有次序,变量必须与属性同名,才能取到正确的值,即变量名与属性名一一对应,次序不重要
1 var {foo,bar} = {bar: 'aaa', foo: 'bbb'} 2 console.log(foo); //bbb 3 console.log(bar); //aaa 4 5 var {foo} = {baz: 'ccc'} 6 console.log(foo); //undefined 因为变量与属性名不一致 7 //解决办法 8 //在变量前指定对应的属性名使用:隔开 9 var {baz:foo} = {baz: 'ddd'} 10 console.log(foo); //ddd foo指向baz属性对应的值 11 12 //还可以用于嵌套结构对象, 不过应该很少会这么做吧。。。 13 var obj = { 14 p: [ 15 'Gary', 16 { 17 y: 'Guo' 18 } 19 ] 20 } 21 22 var { 23 p: [ 24 x, 25 { 26 y 27 } 28 ] 29 } = obj; 30 31 console.log(x); //Gary 32 console.log(y); //Guo
如果是先声明了变量再进行对象解构赋值则需要加上括号,否则js回你认为{}是一个代码块,而不是解构赋值
1 var bar; 2 {bar} = {bar:1} //SyntaxError: expected expression, got '=' 3 console.log(bar); 4 5 var bar; 6 ({bar} = {bar:111}) 7 console.log(bar); //111 实际开发中不推荐这么做
对象解构赋值的小应用:求最大值
1 //正常方法 2 var arr = [2,5,1,8,4,2]; 3 console.log(Math.max.apply(this, arr)); //8 4 5 //简化 6 7 var {max} = Math; 8 console.log(max.apply(this, arr)); //8 9 10 即是将现有方法赋值到变量上使用
函数参数的解构赋值
结合数组和对象的解构赋值,进行函数参数的解构赋值
1 function f([x,y]){ 2 return x+y; 3 } 4 5 f([1,2]); //3 6 7 function d({name = 'g',age = '2'} = {}){ //undefined会触发默认值 8 return `${name} ${age}`; //此处相当于name+' '+age 9 } 10 11 d({name: 'Gary',age: '20'}); //Gary 20
默认值
当变量的值严格等于(===)undefined时默认值会生效
数组解构默认值设置:
1 var [a=1, b=2] = [,4]; 2 console.log(a); //1 默认值 3 console.log(b); //4 4 5 var [a = 1, b = 2] = [4, undefined]; 6 var [i = 10, s = 20] = [5,null]; 7 console.log(a); //4 8 console.log(b); //2 默认值 9 console.log(i); //5 10 console.log(s); //null null !== undefined 11 12 //如果默认值是表达式,那么会进行惰性求值,即用到才会进行计算,用不到就不理它 13 function f(){ 14 return 'Gary'; 15 } 16 var [a = f()] = [2]; 17 console.log(a) //2 f()不会执行
对象解构默认值设置:
在变量后面使用=进行默认值的赋值 var {foo = 默认值} = {}
1 var {foo = 3} = {} 2 console.log(foo); //3 3 4 var {baz:foo = 3} = {baz: null} 5 console.log(foo); //null 6 7 var {baz:foo = 5} = {baz: undefined} 8 console.log(foo); //5
用途:
1. 交换变量的值
1 //正常 2 var a = 10; 3 var b = 20; 4 var c; 5 c = a; 6 a = b; 7 b = c; 8 9 console.log(a); //20 10 console.log(b); //10 11 12 //使用解构赋值 13 14 var x = 10; 15 var y = 20; 16 17 [x,y] = [y,x]; 18 console.log(x); //20 19 console.log(y); //10
2. 从函数返回多个值
3. 函数参数的定义
函数的参数如果是对象的成员,优先使用解构赋值
4. 提取JSON数据
5. 函数参数的默认值
在参数中指定默认值
避免 var a = obj || {}的语句
6. 遍历Map解构
7. 输入模块的指定方法