JS ES6 スプレッド演算子の魔法のような使い方

JS ES6 スプレッド演算子の魔法のような使い方

1. 属性を追加する

オブジェクトをコピーすると、新しいプロパティが追加されます。

この例では、ユーザー オブジェクトを userWithPass にコピーし、パスワード プロパティを追加します。

const ユーザー = { id: 110, 名前: 'Kayson Li'}
const userWithPass = { ...user, password: 'パスワード!' }

ユーザー //=> { id: 110、名前: 'Kayson Li'}
userWithPass //=> { id: 110、 name: 'Kayson Li'、 password: 'パスワード!' }

2. 複数のオブジェクトを結合する

... を使用すると、複数のオブジェクトを新しいオブジェクトに結合することができます。 part1 と part2 を user1 にマージします。

const part1 = { id: 110, name: 'ケイソン・リー' }
const part2 = { id: 110, password: 'パスワード!' }

定数 user1 = { ...part1, ...part2 }
//=> { id: 110、 name: 'Kayson Li'、 password: 'パスワード!' }

3. オブジェクトのプロパティを削除する

オブジェクトからプロパティを削除するには、構造化分解を REST 演算子と組み合わせて使用​​できます。この例では、パスワードが分解され、他の属性が REST オブジェクトに保持されて返されます。

const noPassword = ({ パスワード、...rest }) => rest
定数ユーザー = {
  id: 110,
  名前: 'ケイソン・リー'、
  パスワード: 'パスワード!'
}

noPassword(user) //=> { id: 110, name: 'Kayson Li' }

4. 属性を動的に削除する

例を見てみましょう。 removeProperty 関数は、パラメータ prop を受け入れます。動的プロパティ名機能を使用すると、コピーされたオブジェクトから prop を動的に削除できます。

定数user1 = {
  id: 110,
  名前: 'ケイソン・リー'、
  パスワード: 'パスワード!'
}
const removeProperty = prop => ({ [prop]: _, ...rest }) => rest
// ---- ------
// \ /
// 動的分解 const removePassword = removeProperty('password')
定数removeId = removeProperty('id')

removePassword(user1) //=> { id: 110, name: 'Kayson Li' }
removeId(user1) //=> { name: 'Kayson Li', password: 'パスワード!' }

5. 属性の順序を調整する

オブジェクトのプロパティが希望どおりの順序になっていない場合があります。いくつかのトリックを使用すると、属性を前面または背面に移動できます。

id を先頭に移動するには、展開されたオブジェクトの前に id: undefined を配置します。

定数user3 = {
  パスワード: 'パスワード!',
  名前: 'ブルース'、
  id: 300
}

const 整理 = オブジェクト => ({ id: undefined, ... オブジェクト })
// -------------
// /
// id を最初の属性位置に移動する organize(user3)
//=> { id: 300, password: 'パスワード!', name: 'Bruce' }

パスワードを最後の位置に移動するには、まずオブジェクトからパスワードを分解し、展開されたオブジェクトの後にパスワードを配置します。

定数user3 = {
  パスワード: 'パスワード!',
  名前:「ブルース」
  id: 300
}

const organize = ({ パスワード, ...オブジェクト }) =>
  ({ ...オブジェクト, パスワード })
//--------
// /
// パスワードを末尾に移動する organize(user3)
//=> { name: 'Bruce'、 id: 300、 password: 'パスワード!' }

6. プロパティのデフォルト値を設定する

オブジェクトに特定の属性がない場合、その属性をオブジェクトに追加してデフォルト値を設定する必要がある場合があります。

たとえば、user2 には引用符属性がありません。setDefaults 関数の目的は、すべてのオブジェクトに引用符が付いており、デフォルト値 [] があることを確認することです。

setDefaults(user2) を実行すると、返されるオブジェクトに引用符 [] が含まれます。

setDefaults(user4) を実行します。user4 にはすでに引用符が付いているため、変更されません。

定数user2 = {
  id: 200,
  名前: 'ジャック・マー'
}

定数user4 = {
  id: 400,
  名前: '魯迅'、
  引用: ["私はそんなことは言っていない..."]
}

const setDefaults = ({ quotes = [], ...object}) =>
  ({ ...オブジェクト、引用符 })

デフォルト設定(ユーザー2)
//=> { id: 200、名前: 'ジャック・マー'、引用符: [] }

デフォルト設定(user4)
//=> {
//=> id: 400,
//=> 名前: '魯迅',
//=> 引用: ["私はそんなことは言っていません..."]
//=> }

この属性を先頭に置きたい場合は、次のように記述します。

const setDefaults = ({ ...オブジェクト}) => ({ 引用符: [], ...オブジェクト })

7: 属性名の変更

これまでの手法を組み合わせることで、属性の名前を変更する関数を作成できます。

一部のオブジェクトに大文字の ID 属性があり、それを小文字に変更したいとします。どうすればよいでしょうか?まず、オブジェクトから ID 値を分解し、この値を新しいオブジェクトにマージして小文字の ID に変更します。

const の名前が変更されました = ({ ID, ...object }) => ({ id: ID, ...object })

定数ユーザー = {
  ID: 500,
  名前: 「張全丹」
}

renamed(user) //=> { id: 500, name: '张全蛋' }

8. 他にも素晴らしい手術がある

条件に基づいて特定の属性を追加するかどうかを決定できます。これは、リクエスト パラメータを構築するときに非常に便利です。たとえば、パスワードに値がある場合にのみこの属性を追加します。

const ユーザー = { id: 110, 名前: 'ケイソン・リー' }
const password = 'パスワード!'
定数userWithPassword = {
  ...ユーザー、
  id: 100,
  ...(パスワード && { パスワード })
}

userWithPassword //=> { id: 110、 name: 'Kayson Li'、 password: 'パスワード!' }

上記は、JS ES6 スプレッド演算子のいくつかの素晴らしい使用方法の詳細です。JS ES6 スプレッド演算子の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JavaScript ES6 分割演算子の理解と応用
  • シンプルなカルーセルの最も完全なコード分析を実装するJavaScript(ES6オブジェクト指向)
  • シンプルなショッピングカートの最も完全なコード分析を実装する JavaScript (ES6 オブジェクト指向)
  • JavaScript es6 における var、let、const の違いの詳細な説明
  • JS における ES6 継承と ES5 継承の違い
  • Node.jsがES6モジュールを処理する方法の詳細な説明
  • JS ES6コーディング標準の詳細な説明
  • JSでES6クラスの使い方をすぐにマスター
  • JS ES6 変数分割代入の詳細な説明
  • フロントエンドJavaScript ES6の詳細について

<<:  Windows システムに mysql5.7.21 をインストールするための詳細なチュートリアル

>>:  docker mysqlの起動時に初期化SQLを実行する

推薦する

ベースタグとは何ですか? また、それは何をするのですか?

<base> タグは、ページ上のすべてのリンクのデフォルトのアドレスまたはデフォルトの...

MySQL 5.6.37 (zip) ダウンロード インストール 構成 グラフィック チュートリアル

この記事では、MySQL 5.6.37のダウンロード、インストール、設定のチュートリアルを参考までに...

個人ブログシステムを構築するためのDockerの超シンプルな実装

Dockerをインストールするyumパッケージを最新バージョンに更新します: sudo yum up...

JS はシンプルなカレンダー効果を実装します

この記事では、シンプルなカレンダー効果を実現するためのJSの具体的なコードを参考までに紹介します。具...

MySQL での and or クエリの優先度分析

これは見落とされがちな問題かもしれません。まず、次の点を明確にする必要があります。 MySQL では...

Vue3のレスポンシブ原則の詳細な説明

目次Vue2 レスポンシブ原則のレビューVue3 レスポンシブ原則の分析ネストされたオブジェクトの応...

MySQL での or ステートメントの使用例

1. MySQL での or 構文の使用、および MySQL 構文で or を使用する際の注意点。 ...

MySQLデータのバックアップ方法の選択と考え方

目次1. rsync、cpでファイルをコピーする2. xxxをoutfile構文に選択する3. 遅延...

MySQL の時間タイプとモードの詳細

目次1. MySQL の時刻型2. タイムゾーンを確認する3. 不正な時間値4. 厳密モード5. 事...

ウェブデザイン経験

<br />著者はかつてWebデザインの初心者でしたが、継続的な探求と実践を通じて、今で...

ウェブページの内部アンカーポイントを実現するための純粋なCSSの上下オフセットコード例

最近、「フットボール ナビゲーション」Web サイトに取り組んでいるときに、上部の固定ナビゲーション...

Nginx は動的と静的の分離を実装します 例の説明

ウェブサイトの解析を高速化するために、動的ページと静的ページを異なるサーバーで解析して、解析速度を向...

Webデザインの経験:ナビゲーションシステムをシンプルにする

<br />友人と話し合っていたとき、フレームワークのレイヤー設計の中で最も核となるのは...

VS2022 リモート デバッグ ツールの使い方

WeChat 関連サービスをデバッグする場合など、職場のサーバー環境でリモートデバッグを行う必要があ...

この SQL 書き込み方法では本当にインデックスが失敗するのでしょうか?

序文インターネット上には、MySQL でインデックスにヒットできないさまざまな状況をまとめた記事がよ...