所属分类：web前端开发
作用：1、交换两变量的值，语法“[x,y] = [y,x];”；2、分解字符串，将字符传入变量，语法“[变量列表]=字符串”；3、从函数中返回多个值，语法“[变量列表]=函数”；4、提取json数据，语法“{变量列表}=json变量”等等。
前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。
es6解构赋值
es6允许按照一定的模式，从数组或对象中提取值，给变量进行赋值，称为解构赋值。
解构赋值在代码书写上简单易懂，语义清晰明了，方便对复杂对象中数据字段的获取。
解构模型
在解构中，解构的源，位于解构赋值表达式的右边，而解构的目标，在解构表达式的左边。
解构赋值的作用
1、交换x,y变量的值
利用解构赋值可以不借助第三个变量的交换两变量的值
微博登录
QQ登录 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解构赋值有什么作用的详细内容，更多请关注zzsucai.com其它相关文章！
