ECMAScript6变量的解构赋值

发表于 | 分类于 | | 阅读次数

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）

数组的解构赋值

1
2
3
4
5
6
7
8
//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
  • 不完全解构

等号左边的模式，只匹配一部分的等候右边的数组

1
2
3
4
5
6
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,默认值是不会生效的 

1
2
3
4
5
var [temp = 'string'] = [];
console.log(temp); //string
	
var [temp = 'string'] = ['tempString'];
console.log(temp); //tempString
  • let和const命令

只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值.

对象的解构赋值

  • 解构赋值也可以用于对象

    对象的属性没有次序，变量必须与属性同名，才能取到正确的值

1
2
var {name,age,id} = {id:'007',name:'Lily',age:'22'};
console.log(name,age,id); //Liyl,22,007

变量名与属性名不一致

1
2
3
4
5
6
7
8
9
10
11
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

1
2
3
4
5
var {x = 3 } = {};
console.log(x);//3
		
var {x,y = 5} = {x:1};
console.log(x,y);//1,5

  • 现有对象的方法

    对象的解构赋值，可以很方便的将现有对象的方法，赋值到某个变量

1
2
3
4
5
//ES5
console.log(Math.sin(Math.PI/4));// 0.7071067811865475
let {sin,cos,tan} = Math;
console.log(sin(Math.PI/4)); //0.7071067811865475

字符串的解构赋值

  • 字符串也可以解构赋值

    字符串会被转换成类似数组的对象。

1
2
3
4
5
6
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属性，因此还可以对这个属性进行解构赋值。

1
2
const {length:len} = 'hello';
console.log(len);//5

函数参数的解构赋值

  • 函数的参数也可以解构
1
2
3
4
function sum([x,y]) {
	return x+y;
}
console.log(sum([1,2])); //3
  • 函数的参数的解构也可以使用默认值
1
2
3
4
function test({x = 0,y = 1} = {}) {
	return x + y;
}
console.log(test({x:100}),test({x:100,y:100}));//101,200

结构赋值的用途

  • 交换变量的值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
	
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
  • 从函数返回多个值
1
2
3
4
5
6
7
8
9
function fun() {
	return [1,2,3];
}
var [x,y,z] = fun();
console.log(x,y,z);//1,2,3
  • 提取Json数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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