初心者のためのトップ10のJavaScriptショートハンド
JavaScriptのショートハンド コーディングプロセスをスピードアップするだけでなく、スクリプトを短くすることで、 より速いページロード. 速記コードは、その速記コードと同じくらい有効です。彼らは本質的に 同じことを表す-よりコンパクトなフォーマットでのみ。それらは最も単純なコード最適化手法の1つです。.
JavaScriptの短所がいくつかありますが、それらは 公式のリファレンスガイドはありません. なかには単純なものもあれば、経験豊富な開発者にとっても非常に威圧的なものもあります。この記事では、見つけることができます 初心者のための10のJavaScriptショートハンド これでコードの最適化から始めて、より簡潔なコードを書くことができます。.
1. 10進数
定期的に 大きな小数を扱う あなたはもうすべてのゼロをタイプアウトする必要がないので、この速記は善意であることができます、ただそれらをそれらに取り替えてください e
表記法例えば, 1e8
の後に8個のゼロを追加することを意味します。 1
桁、それはに等しい 100000000
.
手紙の後の数字 e
ゼロの数を示します 前の数字の後に来る e
. 同様に, 16e4
の省略形です 160000
, 等.
/ *省略形* / var myVar = 1e8; / *ロングハンド* / var myVar = 100000000;
2.増減
の 速記を増やす 2人で構成されています +
符号がある場合は、変数の値が 1ずつ増加. 同様に、 短縮形 二つからなる -
これは、変数がであることを意味します 1つ減った.
これら2つの短縮形を使うことができます 数値データ型のみ. それらはループに欠くことのできない役割を持っています、それらの最も頻繁な使用例は にとって
ループ.
/ *省略形* / i ++; j--; / *筆記* / i = i + 1; j = j − 1。
3.足し算、注意散漫、掛け算、除算
それぞれの短縮形があります 4つの基本的な数学演算:足し算、注意散漫、掛け算、割り算これらは、インクリメント演算子とデクリメント演算子と同様に機能します。ここでは、変数の値を変更できます。 任意の数で (一人ではない).
以下の例では、 私
変数は次のように増分されます。 5
, j
デクリメントされる 3
, k
が掛けられる 10年
, そして l
で割られる 2
.
/ *省略形* / i + = 5; j = 3。 k * = 10。 1 / = 2。 / *ロングハンド* / i = i + 5; j = j − 3。 k = k * 10。 l = 1 / 2。
4.文字位置を決める
の charAt()
方法 最も頻繁に使用される文字列メソッドの1つです。 指定位置にある文字 (例えば、5番目 文字列の文字)代わりに使うことができる簡単な速記があります。 角括弧で囲まれた文字位置 文字列の後.
そのことに注意を払う charAt()
方法は ゼロベース. だから, myString [4]
5を返します番目 文字列内の文字("y"
例では).
var myString = "お誕生日おめでとう"; / *省略形* / myString [4]; / *ロングハンド* / myString.charAt(4);
5.変数をまとめて宣言する
作成したい場合 同時に複数の変数 一つずつタイプする必要はありません。それを使用するのに十分です var
(または させて
)キーワード 1回だけ, それからあなたはちょうどあなたが作りたい変数をリストすることができます, コンマで区切って.
この短縮形では、両方を宣言することができます 未定義の変数 そして 値を持つ変数.
/ *短縮形* / var i、j = 5、k = "おはよう"、l、m = false。 / *ロングハンド* / var i; var j = 5; var k = "おはようございます"; var l; var m = false。
連想配列を宣言する
JavaScriptで配列を宣言するのは比較的簡単な作業です。 var myArray = ["apple"、 "pear"、 "orange"]
構文。しかしながら, 連想配列を宣言する これはもう少し複雑です。ここでは、値だけでなくキーも定義する必要があります(通常の配列の場合、キーは 0、1、2、3など.
).
連想配列は キーと値のペアのコレクション. 手短な方法は、配列を宣言してから、各要素を1つずつ追加することです。しかし、以下の省略形では、 連想配列を宣言する プラス そのすべての要素 同時に.
以下の例では、 myArray
連想配列は、出生地(値)を有名人(キー)に割り当てます.
/ *短縮形* / var myArray = "グレイスケリー": "フィラデルフィア"、 "クリントイーストウッド": "サンフランシスコ"、 "ハンフリーボガート": "ニューヨークシティ"、 "ソフィアローレン": "ローマ"、 "イングリッド" Bergman ":" Stockholm " / *ロングハンド* / var myArray = new Array(); myArray ["Grace Kelly"] = "フィラデルフィア"; myArray ["Clint Eastwood"] = "サンフランシスコ"; myArray ["Humphrey Bogart"] = "ニューヨーク市"; myArray ["Sophia Loren"] = "ローマ"; myArray ["Ingrid Bergman"] = "ストックホルム";
7.オブジェクトを宣言する
の省略形 オブジェクト宣言 連想配列の場合と同様に機能します。ただし、ここではキーと値のペアはありませんが、 プロパティ値ペア ブレースの間に配置する必要があること .
簡略構文の唯一の違いは、 オブジェクトプロパティは引用符で囲まない (名
, 出生地
, 年齢
, wasJamesBond
以下の例では).
/ *短縮形* / var myObj = 名前: "Sean Connery"、placeOfBirth: "エジンバラ"、年齢:86、wasJamesBond:true; / *ロングハンド* / var myObj = new Object(); myObj.name = "Sean Connery"; myObj.placeOfBirth = "エジンバラ"; myObj.age = 86; myObj.wasJamesBond = true;
8.条件演算子を使う
の 条件付き(三項)演算子 として頻繁に使用されます のショートカット if-else
ステートメント. それはから成っています 三部:
- の 調子
- 場合はどうなります 条件は真です (
もし
) - 場合はどうなります 条件が偽 (
それ以外の
)
以下の例では、私たちは簡単なメッセージを送ります。 メッセージ
クラブに入会したい人に省略形を使用して、それはちょうど1行のコードです。 評価を実行する.
var age = 17; / *省略形* / var message = age> = 18? "許可": "拒否"; / *ロングハンド* / if(年齢> = 18)var message = "Allowed"; else var message = "Denied";
テストしたいだけなら コードをWebコンソールにコピーします (ほとんどのブラウザではF12)そしての値を変更します。 年齢
数回変数.
9.プレゼンスを確認する
あなたは変数があるかどうかをチェックする必要があることが頻繁に起こります 存在するかどうか. の “存在すれば” 速記 はるかに少ないコードでそうすることができます.
JavaScriptの短縮形に関するほとんどの記事では、次のように適切な省略形は記載されていません。 if(myVar)
表記法は、変数が偽ではないかどうかをチェックするだけでなく、他のことも一握りではありません。すなわち、変数 未定義、空、null、およびfalseにはできません.
var myVar = 99; / *省略形* / if(myVar)console.log( "myVar変数が定義されていて、空ではなく、nullでもなく、falseでもない"); / *省略形* / if(typeof myVar!== "未定義" && myVar!== "" && myVar!== null && myVar!== 0 && myVar!== false)console.log( "The myVar変数が定義されていてAND空ではないAND NULLでないAND falseでない
あなたはどのようにテストすることができます “存在すれば” 次のコードスニペットをWebコンソールに挿入して、 の値を変更する myVar
何回か.
この短縮形がどのように機能するかを理解するためには、の値でそれをテストする価値があります。 「」
(空の文字列), 偽
, 0
, 本当の
, 空でない文字列(例:. "こんにちは"
)、数字(例:. 99年
そして、変数が未定義の場合(単純に var myVar;
).
10.欠席をチェック
の “存在すれば” 速記を使用することができます 変数が存在しないことを確認する 配置することにより その前に感嘆符. 感嘆符は 論理否定演算子 JavaScript(およびほとんどのプログラミング言語)で.
したがって、 if(!myVar)
表記法は、あなたが myVar
変数 未定義、空、null、またはfalseではない.
var myVar; / *簡略* / if(!myVar)console.warn( "myVar変数は未定義(OR)空(OR)null(OR)falseです。"; / *省略形* / if(typeof myVar === "未定義" || myVar === "" || myVar === null || myVar === 0 || myVar === false)console.warn ( "myVar変数は未定義(OR)空(OR)null(OR)falseです。";