作用:1、交换两变量的值,语法“[x,y] = [y,x];”;2、分解字符串,将字符传入变量,语法“[变量列表]=字符串”;3、从函数中返回多个值,语法“[变量列表]=函数”;4、提取json数据,语法“{变量列表}=json变量”等等。
本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。
es6解构赋值
es6允许按照一定的模式,从数组或对象中提取值,给变量进行赋值,称为解构赋值。
解构赋值在代码书写上简单易懂,语义清晰明了,方便对复杂对象中数据字段的获取。
解构模型
在解构中,解构的源,位于解构赋值表达式的右边,而解构的目标,在解构表达式的左边。
解构赋值的作用
1、交换x,y变量的值
利用解构赋值可以不借助第三个变量的交换两变量的值
let x = 1; let y = 2; console.log('x:'+x, 'y:'+y); //x:1 y:2 //结构赋值 [x,y] = [y,x]; console.log('x:'+x, 'y:'+y); //x:2 y:1
2、分解字符串,将字符传入变量
var [a,b,c,d,e] = "hello"; console.log(a); // h console.log(b); // e console.log(c); // l console.log(d); // l console.log(e); // o
3、从函数返回多个值
//函数只能返回一个值,如果要返回多个值,要将他们放在数组或者对象里返回。
function example(){ //返回一个数组 return [1,2,3] } let [a,b,c]= example(); console.log('a:'+a,'b:'+b,'c:'+c); //a:1 b:2 c:3 function example2(){ //返回一个对象 return { name:'kang+', age:20 } } let {name,age} = example2(); console.log('name:'+name,'age:'+age); //name:kang+ age:20
4、函数参数的定义
//参数是一组有次序的值 function f([x,y,z]){ console.log('x:'+x); console.log('y:'+y); console.log('z:'+z); } f([1,2,3]); //参数是一组没有次序的值 function f({x,y,z}){ console.log('x:'+x); console.log('y:'+y); console.log('z:'+z); } f({z:3, x:2, y:1});
5、提取json数据(项目开发中一定用的到的)
let jsonData = { number:01, status:'200', data:[{person:'kang+',age:20}] } // 获取json数据 let {number,status,data,data:[{person,age}]} = jsonData; console.log('number:'+number); //number:1 console.log('status:'+status); //status:200 console.log(data) // [{…}] console.log('person:'+person); //person:kang+ console.log('age:'+age); //age:20
6、函数参数的默认值 (这个个人认为作用不大)
function Person(name,age,school = 'xiyou'){ this.name = name; this.age = age; this.school = school; } var son = new Person('kang+',20); console.log(son) // {name: "kang+", age: 20, school: "xiyou"}
7、遍历map结构
Map 结构原生支持 Iterator接口,配合变量的解构赋值获取键名和键值就非常方便。 var map = new Map(); map.set('name','kang+'); map.set('age','20'); for(let [key, value] of map){ console.log(key + ' is ' + value); } name is kang+ age is 20 获取键名 var map = new Map(); map.set('name','kang+'); map.set('age','20'); for(let [key] of map){ console.log(key); //name age } // 获取键值 var map = new Map(); map.set('name','kang+'); map.set('age','20'); for(let [,value] of map){ console.log(value); // kang+ 20 }
【相关推荐:javascript视频教程、web前端】
以上就是es6解构赋值有什么作用的详细内容,更多请关注php中文网其它相关文章!