本文操作环境：Windows7系统，ECMAScript 6.0版本，Dell G3电脑。
es6新特性：
1、向对象添加属性
克隆对象，同时向浅)克隆对象添加附加属性，如下代码：
const user = { id: 10, name: 'Tom'}const userWithPass = { ...user, password: 'Password!' }user //=> { id: 10, name: 'Tom' }userWithPass //=> { id: 10, name: 'Tom', password: 'Password!' }
登录后复制
在这个例子里面user克隆成userWithPass，并且userWithPass对象添加了password属性，代码简洁高效。
2、合并对象
我们通过举个例子来说明是如何操作的
const part1 = { id: 10, name: 'Howard Moon' }const part2 = { id: 11, password: 'Password!' }const user1 = { ...part1, ...part2 }//=> { id: 10, name: 'Howard Moon', password: 'Password!' }
登录后复制
在这个例子里面我们将part1和part2合并成一个对象user1，也可以通过以下方式合并对象
const partial = { id: 100, name: 'Howard Moon' }const user = { ...partial, id: 100, password: 'Password!' }user //=> { id: 100, name: 'Howard Moon', password: 'Password!' }
登录后复制
3、删除对象的属性
可以结合REST运算符使用析构来删除属性。
onst noPassword = { password, ...rest }) => restconst user = { id: 100, name: 'Howard Moon', password: 'Password!'}noPassworduser) //=> { id: 100, name: 'Howard moon' }
登录后复制
4、动态删除属性
可以利用对象属性名，然后removeProperty传递属性名称将属性删除
const user1 = { id: 100, name: 'Howard Moon', password: 'Password!'}const removeProperty = prop => { [prop]: _, ...rest }) => rest// ---- ------// /// dynamic destructuringconst removePassword = removeProperty'password')const removeId = removeProperty'id')removePassworduser1) //=> { id: 100, name: 'Howard Moon' }removeIduser1) //=> { name: 'Howard Moon', password: 'Password!' }
登录后复制
5、调整对象属性的位置
有时属性不符合我们所需要的顺序。使用一些技巧，我们可以将属性推到列表的顶部，或者将它们移动到底部，例如：
const user3 = { password: 'Password!', name: 'Naboo', id: 300}const organize = object => { id: undefined, ...object })// -------------// /// move id to the first propertyorganizeuser3)//=> { id: 300, password: 'Password!', name: 'Naboo' }
登录后复制
在这个例子里面将id已到了第一位，下面的例子是将password属性移动到最后一位
const user3 = { password: 'Password!', name: 'Naboo', id: 300}const organize = { password, ...object }) => { ...object, password })// --------// /// move password to last propertyorganizeuser3)//=> { name: 'Naboo', id: 300, password: 'Password!' }
登录后复制
6、默认属性
const user2 = { id: 200, name: 'Vince Noir'}const user4 = { id: 400, name: 'Bollo', quotes: ["I've got a bad feeling about this..."]}const setDefaults = { quotes = [], ...object}) => { ...object, quotes })setDefaultsuser2)//=> { id: 200, name: 'Vince Noir', quotes: [] }setDefaultsuser4)//=> {//=> id: 400,//=> name: 'Bollo',//=> quotes: ["I've got a bad feeling about this..."]//=> }
登录后复制
值得注意的是默认属性值仅在未包含在原始对象中时才会设置，从这个例子的结果来看，我们就知道怎样设置默认值了。或者你也可能需要这样写
const setDefaults = { ...object}) => { quotes: [], ...object })
登录后复制
7、重命名对象的属性
在有些场景，比如我们可能需要修改对象属性的大小写，那么我们可以通过这样的方式来重命名
const renamed = { ID, ...object }) => { id: ID, ...object })const user = {ID: 500,name: "Bob Fossil"}renameduser) //=> { id: 500, name: 'Bob Fossil' }//将大写ID改成了小写的
登录后复制
8、条件属性
这个有时候会非常实用，从名字来看，显示是通过条件来控制对象的属性
const user = { id: 100, name: 'Howard Moon' }const password = 'Password!'const userWithPassword = { ...user, id: 100, ...password && { password })}userWithPassword //=> { id: 100, name: 'Howard Moon', password: 'Password!' }
登录后复制
以上就是es6新特性有哪些的详细内容，更多请关注风君子博客其它相关文章！