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

序文

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

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

矢印関数

速記のルール:

パラメータは1つだけなので、括弧は省略できます。
戻り値は 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 をよろしくお願いいたします。

以下もご興味があるかもしれません: