es6の新機能は何ですか

es6 の新機能: 1. オブジェクトへの属性の追加; 2. オブジェクトの結合; 3. オブジェクトの属性の削除; 4. 属性の動的削除; 5. オブジェクト属性の位置の調整; 6. デフォルトの属性; 7 . オブジェクトのプロパティの名前を変更します; 8. 条件付きプロパティ。

この記事の動作環境: Windows 7 システム、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!' }

この例では、ユーザーが userWithPass にクローンされ、パスワード属性が userWithPass オブジェクトに追加されます。コードはシンプルで効率的です。 。

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!'}noPassword(user) //=> { 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')removePassword(user1) //=> { id: 100, name: 'Howard Moon' }removeId(user1) //=> { 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 propertyorganize(user3)//=> { id: 300, password: 'Password!', name: 'Naboo' }

この例では、ID が最初の位置に移動されています。次の例は移動します)最後の桁まで

const user3 = { password: 'Password!', name: 'Naboo', id: 300}const organize = ({ password, ...object }) => ({ ...object, password })// --------// /// move password to last propertyorganize(user3)//=> { 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 })setDefaults(user2)//=> { id: 200, name: 'Vince Noir', quotes: [] }setDefaults(user4)//=> {//=> 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"}renamed(user) //=> { 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!' }

関連ビデオの推奨事項:PHP ビデオ チュートリアル

以上がes6の新機能は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。