序文: 1. 魔法の拡張演算子
1. 配列をコピーする定数arr = [1, 2, 3, 4] 定数 newArr = [...arr] console.log(newArr) // [1, 2, 3, 4] 2. 配列を結合する定数numArr = [1, 2, 3, 4] 定数 alphaArr = ['a', 'b', 'c'] const newArr = [...numArr, ...alphaArr] console.log(newArr) // [1, 2, 3, 4, 'a', 'b', 'c'] 3. オブジェクトを展開する定数長方形 = { 幅: 10, 高さ: 10 } const 立方体 = { ...長方形、長さ: 7 } console.log(cube) // {幅: 10、高さ: 10、長さ: 7} 2. nullチェックを実行する最良の方法最初に書いた null チェック コードを覚えていますか? JavaScript が今日ほど進んでいなかった頃、私は古いコードで次のように書いていました。 foo !== null && foo !== undefined) の場合 { } その後、単純なifによって私の命は救われました! もし(foo){} 条件値 foo が次の値のいずれでもない限り、真になります。
単純なifに加えて、現代の 1. オプション連鎖演算子オプションの連鎖演算子は、ネストされたオブジェクトのプロパティにアクセスする安全な方法です。つまり、オブジェクト プロパティの長いリストにアクセスするときに、複数の null チェックを実行する必要はありません。オプションの連鎖演算子を使用すると、存在しない可能性のあるオブジェクトのプロパティにアクセスするときに、式が短く簡潔になります。 次の例では、顧客の住所の郵便番号が null かどうかを確認します。 定数クライアント = { 名前: '劉星'、 住所: 郵便番号: '1234' } } // 古い値メソッド if (client && client.address && client.address.zipcode) {} // オプションチェーンへのより現代的なアプローチ if (client?.address?.zipcode) {} 2. ヌル合体演算子ヌル合体演算子 ( ?? ) は、左のオペランドが null または const defaultMessage = 'こんにちは、JavaScript の Zen' const msg = defaultMessage ?? 'こんにちは、Liu Xing'; console.log(msg); // こんにちは、JavaScript の Zen'
順番に使用するとさらに強力になります。 console.log(firstName ?? lastName ?? '匿名') この例では、 3. .map()、.reduce()、.filter() の使用次に、関数型プログラミングとリアクティブプログラミングの強力なテクニックについてお話ししましょう。数年前に初めて使用したとき、本当に新しい扉が開かれたような気がしました。 この簡潔なコードを見るたびに、その美しさに感動します。 今日は、最もよく使用される 3 つのメソッド、map、reduce、filter の例を紹介します。 COVIDが流行する前、私たちはパリに休暇で行きました。それで彼らはスーパーマーケットに行っていくつかのものを買いました。彼らは食料や日用品を購入しました。しかし、すべての品目はユーロで表示されており、顧客は各品目の価格と食事の合計金額を人民元で知りたいと考えています。 1ユーロは7.18日本円に相当します。 従来の方法では、古典的なループを使用してこれを実行します。 定数項目 = [ { 名前: 'パイナップル'、 価格: 2, タイプ: '食べ物' }, { 名前: 「牛肉」 価格: 20, タイプ: '食べ物' }, { 名前: 「弁護士」 価格: 1, タイプ: '食べ物' }, { 名前: 「シャンプー」 価格: 5, タイプ: 'その他' } ] 合計を0とする const itemsInYuan = [] (i = 0 とします; i < items.length; i++) { 定数項目 = 項目[i] アイテム価格 *= 7.18 itemsInYuan.push(アイテム) if (item.type === 'food') { 合計 += 商品.価格 } } console.log(元のアイテム) /* [ { 名前: 'パイナップル'、価格: 14.36、タイプ: '食品' }, { 名前: '牛肉'、価格: 143.6、タイプ: '食品' }, { 名前: 'アドボケート'、価格: 7.18、タイプ: '食品' }, { 名前: 'シャンプー'、価格: 35.9、タイプ: 'その他' } ] */ コンソール.log(合計) // 165.14 ここで、JavaScript が提供する関数型プログラミング手法を使用してこの計算を実装してみましょう。 const itemsInYuan = items.map(item => { const itemInYuan = { ...item } アイテムの元価格 *= 7.18 返品商品(元) }) const sum = itemsInYuan.filter(item => item.type === 'food').reduce((total, item) => total + item.price, 0) 上記の例では、 map メソッドを使用してユーロを円に変換し、 filter を使用して食品以外の項目を除外し、 Reduce を使用して価格の合計を計算します。 これで、JavaScript を学ぶ際に知っておくべき 3 つのヒントについての記事は終了です。より関連性の高い JavaScript のヒントについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: 適応レイアウトの処理について(フロートとマージンネガティブマージンを使用)
ファイルとは何ですか?すべてのファイルは実際には文字列のストリームですが、適切な解析方法を使用すると...
目次ネスティング親子コンポーネント通信ブラザーコンポーネント通信撤回するReact の Linked...
1. 基本的な Spring-boot クイックスタート1.1 クイックスタート pom.xml は...
目次JavaScriptでは、通常、次のコードのようにクラスを簡単に定義できます。 var サンプル...
背景今日、CodePen を閲覧していたところ、非常に興味深い効果を見つけました。 CodePen ...
方法 1: readonly 属性を true に設定します。入力値=読み取り専用 readOnly...
自動検出を行う際には、ポートなどの情報を取得してjson形式で返すスクリプトが必ず存在します。Red...
目次序文最適化変数の抽出二次包装 el-tag コンポーネント使用要約する序文バックエンドシステムの...
in() の ID の順序に従った Mysql クエリ結果の順序の詳細な説明コード例: <se...
プロジェクトでは、何らかの不可逆的な理由により、テーブルに保存されたデータがページの表示要件を満たす...
1. 前提条件インポートには require.context メソッドを使用します。vite で作成...
デフォルトでは、コンテナ内のプロセスは root ユーザー権限で実行され、この root ユーザーは...
MySQL 8.0.12のインストールと設定方法を記録してみんなで共有します。 1. インストール1...
この記事では、例を使用して MySQL の重複インデックスと冗長インデックスについて説明します。ご参...
HTML ページでは、div 内のコンテンツが制限を超えた後に自動的にスクロール バーを表示する必要...