ES6入门：对象解构赋值原理及应用

ES6入门：对象解构赋值原理及应用

一、对象解构赋值的原理
1、模式（结构）匹配

{}={}

2、属性名相同的完成赋值

const { age, username } = { username: 'Alex', age: 18 }; 
//18 "Alex"
//完整形式为：
const { age: age, username: username } = { username: 'Alex', age: 18 };
// 18 "Alex"
console.log(age, username);

取别名

const { age: age, username: uname } = { username: 'Alex', age: 18 };
console.log(age, uname);

二、对象解构赋值的注意事项
1、默认值的生效条件： 对象的属性值严格等于 undefined 时，对应的默认值才会生效

const { username = 'ZhangSan', age = 0 } = { username: 'alex' };
console.log(username, age);    //默认值 用 = 。非 ：

2、默认值表达式：如果默认值是表达式，默认值表达式是惰性求值的
3、将一个已经声明的变量用于解构赋值：如果将一个已经声明的变量用于对象的解构赋值，整个赋值需在圆括号中进行

let { x } = { x: 1 };
console.log(x);    //报错。重复声明

let x = 2;
({ x } = { x: 1 });   
console.log(x);    //1

三、对象解构赋值的应用
函数参数的解构赋值

//不使用解构赋值的时候：
const logPersonInfo = user => console.log(user.username, user.age);
logPersonInfo({ username: 'alex', age: 18 });
// alex 18

//使用解构赋值的时候：
const logPersonInfo = ({ age = 0, username = 'ZhangSan' }) =>   //形参
console.log(username, age);    
logPersonInfo({ username: 'alex', age: 18 });
// alex 18

///相当于{ age：age, username:username }={ username: 'alex', age: 18 }