JS ES 6は演算子のいくつかの妙味を展開します。
1.属性の追加
オブジェクトをコピーしながら、新しい属性を追加します。
例では、userオブジェクトをuser WithPassにコピーし、password属性を追加しました。
を使用して、複数のオブジェクトを新たなオブジェクトに統合することができます。part 1とpart 2をアメリカに統合する:
解と残りの操作子を使用してオブジェクトの属性を削除することができます。例ではpasswordは解凍され、他の属性はrestオブジェクトに保持されて返されます。
一例を見る。removeProperty関数は、1つのパラメータpropを受け入れ、動的属性名という特性を利用して、propをコピーオブジェクトから動的に除去することができる。
オブジェクトの属性は私たちが望む順序ではない場合があります。いくつかの技術を利用して、属性を一番前または一番後ろに移動できます。
IDを一番前に移動するために、id:undefinedを展開するobjectの前に置くことができます。
オブジェクトに属性が存在しない場合は、オブジェクトにこの属性を追加し、デフォルトの値を設定する必要があります。
例えば、user 2にはquot tes属性がありません。set Defaults関数の役割は、すべてのオブジェクトにquotがあることを確認し、標準値[]があります。
set Defaults(user 2)を実行します。戻る対象はquot ts:[]を含みます。
set Defaultsを実行します。アメリカにはすでにquot tesがありますので、それはそのままです。
前のいくつかのテクニックを組み合わせて、属性の名前を変更する関数を書くことができます。
いくつかのオブジェクトが大文字のID属性を持っていると仮定して、それらを小文字にしたいですが、どうすればいいですか?まず、objectからIDの値を解凍してから、この値を新たなオブジェクトに統合して、小文字のidに変更します。
条件によって属性を追加するかどうかを決定することができます。これはパラメータを要求するときに非常に有用です。例えば、私達はpasswordに値がある場合のみこの属性を追加します。
オブジェクトをコピーしながら、新しい属性を追加します。
例では、userオブジェクトをuser WithPassにコピーし、password属性を追加しました。
const user = { id: 110, name: 'Kayson Li'}
const userWithPass = { ...user, password: 'Password!' }
user //=> { id: 110, name: 'Kayson Li'}
userWithPass //=> { id: 110, name: 'Kayson Li', password: 'Password!' }
2.複数のオブジェクトを統合するを使用して、複数のオブジェクトを新たなオブジェクトに統合することができます。part 1とpart 2をアメリカに統合する:
const part1 = { id: 110, name: 'Kayson Li' }
const part2 = { id: 110, password: 'Password!' }
const user1 = { ...part1, ...part2 }
//=> { id: 110, name: 'Kayson Li', password: 'Password!' }
3.オブジェクトの属性を削除する解と残りの操作子を使用してオブジェクトの属性を削除することができます。例ではpasswordは解凍され、他の属性はrestオブジェクトに保持されて返されます。
const noPassword = ({ password, ...rest }) => rest
const user = {
id: 110,
name: 'Kayson Li',
password: 'Password!'
}
noPassword(user) //=> { id: 110, name: 'Kayson Li' }
4.動的削除属性一例を見る。removeProperty関数は、1つのパラメータpropを受け入れ、動的属性名という特性を利用して、propをコピーオブジェクトから動的に除去することができる。
const user1 = {
id: 110,
name: 'Kayson Li',
password: 'Password!'
}
const removeProperty = prop => ({ [prop]: _, ...rest }) => rest
// ---- ------
// \ /
//
const removePassword = removeProperty('password')
const removeId = removeProperty('id')
removePassword(user1) //=> { id: 110, name: 'Kayson Li' }
removeId(user1) //=> { name: 'Kayson Li', password: 'Password!' }
5.属性の順序を調整するオブジェクトの属性は私たちが望む順序ではない場合があります。いくつかの技術を利用して、属性を一番前または一番後ろに移動できます。
IDを一番前に移動するために、id:undefinedを展開するobjectの前に置くことができます。
const user3 = {
password: 'Password!',
name: 'Bruce',
id: 300
}
const organize = object => ({ id: undefined, ...object })
// -------------
// /
// id
organize(user3)
//=> { id: 300, password: 'Password!', name: 'Bruce' }
passwordを最後の位置に移動するには、まずobjectからpasswordを解凍してから、passwordをオープンobjectの後ろに置く:
const user3 = {
password: 'Password!',
name: 'Bruce',
id: 300
}
const organize = ({ password, ...object }) =>
({ ...object, password })
// --------
// /
// password
organize(user3)
//=> { name: 'Bruce', id: 300, password: 'Password!' }
6.属性のデフォルトを設定するオブジェクトに属性が存在しない場合は、オブジェクトにこの属性を追加し、デフォルトの値を設定する必要があります。
例えば、user 2にはquot tes属性がありません。set Defaults関数の役割は、すべてのオブジェクトにquotがあることを確認し、標準値[]があります。
set Defaults(user 2)を実行します。戻る対象はquot ts:[]を含みます。
set Defaultsを実行します。アメリカにはすでにquot tesがありますので、それはそのままです。
const user2 = {
id: 200,
name: 'Jack Ma'
}
const user4 = {
id: 400,
name: ' ',
quotes: [" ……"]
}
const setDefaults = ({ quotes = [], ...object}) =>
({ ...object, quotes })
setDefaults(user2)
//=> { id: 200, name: 'Jack Ma', quotes: [] }
setDefaults(user4)
//=> {
//=> id: 400,
//=> name: ' ',
//=> quotes: [" ……"]
//=> }
この属性を一番前にしたいなら、こう書いてもいいです。
const setDefaults = ({ ...object}) => ({ quotes: [], ...object })
7:属性の名前変更前のいくつかのテクニックを組み合わせて、属性の名前を変更する関数を書くことができます。
いくつかのオブジェクトが大文字のID属性を持っていると仮定して、それらを小文字にしたいですが、どうすればいいですか?まず、objectからIDの値を解凍してから、この値を新たなオブジェクトに統合して、小文字のidに変更します。
const renamed = ({ ID, ...object }) => ({ id: ID, ...object })
const user = {
ID: 500,
name: " "
}
renamed(user) //=> { id: 500, name: ' ' }
8.もっと素晴らしい操作があります。条件によって属性を追加するかどうかを決定することができます。これはパラメータを要求するときに非常に有用です。例えば、私達はpasswordに値がある場合のみこの属性を追加します。
const user = { id: 110, name: 'Kayson Li' }
const password = 'Password!'
const userWithPassword = {
...user,
id: 100,
...(password && { password })
}
userWithPassword //=> { id: 110, name: 'Kayson Li', password: 'Password!' }
以上はJS ES 6が演算子を展開するためのいくつかの使い道の詳細です。JS ES 6について演算子を展開する資料は他の関連記事に注目してください。