es6新特性有哪些-masalah biasa-php.cn

es6新特性有哪些

coldplay.xixi

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

asal

106091 orang telah melayarinya

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

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; }

Salin selepas log masuk

在这个例子里面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; }

Salin selepas log masuk

在这个例子里面我们将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; }

Salin selepas log masuk

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; }

Salin selepas log masuk

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; }

Salin selepas log masuk

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; }

Salin selepas log masuk

在这个例子里面将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; }

Salin selepas log masuk

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..."]//=> }

Salin selepas log masuk

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

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

Salin selepas log masuk

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改成了小写的

Salin selepas log masuk

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; }

Salin selepas log masuk

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

Atas ialah kandungan terperinci es6新特性有哪些. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!