利用ES6解构赋值处理对象：提取/删除属性、修改键名/重命名、拷贝对象……

利用es6解构赋值处理对象（不改变原始对象）

// 原始对象
const obj1 = {
  name: 'CSDN',
  slogan: '专业开发者社区',
  address: '北京市朝阳区酒仙桥路10号恒通商务园B8B二层',
  phone: '010-84770176',
  email: '[email protected]'
}
const obj2 = {
  department: 'CSDN客服',
  phone: '4006600108',
  email: '[email protected]'
}

1、提取属性

解构赋值的过程：声明变量 → 在对象内搜索同名属性 → 提取属性值赋给变量

// 提取对象内名为name的属性
let { name } = obj1
console.log(name)  // 'CSDN'
console.log(obj1)  // { name: 'CSDN', slogan: '专业开发者社区', address: '北京市朝阳区酒仙桥路10号恒通商务园B8B二层', phone: '010-84770176', email: '[email protected]' }

2、修改键名（属性重命名）

解构赋值的过程：声明变量（新键名）及原键名 → 在对象内搜索原键名 → 提取属性值赋给变量

// 提取对象内名为slogan的属性，重命名为newSlogan
let { newSlogan:slogan } = obj1
console.log(newSlogan)  // '专业开发者社区'
console.log(obj1)  // { name: 'CSDN', slogan: '专业开发者社区', address: '北京市朝阳区酒仙桥路10号恒通商务园B8B二层', phone: '010-84770176', email: '[email protected]' }

3、删除属性/拷贝对象

解构赋值的过程：声明变量（新对象） → 排除已提取的属性 → 将剩余属性拷贝为新对象

// 删除属性name、slogan，拷贝为新对象newObj
let { name, newSlogan:slogan, ...newObj } = obj1
console.log(name)  // 'CSDN'
console.log(newSlogan)  // '专业开发者社区'
console.log(newObj)  // { address: '北京市朝阳区酒仙桥路10号恒通商务园B8B二层', phone: '010-84770176', email: '[email protected]' }
console.log(obj1)  // { name: 'CSDN', slogan: '专业开发者社区', address: '北京市朝阳区酒仙桥路10号恒通商务园B8B二层', phone: '010-84770176', email: '[email protected]' }

4、处理多个对象/属性

• 若需声明局部变量 且 提取属性不重名，可使用let（不可重复声明）

let { phone, newEmail:email, ...newObj } = obj1
let { phone, email } = obj2
// × Uncaught SyntaxError: Identifier 'phone' has already been declared.

• 若不考虑作用域冲突 或 提取属性有重名，可使用var（可重复声明）

var { phone, newEmail:email, ...newObj } = obj1
var { phone, email } = obj2
console.log(phone)  // '4006600108'
console.log(email)  // '[email protected]'
console.log(newEmail)  // '[email protected]'
console.log(newObj)  // { name: 'CSDN', slogan: '专业开发者社区', address: '北京市朝阳区酒仙桥路10号恒通商务园B8B二层' }