JavaScript コードを省略する一般的な方法の概要

JavaScript コードを省略する一般的な方法の概要

序文

この記事では主に仕事でよく使われる JavaScript コーディングスキルをいくつか紹介します。非常に役立ちます。読んだらすぐに実践し、心に留めておくことをお勧めします。

まず、コードデバッグツールであるvscodeプラグインQuokka.jsをお勧めしたいと思います。プラグインの機能は、入力したJavaScriptコードまたはTypeScriptコードをすぐに実行することです。

矢印関数

速記のルール:

  1. パラメータは1つだけなので、括弧は省略できます。
  2. 戻り値は 1 つだけなので、中括弧と return は省略できます。
arr = [1,2,3]とする

arr.filter((item)=>{
    返品商品 >1
})

//パラメータは1つだけなので、括弧は省略できます arr.filter(item=>{
    返品商品>1
})
// 戻り値は 1 つだけなので、中括弧と戻り値は省略できます。arr.filter(item=>item>1)

一般的な配列操作をマスターする

一般的な配列メソッドをマスターし、覚えておいてください。書くときに API を見ないでください。これにより、コーディング効率が効果的に向上します。結局のところ、これらのメソッドは毎日使用されます。

  • いくつかの
  • フィルター
  • 地図
  • 探す
  • インデックスを検索
  • 減らす
  • 含まれるもの

一般的な文字列操作関数をマスターする

  • トリム
  • 開始幅
  • 含まれるもの
let str="こんにちは、ジュジュ"
// 部分文字列を含む console.log(str.includes("Hello"))
// 部分文字列で始まる console.log(str.startsWith("Hello"))
// 末尾のスペースを削除します console.log(str.trim())

スプレッド演算子

非常に便利です。使用シナリオは 2 つあります。

配列の構造化解除

//配列重複排除関数removeRepeat(arr){
    [...新しいSet(arr)]を返す
}
// 配列の最大値 Math.max(...arr)
Math.min(...arr)

オブジェクトの分解

//React は複数のプロパティを一度に渡すために使用されます。let props={name:'Ben',age:10,sex:0}
const greeting = <Greeting {...props} />

//結合されたオブジェクトはlet defaultParams={の代わりにObject.assignを使用できます
    ページサイズ:1,
    ページ番号:10,
    並べ替え:1
}

reqParams = {とする
    ...デフォルトパラメータ、
    電話番号:'15196255885'
}

オブジェクトの省略形

オブジェクトのキーと値は同じ名前なので、キーだけを記述すればよく、コードを大幅に節約できます。

ID、年齢、性別

人={
    id、
    年、
    セックス
}

構造化割り当て

  • 関数パラメータの場合
  • オブジェクトを分解する

より少ないコードを使用できますか?

クラススピリット{
    コンストラクター({x=0,y=0,w=10,h=10,rotate=0}){//関数パラメータ構造 this.x=x
        これ.y=y
        これ.w=w
        これ.h=h
        this.rotate=回転
    }
    描く(){
        定数 {x,y,w,h,rotate} = this
        console.log("描画 -> x,y,w,h,回転", x,y,w,h,回転)
    }
}

データ型変換の方法を習得する

JSを書く人は一般的に型の概念がなく、NumberとStringの区別にあまり敏感ではありません。実は、JSのデータ型は依然として非常に重要です。注意しないと間違いを犯す可能性があるので、次の方法を覚えておいてください。

数値型と文字列型間の変換

私は通常コンストラクタを使うのが好きです

数値('001') //-> 1
文字列('1') // ->1

小数点以下n桁を保持する

function cutNumber(value,n=2){//デフォルトでは小数点以下2桁を保持します return Number(value).toFixed(n)
}

要約する

これで、JavaScript コードの省略形に関するこの記事は終了です。より関連性の高い JavaScript コードの省略形については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript でのカスタム スワイパー コンポーネントの詳細な説明
  • JavaScript の矢印関数と通常の関数の違いの詳細な説明
  • JavaScript でカルーセル効果を実装する
  • ボタンをクリックして画像を切り替える JavaScript
  • JavaScriptで配列かどうかを判断するためのさまざまな方法のまとめ
  • 花火効果を実現するJavaScript(オブジェクト指向)
  • JavaScript Canvas で三目並べゲームを実装
  • JavaScriptのループの違いについての詳細な説明
  • あなたをエキスパートに見せるための 13 個の JavaScript ワンライナー

<<:  Linux (CentOS) システムで MySQL データベース ディレクトリの場所を変更する方法

>>:  MySQL をインストールするときに初期パスワードを忘れた場合のシンプルで効果的な解決策

推薦する

モバイル開発チュートリアル: ピクセル表示の問題の概要

序文モバイル端末の開発の過程で、モバイル端末のディスプレイはデスクトップ端末のディスプレイとは一般的...

MySQL の主キーがクエリを高速化するために数値を使用するか UUID を使用するかについての簡単な分析

実際の開発では、MySQL の主キーは重複できず、主キーが自動的にインクリメントされることがあります...

両端の CSS レイアウトのサンプルコード (親の負のマージンを使用)

最近、開発中に両端が揃ったレイアウトに遭遇しました。レイアウトはパーセンテージに基づいていました。以...

ウェブページの読み込み速度を上げる25の方法とヒント

はじめに<br />誰もが高速インターネット接続にアクセスできるわけではありません。たと...

MySQL の遅いクエリ操作の例の分析 [有効化、テスト、確認など]

この記事では、MySQL のスロー クエリ操作について例を挙げて説明します。ご参考までに、詳細は以下...

Django が uwsgi+nginx プロキシで静的リソースにアクセスできない問題の解決方法

uwsgi+nginx プロキシ Django をデプロイする場合、uwsgi を使用したアクセスは...

JavaScript のガベージコレクションの仕組みの詳細な説明

目次ガベージコレクション (GC) はなぜ必要なのでしょうか?ガベージコレクションとは廃棄物の発生ガ...

Reactでパスワード強度検出器を実装する方法

目次序文使用コンポーネントの記述データ構造分析プロセス分析基礎コードの分析他の要約する序文パスワード...

Nginx でアクセス頻度、ダウンロード速度、同時接続数を制限する方法

1. アクセス頻度、同時接続、ダウンロード速度を制限するために使用されるモジュールと命令の概要ngx...

2048 ゲームを実装するためのネイティブ js

2048ミニゲーム、参考までに具体的な内容は以下のとおりですまず、2048ゲームは16のグリッドか...

MySQLデータベース入門:データベースバックアップ操作の詳細な説明

目次1. 単一データベースのバックアップ2. 圧縮バックアップ3. マルチデータベースバックアップ4...

デザイン協会: なぜ間違った場所を探したのですか?

数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...

MySQL でテーブルデータをクリアする 2 つの方法とその違い

MySQL でデータを削除するには 2 つの方法があります。切り詰めは大まかな伐採の一種である削除は...

MySQLのデッドロックとログに関する詳細な説明

最近、MySQL オンラインでいくつかのデータ異常が発生しましたが、すべて早朝に発生しました。ビジネ...