ES6解构赋值有哪些重要作用？

本文共计992个文字，预计阅读时间需要4分钟。

功能：1、交换两个变量的值，语法`[x,y]=[y,x];`；2、分割字符串，将字符传入变量，语法`[变量列表]=字符串；`；3、从函数中返回多个值，语法`[变量列表]=函数；`；4、提取JSON数据。

作用：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 }

以上就是es6解构赋值有什么作用的详细内容，更多请关注自由互联其它相关文章！