ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
解构是ES6的新特性, 比ES5代码简洁,清晰,减少代码量
ES5中的为变量赋值,只能直接指定值
var a = 1;
var b = 2;
var c = 3;
es6匹配模式写法
var [a,b,c] = [1,2,3];
// 这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值
var x = 1;
var y = [1,2];
var z = 3;
var [x,y,z] = [1,[1,2],3];// 数组
var [x,y,z] = [1,{'name':'amy'},3]; // 对象
如果解构不成功,变量的值就等于undefined
let [a] = [];
let [a,b] = [1];
解构赋值允许指定默认值
var [x=1,y=2] = [10,20]; // x = 10, y = 20;
var [x=1,y=2] = [10]; // x = 10, y = 2;
var [x= 10,y = 20] = []; // x=10, y=20;
var [x,y='b']= ['a']; // x='a', y='b';
var [x=1,y] = [10,20]; // x = 10, y=20;
var [x = 1] = [null]; // x= null
只有当一个数组成员严格等于undefined,默认值才会生效
var [x = 1]=[undefined]; // x=1;
var [x,y='b'] =['a',undefined]; // x='a',y='b';
如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值
function f(){
return '12345'
}
var [x = f()] = [1]; // x=1
var [x = f()] = []; // x='12345'
var [x = f()] = [undefined]; // x='12345'
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对
象的属性没有次序,变量必须与属性同名,才能取到正确的值。
// 对象解构的写法
let {a,b} = {b:1,a:2};
实际的运用
var obj = {
id:1,
name:'abc',
sex:'男',
friends:['x','y','z'],
o:{id:2,msg:'hello'}
};
// es5从对象中取值的方式
var _id = obj.id;
var f = obj.friends;
// es6通过解构更简洁清晰
var {id, name, sex, o} = obj;
变量名与属性名不一致,name 是匹配模式 ,n 是变量
var {name:n,age:a} = {name:'123',age:18};
默认值生效的条件是,对象的属性值严格等于 undefined
let {x,y = 5} = {x:10}; // x=10, y=5
let {x:y = 5} = {x:50}; // y=50
let {x:a = 10,y:b=20} = {x:undefined}; // a=10,b=20
如果要将一个已经声明的变量用于解构赋值,必须非常小心。
// 错误的写法
let x;
{x} = {x: 1};
// 报错的原因:因为 JavaScript 引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免 JavaScript 将其解释为代码块,才能解决这个问题
// 正确的写法
let x; ({x} = {x: 1});
// 将整个解构赋值语句,放在一个圆括号里面,就可以正确执行
let [a,b,c,d,e,f] ='nodejs';
解构在函数中具体运用
// 数组解构
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
// 对象解构
function move({x, y}) {
return x +y;
}
move({x: 3, y: 8});
参数默认值的定义
function fun([x=0,y=0]) {
return x+y;
}
fun([2,4]);
function move({x = 0, y = 0}) {
return x +y;
}
move({x: 3, y: 5}); // 当实参为空时,不会报错
function fun([x=0,y=0]) {
return x+y;
}
fun([2]);
function fun([x=0,y=0]) {
return x+y;
}
fun([,4]);
function move({x = 0, y = 0}) {
return x +y;
}
move({x: 3});
function move({x = 0, y = 0}) {
return x +y;
}
move({y: 5});