この記事の内容は、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 サイトの他の関連記事を参照してください。