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 をインストールするときに初期パスワードを忘れた場合のシンプルで効果的な解決策

推薦する

JavaScriptはフォームデータの非同期取得を実装します

この記事では、フォームデータの非同期取得を実現するためのJavaScriptの具体的なコードを例とし...

Nginx プロセス管理とリロードの原則の詳細な説明

プロセス構造図Nginx はマルチプロセス構造です。マルチプロセス構造は、次のような Nginx の...

MySQL インデックスの左端原則のサンプルコード

序文最近、MySQL のインデックスについて読んでいました。結合されたインデックスを見ると、左端の原...

Dockerはイメージ名とTAG操作の名前を変更します

docker イメージを使用する場合、以下に示すように、REPOSITORY と TAG の両方が ...

Linux で PyCurl のエラーを解決する方法

「curl-config を実行できませんでした」の解決策 pycurl のダウンロード/解凍 (p...

2012年のベストWebデザイン作品レビュー[パート1]

新年の初めに、友人の健康と2013年が素晴らしい年となることを心からお祈りいたします。この記事では、...

mysql インストーラ コミュニティ 8.0.16.0 のインストールと構成のグラフィック チュートリアル

mysqlインストーラコミュニティ8.0.16.0インストールグラフィックチュートリアル、参考までに...

MySQLの暗黙的な変換問題の解決

1. 問題の説明 root@mysqldb 22:12: [xucl]> テーブル t1\G ...

Windows 10 で MySQL をダウンロードするための詳細なチュートリアル

MySQL のバージョンは、Enterprise Edition と Community Editi...

JavaScript は最大値と最小値のアルゴリズムを通じて AI 三目並べゲームを実装します

では、早速スクリーンショットを実行してみましょう。黒い駒はプレイヤーの位置、赤い駒はコンピュータの位...

MySQL シリーズ 3 基礎

目次チュートリアルシリーズ1. MySQL の紹介2. MySQLの開発履歴3. MariaDBの基...

docker ログが取得できない問題の解決方法

毎日サービスをチェックしているときに、portainer からコンテナ ログを確認しようとしたところ...

MySQL 5.6 から 5.7 にアップグレードする際のマスター スレーブ遅延問題のトラブルシューティング

最近、Zabbix データベースを MySQL 5.6 から 5.7 にアップグレードしたときに、マ...

DockerにMinIOをインストールするための詳細な手順

目次1. docker環境が正常かどうかを確認する2. miniIOイメージをダウンロードする3. ...

モバイルウェブページのサイズ調整を実装する方法

ようやく手元のプロジェクトが終了し、行方不明だった人たちが戻ってきました!プロジェクトを進める過程で...