ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript で習得する必要があるスキル

JavaScript で習得する必要があるスキル

零下一度
零下一度オリジナル
2017-07-19 17:42:271057ブラウズ

JavaScript を初めて使用する場合、または開発作業で最近 JavaScript に出会ったばかりの場合は、イライラしているかもしれません。すべての言語にはそれぞれ特有の特徴がありますが、強力な型付けに基づくサーバーサイド言語から移行する開発者は混乱する可能性があります。数年前、フルタイムの JavaScript 開発者になることを強いられたとき、私もそうでした。最初に知っていればよかったと思うことがたくさんありました。この投稿では、私の癖のいくつかを紹介し、私に多くの頭痛の種を与えた経験のいくつかを皆さんと共有できればと思っています。これは完全なリストではなく、単なる部分的なリストですが、この言語の力と、これまで障害だと思っていたものに目を開かせていただければ幸いです。

1. Null(null、未定義)の検証

新しい変数を作成するとき、通常、変数の値がnull(ヌル)であるか未定義(未定義)であるかを検証します。これは、JavaScript プログラミングで考慮する必要があることが多い検証です。

直接書くと、次のようになります:

if (variable1 !== null || variable1 !== unknown || variable1 !== '') { let変数 2 = 変数 1 ; }

より簡潔なバージョンを使用できます:

信じられない場合は、Google Chrome デベロッパー パネルのコンソールで試してみてください。

// null 値の例 2. これは比較的単純なようです。 最適化されていないコード:
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);
//出力: 'こんにちは'

let a =

new
Array(); a[

0] = "myString1" = "myString2"; = "myString3";let a = [
最適化されたコード:
"myString1"、

"myString2"、

" myString3" ];

let big;
3. if true .. else

if (x ;

10) {大きい = x > にしましょう10 ? 真: 偽;
big =
true;
}
else {
big =
false;
}
簡略化:

コードの量を大幅に簡素化します。

最適化前:
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は自動的に変数をホイストしますが、この方法を使うと関数の先頭に全ての変数を一行にまとめて置くことができます。

let y;

最適化後:

簡略化前:
x、y、z にしましょう=3;
5. 代入ステートメントの簡略化

x=x+

1;minusCount =マイナスカウント -
1;
y=y*10;

簡略化:

x++;
minusCount --;y* =
10;
仮定するx=10y=5 の場合、基本的な算術演算では次の省略形を使用できます:

x += y

// x=15

x -= y // x=5 + RegExp("d+(.) +d+",
x *= y
// x=50
x /= y // x=2
"igm"),

x=10y=5,那么基本的算术操作可以使用如下的简写方式:

x += y // x=15
x -= y // x=5
x *= y // x=50
x /= y // x=2
x %= y // x=0

 

6. 避免使用RegExp

result = re.exec("パディング 01234 テキスト テキスト 56789 パディング");シンプルだが価値がある言及しています。 簡略化前:
console.log (結果); //"01234 text text 56789"
簡略化:
var result = /d+(.)+d+/igm.exec ( If 条件最適化
)

if (likeJavaScript === true)
簡略化後: if (JavaScript のような)

何が真実ではないかを判断する別の例を挙げてみましょう:

let c;// do something...
if ( c!= true ) {

}

簡略化:

let c;
if ( !c ) {
// do something...
}

9 .関数パラメーターの最適化

私は個人的に、関数パラメーターにアクセスするためにオブジェクト要素を取得する方法を使用する傾向があります。 もちろん、これは意見の問題です。

通常使用されるバージョン:

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, [], {}, );

翻訳者注: 元の投稿者のメソッドを使用することは推奨されないというコメントがあります。最初のメソッドを使用する場合は、関数のパラメーターの順序が変更される可能性があるので注意してください。 2番目の方法で。

10. charAt() の代替案

簡略化前:

"myString".charAt(0);

簡略化:

"myString"[0]; // Return 'm'

翻訳者注: 最初の方法を使用している人はもう多くないと思います。

11. 関数呼び出しは短くすることができます

簡略化する前:

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)();
4は4ではなく、4が短いって言いました?


12. 大きな数値をエレガントに表現する方法

JavaScript には数値を省略する方法がありますが、おそらくそれを無視しています。

は10000000を意味します。

1e7簡略化前:

for (
let i = 0; i 10000; i++ {
)簡略化後:


for (
let i = 0; i < 1e7; i++) {

以上がJavaScript で習得する必要があるスキルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。