利用es6解构赋值处理对象(不改变原始对象)
// 原始对象
const obj1 = {
name: 'CSDN',
slogan: '专业开发者社区',
address: '北京市朝阳区酒仙桥路10号恒通商务园B8B二层',
phone: '010-84770176',
email: 'fawubu@csdn.net'
}
const obj2 = {
department: 'CSDN客服',
phone: '4006600108',
email: 'kefu@csdn.net'
}
1、提取属性
解构赋值的过程:声明变量 → 在对象内搜索同名属性 → 提取属性值赋给变量
// 提取对象内名为name的属性
let { name } = obj1
console.log(name) // 'CSDN'
console.log(obj1) // { name: 'CSDN', slogan: '专业开发者社区', address: '北京市朝阳区酒仙桥路10号恒通商务园B8B二层', phone: '010-84770176', email: 'fawubu@csdn.net' }
2、修改键名(属性重命名)
解构赋值的过程:声明变量(新键名)及原键名 → 在对象内搜索原键名 → 提取属性值赋给变量
// 提取对象内名为slogan的属性,重命名为newSlogan
let { newSlogan:slogan } = obj1
console.log(newSlogan) // '专业开发者社区'
console.log(obj1) // { name: 'CSDN', slogan: '专业开发者社区', address: '北京市朝阳区酒仙桥路10号恒通商务园B8B二层', phone: '010-84770176', email: 'fawubu@csdn.net' }
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: 'fawubu@csdn.net' }
console.log(obj1) // { name: 'CSDN', slogan: '专业开发者社区', address: '北京市朝阳区酒仙桥路10号恒通商务园B8B二层', phone: '010-84770176', email: 'fawubu@csdn.net' }
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) // 'kefu@csdn.net'
console.log(newEmail) // 'fawubu@csdn.net'
console.log(newObj) // { name: 'CSDN', slogan: '专业开发者社区', address: '北京市朝阳区酒仙桥路10号恒通商务园B8B二层' }