JavaScript オブジェクト Rest と Spread を使用するためのヒント (コード付き)

この記事の内容は、JavaScript オブジェクト Rest と Spread の使い方スキル (コード付き) に関するもので、一定の参考価値がありますので、困っている方は参考にしていただければ幸いです。

Rest 演算子と Spread 演算子は、パラメーターを休ませたり配列を展開したりするだけではなく、それ以外にも使用できます。

ここでは、JavaScript オブジェクトで REST と SPREAD を使用するための、あまり知られていない 7 つのヒントを紹介します。

プロパティの追加

オブジェクトのクローンを作成しながら、(浅い) クローン作成されたオブジェクトに追加のプロパティを追加します。

この例では、ユーザーが複製され、パスワード属性が 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 つのオブジェクトを新しいオブジェクトにマージします。

Part1 と Part2 を user1 にマージします。

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

オブジェクト属性の除外

属性は、残りの部分と組み合わせて構造化を使用して削除できます。オペレーター。ここでは、パスワードが削除され、残りの属性が残りとして返されます。

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

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

動的除外プロパティ

関数はパラメータとして prop を受け取ります。計算されたオブジェクトのプロパティ名を使用して、クローンからプロパティを動的に削除できます。

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: unknown を追加します。

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

パスワードを最後のプロパティに移動するには、オブジェクトからパスワードを分解します。次に、Rest 演算子を使用した後にパスワード属性をリセットします。

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

デフォルト プロパティ

デフォルト プロパティは、元のオブジェクトに含まれていない場合にのみ設定される値です。

この例では、user2 には quotes 属性が含まれていません。 setdefaults 関数は、すべてのオブジェクトに quotes 属性が設定されていることを確認します。そうでない場合は、[] に設定されます。

setDefaults (user2) を呼び出すと、戻り値には引用符属性 [] が含まれます。

setDefaults (user4) を呼び出す場合、user4 はすでに quotes 属性を持っているため、この属性は変更されません。

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 を分解し、オブジェクトが Spread のときにそれを ID として追加し直します。

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

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

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

ボーナス: 条件付き属性の追加

属性を条件付きで追加できることを指摘してくれた @vinialbano に感謝します。この例では、パスワードが true の場合にのみパスワードが追加されます。

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 中国語 Web サイトの JavaScript チュートリアル ビデオ 列に注目してください。

以上がJavaScript オブジェクト Rest と Spread を使用するためのヒント (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。