[訳]JavaScriptオブジェクトのResetとSpreadを使用する7つのテクニック

[訳]JavaScriptオブジェクトのResetとSpreadを使用する7つのテクニック

原作者:Joel Thoms

原文タイトル:7 Tricks with Reting and Spreading JavaScript Object

原文:blog.bitsrc.io/6-tricks-wi…

ResetおよびSpreadオペレータは、モザイクおよび拡張配列を取得するためだけに使用することができない.
以下はJavaScript対象に対して、ResetとSpreadを使う時の7つの珍しいテクニックです.
属性を追加
オブジェクトをクローンしながら追加の属性を(浅い)クローンオブジェクトに追加します.
この例では、userはクローンされ、password属性はuserWithPassに追加される.

const user = { id: 100, name: 'Howard Moon'}
const userWithPass = { ...user, password: 'Password!' }

user //=> { id: 100, name: 'Howard Moon' }
userWithPass //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

オブジェクトの結合
2つのオブジェクトを新しいオブジェクトに統合します.
Part 1とPart 2をuser 1に統合する.

const part1 = { id: 100, name: 'Howard Moon' }
const part2 = { id: 100, password: 'Password!' }

const user1 = { ...part1, ...part2 }
//=> { id: 100, name: 'Howard Moon', password: 'Password!' }

オブジェクトは以下の構文マージを使用することもできます.

const partial = { id: 100, name: 'Howard Moon' }
const user = { ...partial, id: 100, password: 'Password!' }

user //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

オブジェクトの属性を削除
アンチエイリアス演算子を使用して属性を削除することができます.ここでは、passwordは削除され、残りの属性はリセットとして返されます.

const noPassword = ({ password, ...rest }) => rest
const user = {
  id: 100,
  name: 'Howard Moon',
  password: 'Password!'
}

noPassword(user) //=> { id: 100, name: 'Howard moon' }

動的排除属性
関数はパラメータとしてプロップを受け入れます.オブジェクト属性名を計算することで、クローンから属性を動的に削除できます.

const user1 = {
  id: 100,
  name: 'Howard Moon',
  password: 'Password!'
}
const removeProperty = prop => ({ [prop]: _, ...rest }) => rest
//                     ----       ------
//                          \   /
//                dynamic destructuring

const removePassword = removeProperty('password')
const removeId = removeProperty('id')

removePassword(user1) //=> { id: 100, name: 'Howard Moon' }
removeId(user1) //=> { name: 'Howard Moon', password: 'Password!' }

属性を並べ替える
時々性質は私達の必要な順序によって並ばないことがあります.いくつかの技術を使って、私達は属性をリストのトップに押し上げることができます.あるいはそれらを最後の部分に移動します.
IDを最初の位置に移動する場合は、拡張オブジェクトの前にid: undefinedを新たなObjectの先頭に追加します.

const user3 = {
  password: 'Password!',
  name: 'Naboo',
  id: 300
}

const organize = object => ({ id: undefined, ...object })
//                            -------------
//                          /
//  move id to the first property

organize(user3)
//=> { id: 300, password: 'Password!', name: 'Naboo' }

パスワードを最後の属性に移動する場合は、オブジェクトからパスワードを構築してください.その後、Resetオペレータを使用して、password属性を再設定します.

const user3 = {
  password: 'Password!',
  name: 'Naboo',
  id: 300
}

const organize = ({ password, ...object }) =>
  ({ ...object, password })
//              --------
//             /
// move password to last property

organize(user3)
//=> { name: 'Naboo', id: 300, password: 'Password!' }

標準の属性
デフォルトの属性は元のオブジェクトに含まれていない場合にのみ設定されます.
この例では、user 2にはquot tes属性が含まれていません.set defaults関数は、すべてのオブジェクトにquotの属性が設定されていることを確認します.そうでないと[]に設定されます.
set Defaultsを呼び出すと、戻り値はquot属性を含みます.[].
set Defaults(user 4)を呼び出した時に、user 4はすでに「tes」属性を持っていますので、この属性は変更されません.

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

属性の名前変更
上記の技術を結合することで、属性の名前を変更する関数を作成できます.
いくつかの大文字IDのオブジェクト属性名が小文字のIDであるべきだと仮定する.まず、オブジェクトからIDを解凍し、オブジェクトSpreadにidとして追加します.

const renamed = ({ ID, ...object }) => ({ id: ID, ...object })

const user = {
  ID: 500,
  name: "Bob Fossil"
}

renamed(user) //=> { id: 500, name: 'Bob Fossil' }

付贈:条件属性を追加する@vinialbanoに感謝します.属性を条件付きで追加することもできます.この例では、passwordが真実であるときだけ、passwordを追加します.

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!' }

要約
私はいくつかのよく知られていないSpreadとResetの技術をリストしてみましたが、もしあなたが何かを知っているなら、ここにランクしていません.コメントエリアで誰でも知っています.新しいことを学んだら、Twitterで友達と共有してください.本当に助かります.
ここかツイッター@joelnetで私に注目してください.
転載先:https://juejin.im/post/5c942c516fb9a070ad50428a