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

推薦する

Linuxアカウントファイル制御管理の詳細な手順

Linux システムでは、ユーザーが手動で作成したさまざまなアカウントに加えて、システムまたはプログ...

Linux環境でIPV6接続をサポートするようにmysql5.6を設定する方法

導入:この記事では主に、Linux システムで IPV6 接続をサポートするように MySQL を構...

MySQLの文字タイプは大文字と小文字を区別します

デフォルトでは、MySQLの文字タイプは大文字と小文字を区別しません。つまり、name='A...

Vue3 AST パーサー - ソースコード分析

目次1. AST抽象構文木を生成する2. ASTのルートノードを作成する3. 子ノードの解析4. テ...

HTML の基本的な使用法には、リンク、スタイルシート、span、div などが含まれます。

1. リンクハイパーテキスト リンクは HTML において非常に重要です。基本的な形式は次のとおりで...

SpringBoot と Docker の統合の詳細なプロセス

目次1. デモプロジェクト1.1 インターフェースの準備1.2 構成の準備2. Dockerがリモー...

史上最も簡単な MySQL データのバックアップと復元のチュートリアル (パート 2) (パート 37)

データのバックアップと復元パート3の詳細は次のとおりです基本的な概念:バックアップ、現在のデータまた...

CSS3 での 2D および 3D 変換の実装

CSS3 は、要素の 2D 平面変換と視覚的な 3D 空間変換を実装します。2D 変換はより頻繁に使...

CSSの幅と高さのデフォルト値の詳細な説明:autoと%

結論は幅の%: 包含ブロック(親要素)の幅に基づいて、親の制限を超える幅のパーセンテージを定義します...

::before/:before と ::after/:after の使用に関する深い理解

パート1: 基礎1. :active や :hover などの疑似クラスとは異なり、これらはすべて疑...

React のクラスからフックへの移行

目次リアクトフック序文なぜフックなのか?クラス関数クラスとフックの比較フックはコンポーネントの状態を...

Docker+keepalived+nginx を使用してマスタースレーブホットスタンバイを実装する方法の例

序文単一障害点を解決するには、マスター/スレーブ ホット スタンバイ ソリューションを構成する必要が...

MySQL から Excel にテーブルデータをエクスポートする際の日時形式に関する簡単な説明

最近、MySQL を使用してテーブル データを Excel ファイルにエクスポートしました。MySQ...