ホームページ > 記事 > ウェブフロントエンド > JavaScript で習得する必要があるスキル
JavaScript を初めて使用する場合、または開発作業で最近 JavaScript に出会ったばかりの場合は、イライラしているかもしれません。すべての言語にはそれぞれ特有の特徴がありますが、強力な型付けに基づくサーバーサイド言語から移行する開発者は混乱する可能性があります。数年前、フルタイムの JavaScript 開発者になることを強いられたとき、私もそうでした。最初に知っていればよかったと思うことがたくさんありました。この投稿では、私の癖のいくつかを紹介し、私に多くの頭痛の種を与えた経験のいくつかを皆さんと共有できればと思っています。これは完全なリストではなく、単なる部分的なリストですが、この言語の力と、これまで障害だと思っていたものに目を開かせていただければ幸いです。
新しい変数を作成するとき、通常、変数の値がnull(ヌル)であるか未定義(未定義)であるかを検証します。これは、JavaScript プログラミングで考慮する必要があることが多い検証です。
直接書くと、次のようになります:
if (variable1 !== null || variable1 !== unknown || variable1 !== '') { let変数 2 = 変数 1 ; } |
より簡潔なバージョンを使用できます:
let variable1 = null;
let variable2 = variable1 || '';
cons ole .log(変数2) ;
//出力: ''
//未定義の値の例
let variable1 = unknown;
let variable2 = variable1 ''; console.log(variable2);
//出力: '' //通常の状況 let variable1 = 'こんにちは';
let variable2 = variable1 | '';
console.log(variable2); //出力: 'こんにちは' | 2. これは比較的単純なようです。
new
Array(); a[
最適化されたコード: |
"myString2"、
" myString3" ]; 3. if true .. else |
big = true;
}else { big = false;
}
簡略化: | 大きい = x > にしましょう10 ?
let big = (x > 10);
let x = 3,
big = (x > 10) ? 「より大きい10」 :( x 5) ? "5 と 10 の間";
console.log(big); = 20,
big = {true: x>10, false : x< =10};
console.log(big); //" =true, false=false}"
4. 変数宣言JavaScriptは自動的に変数をホイストしますが、この方法を使うと関数の先頭に全ての変数を一行にまとめて置くことができます。
| 最適化前:
最適化後:
x、y、z にしましょう=3;
5. 代入ステートメントの簡略化
| 簡略化前:
x=x+
1;1; y=y*10;
|
minusCount --;y* = 10;x=10 、y=5 の場合、基本的な算術演算では次の省略形を使用できます: |
// x=15
x *= y // x=50
x /= y // x=2
| +
x=10
,y=5
,那么基本的算术操作可以使用如下的简写方式:
x += y // x=15
x -= y // x=5
x *= y // x=50
x /= y // x=2
x %= y // x=0
|
RegExp
console.log (結果); //"01234 text text 56789"
簡略化:
var result = /d+(.)+d+/igm.exec ( If 条件最適化 ) | シンプルだが価値がある言及しています。
簡略化後: if (JavaScript のような)
|
if ( c!= true ) { |
}
let c;
if ( !c ) {
// do something...
}
|
私は個人的に、関数パラメーターにアクセスするためにオブジェクト要素を取得する方法を使用する傾向があります。 もちろん、これは意見の問題です。
通常使用されるバージョン:
function myFunction( myString, myNumber, myObject, myArray, myBoolean ) {
// 何かをする...
} myFunction ( "String", 1, [], {}, true );
|
私のお気に入りのバージョン:
function myFunction( ) {
/* コメント部分
console.log( argument.length ); // Return 5
for ( i = 0; i
console.log( typeof argument[ i] ); // 文字列、数値、オブジェクト、オブジェクト、boolean を返します
}
*/
}
myFunction( "String", 1, [], {}, );
|
"myString".charAt(0);
|
"myString"[0]; // Return 'm'
|
function x() {console.log('x')};function y() { console .log('y')};
z = 3;
if (z == 3) {x ();} else
{y();}
|
簡略化:
関数 x() {コンソールログ( 'x')};関数 y() {console.log('y')};let z = 3; (z == 3?x:y)(); |
12. 大きな数値をエレガントに表現する方法
1e7
簡略化前:
for ( let i = 0; i 10000; i++ {
|
for ( let i = 0; i < 1e7; i++) {
|
以上がJavaScript で習得する必要があるスキルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。