What are the new features of es6-Common Problem-php.cn

What are the new features of es6

coldplay.xixi

Release： 2023-01-13 00:32:58

Original

106090 people have browsed it

es6新特性：1、向对象添加属性；2、合并对象；3、删除对象的属性；4、动态删除属性；5、调整对象属性的位置；6、默认属性；7、重命名对象的属性；8、条件属性。

What are the new features of es6

本文操作环境：Windows7系统，ECMAScript 6.0版本，Dell G3电脑。

es6新特性：

1、向对象添加属性

克隆对象，同时向(浅)克隆对象添加附加属性，如下代码：

const user = { id: 10, name: &#39;Tom&#39;}const userWithPass = { ...user, password: &#39;Password!&#39; }user //=> { id: 10, name: &#39;Tom&#39; }userWithPass //=> { id: 10, name: &#39;Tom&#39;, password: &#39;Password!&#39; }

Copy after login

在这个例子里面user克隆成userWithPass，并且userWithPass对象添加了password属性，代码简洁高效。

2、合并对象

我们通过举个例子来说明是如何操作的

const part1 = { id: 10, name: &#39;Howard Moon&#39; }const part2 = { id: 11, password: &#39;Password!&#39; }const user1 = { ...part1, ...part2 }//=> { id: 10, name: &#39;Howard Moon&#39;, password: &#39;Password!&#39; }

Copy after login

在这个例子里面我们将part1和part2合并成一个对象user1，也可以通过以下方式合并对象

const partial = { id: 100, name: &#39;Howard Moon&#39; }const user = { ...partial, id: 100, password: &#39;Password!&#39; }user //=> { id: 100, name: &#39;Howard Moon&#39;, password: &#39;Password!&#39; }

Copy after login

3、删除对象的属性

可以结合REST运算符使用析构来删除属性。

onst noPassword = ({ password, ...rest }) => restconst user = { id: 100, name: &#39;Howard Moon&#39;, password: &#39;Password!&#39;}noPassword(user) //=> { id: 100, name: &#39;Howard moon&#39; }

Copy after login

4、动态删除属性

可以利用对象属性名，然后removeProperty传递属性名称将属性删除

const user1 = { id: 100, name: &#39;Howard Moon&#39;, password: &#39;Password!&#39;}const removeProperty = prop => ({ [prop]: _, ...rest }) => rest// ---- ------//  /// dynamic destructuringconst removePassword = removeProperty(&#39;password&#39;)const removeId = removeProperty(&#39;id&#39;)removePassword(user1) //=> { id: 100, name: &#39;Howard Moon&#39; }removeId(user1) //=> { name: &#39;Howard Moon&#39;, password: &#39;Password!&#39; }

Copy after login

5、调整对象属性的位置

有时属性不符合我们所需要的顺序。使用一些技巧，我们可以将属性推到列表的顶部，或者将它们移动到底部，例如：

const user3 = { password: &#39;Password!&#39;, name: &#39;Naboo&#39;, id: 300}const organize = object => ({ id: undefined, ...object })// -------------// /// move id to the first propertyorganize(user3)//=> { id: 300, password: &#39;Password!&#39;, name: &#39;Naboo&#39; }

Copy after login

在这个例子里面将id已到了第一位，下面的例子是将password属性移动到最后一位

const user3 = { password: &#39;Password!&#39;, name: &#39;Naboo&#39;, id: 300}const organize = ({ password, ...object }) => ({ ...object, password })// --------// /// move password to last propertyorganize(user3)//=> { name: &#39;Naboo&#39;, id: 300, password: &#39;Password!&#39; }

Copy after login

6、默认属性

const user2 = { id: 200, name: &#39;Vince Noir&#39;}const user4 = { id: 400, name: &#39;Bollo&#39;, quotes: ["I&#39;ve got a bad feeling about this..."]}const setDefaults = ({ quotes = [], ...object}) => ({ ...object, quotes })setDefaults(user2)//=> { id: 200, name: &#39;Vince Noir&#39;, quotes: [] }setDefaults(user4)//=> {//=> id: 400,//=> name: &#39;Bollo&#39;,//=> quotes: ["I&#39;ve got a bad feeling about this..."]//=> }

Copy after login

值得注意的是默认属性值仅在未包含在原始对象中时才会设置，从这个例子的结果来看，我们就知道怎样设置默认值了。或者你也可能需要这样写

const setDefaults = ({ ...object}) => ({ quotes: [], ...object })

Copy after login

7、重命名对象的属性

在有些场景，比如我们可能需要修改对象属性的大小写，那么我们可以通过这样的方式来重命名

const renamed = ({ ID, ...object }) => ({ id: ID, ...object })const user = {ID: 500,name: "Bob Fossil"}renamed(user) //=> { id: 500, name: &#39;Bob Fossil&#39; }//将大写ID改成了小写的

Copy after login

8、条件属性

这个有时候会非常实用，从名字来看，显示是通过条件来控制对象的属性

const user = { id: 100, name: &#39;Howard Moon&#39; }const password = &#39;Password!&#39;const userWithPassword = { ...user, id: 100, ...(password && { password })}userWithPassword //=> { id: 100, name: &#39;Howard Moon&#39;, password: &#39;Password!&#39; }

Copy after login

相关视频推荐：PHP视频教程

The above is the detailed content of What are the new features of es6. For more information, please follow other related articles on the PHP Chinese website!