ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）
###数组的解构赋值
//ES5
//var a = 1;
//var b = 2;
//var c = 3;
//ES6
var [a,b,c] = [1,2,3];
console.log(a,b,c);//1,2,3
- 不完全解构
等号左边的模式，只匹配一部分的等候右边的数组
let [x,y] = [1,2,3];
console.log(x,y);//1,2
let [a,[b],c] = [1,[2,3],4];
console.log(a,b,c); //1,2,4
- 指定默认值
注意：ES6内部使用严格相等运算符（===）判断一个位置是否有值。所以如果一个数组成员不严格等于undefined,默认值是不会生效的
var [temp = 'string'] = [];
console.log(temp); //string
var [temp = 'string'] = ['tempString'];
console.log(temp); //tempString
- let和const命令
只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值.
###对象的解构赋值
-
解构赋值也可以用于对象
对象的属性没有次序，变量必须与属性同名，才能取到正确的值
var {name,age,id} = {id:'007',name:'Lily',age:'22'};
console.log(name,age,id); //Liyl,22,007
变量名与属性名不一致
var {person_name,person_age,person_id} = {id:'007',name:'Lily',age:'22'};
console.log(name,age,id); //undefined, undefined, undefined
//正确处理
var {name:person_name,age:person_age,id:person_id} = {id:'007',name:'Lily',age:'22'};
console.log(person_name,person_age,person_id);//Liyl,22,007
let object = {first:'hello',last:'word'};
let {first:firstName,last:lastName} = object;
console.log(firstName,lastName);//hello word
-
指定默认值
默认值生效的条件是，对象的属性值严格等于undefined
var {x = 3 } = {};
console.log(x);//3
var {x,y = 5} = {x:1};
console.log(x,y);//1,5
-
现有对象的方法
对象的解构赋值，可以很方便的将现有对象的方法，赋值到某个变量
//ES5
console.log(Math.sin(Math.PI/4));// 0.7071067811865475
let {sin,cos,tan} = Math;
console.log(sin(Math.PI/4)); //0.7071067811865475
###字符串的解构赋值
-
字符串也可以解构赋值
字符串会被转换成类似数组的对象。
const [a,b,c,d,f] = 'hello';
console.log(a); //h
console.log(b); //e
console.log(c); //l
console.log(d); //l
console.log(f); //o
-
属性解构赋值
类似数组的对象都有length属性，因此还可以对这个属性进行解构赋值。
const {length:len} = 'hello';
console.log(len);//5
###函数参数的解构赋值
- 函数的参数也可以解构
function sum([x,y]) {
return x+y;
}
console.log(sum([1,2])); //3
- 函数的参数的解构也可以使用默认值
function test({x = 0,y = 1} = {}) {
return x + y;
}
console.log(test({x:100}),test({x:100,y:100}));//101,200
###结构赋值的用途
- 交换变量的值
console.log('ES5');
var a = 100;
var b = 200;
console.log('交换前');
console.log('a='+ a);//100
console.log('b='+ b);//200
var temp;
temp = a;
a = b;
b = temp;
console.log('交换后');
console.log('a=' + a);//200
console.log('b=' + b);//100
//~~~~~~~~~~~~~~~~~~~ES6~~~~~~~~~~~~~~~~~~~~~
console.log('ES6');
var a = 100;
var b = 200;
console.log('交换前');
console.log('a='+ a);//100
console.log('b='+ b);//200
[a,b] = [b,a];
console.log('交换后');
console.log('a=' + a);//200
console.log('b=' + b);//100
- 从函数返回多个值
function fun() {
return [1,2,3];
}
var [x,y,z] = fun();
console.log(x,y,z);//1,2,3
- 提取Jason数据
var jasonData = {
id:"007",
name:'lily',
age:28,
score:{
chinese:98,
english:100
}
};
console.log(jasonData);
//ES5
console.log(jasonData.age);
console.log(jasonData.name);
console.log(jasonData.id);
console.log(jasonData.score.chinese);
console.log(jasonData.score.english);
//ES6
let {id,name,age,score} = jasonData;
console.log(id);
console.log(name);
console.log(age);
console.log(score.chinese);
console.log(score.english);
- 遍历Map结构
var map = new Map;
map.set('id','007');
map.set('name','Lily');
console.log(map);
console.log(typeof(map));
//获取键值对
for (let [key,value] of map){
console.log(key + value);
}
//获取建
for(let [key] of map){
console.log(key);
}
//获取值
for (let [,value] of map){
console.log(value);
}
- 输入模块的指定方法
.etc
