JavaScript のコード量を減らすための 12 の一般的なテクニック

黄舟
リリース: 2017-08-11 10:40:21
オリジナル
1553 人が閲覧しました

この記事では主に、JavaScript の略語でよく使われる 12 のテクニックを紹介します。これら 12 のテクニックを理解することで、JS コードの量を大幅に減らすことができます。すべてを理解すれば、あなたはマスターになります。知る?必要な友達は編集者をフォローして一緒に学んでください。

はじめに

この記事では主に、JavaScript の略語でよく使われる 12 のテクニックを紹介します。初心者でも経験者でも、読む価値があります。以下で説明することは多くありませんが、詳細な紹介を見てみましょう:

1. Null、未定義の検証

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

次のように直接記述する場合:


if (variable1 !== null || variable1 !== undefined || variable1 !== ''){
 let variable2 = variable1;
}
ログイン後にコピー

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


let variable2 = variable1 || '';
ログイン後にコピー

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


//值为null的例子
let variable1 = null;
let variable2 = variable1 || '';
console.log(variable2);
//输出: ''
//值为undefined的例子
let variable1 = undefined;
let variable2 = variable1 || '';
console.log(variable2);
//输出: ''
//正常情况
let variable1 = 'hi there';
let variable2 = variable1 || '';
console.log(variable2);
//输出: 'hi there'
ログイン後にコピー

ここで注意すべき点は、一連のコードをデバッグした後、ページを更新するか、別の変数を定義する必要があるということです。そうしないと、エラーが報告されます:

2.こちらの方が簡単そうですよ!
非最適化コード:


let a = new Array(); a[0] = "myString1"; a[1] = "myString2"; a[2] = "myString3";
ログイン後にコピー

最適化コード:


let a = ["myString1", "myString2", "myString3"];
ログイン後にコピー

3. if true .. else

let big;
if (x > 10) {
big = true;
}
else {
big = false;
}
ログイン後にコピー
簡略化:


rreee

判定条件と結果が一つしかない場合に使用できる三項演算です。


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


let big = x > 10 ? true : false;
ログイン後にコピー

4. 変数宣言

JavaScriptは自動的に変数をホイストしますが、この方法を使うと関数の先頭に全ての変数を一行で作ることができます。
最適化マネー:


let big = (x > 10);
let x = 3,
big = (x > 10) ? "greater 10" : (x < 5) ? "less 5" : "between 5 and 10";
console.log(big); //"less 5"
let x = 20,
big = {true: x>10, false : x< =10};
console.log(big); //"Object {true=true, false=false}"
ログイン後にコピー

最適化後:


let x;
let y;
let z = 3;
ログイン後にコピー

5.代入文の簡略化

簡略化前:

let x, y, z=3;
ログイン後にコピー

簡略化後:


x=x+1;
minusCount = minusCount - 1;
y=y*10;
ログイン後にコピー

x=10、y=5 と仮定すると、基本的な算術演算には次の略語を使用できます:


x++;
minusCount --;
y*=10;
ログイン後にコピー

6. RegExp オブジェクトの使用を避ける

簡略化する前:

x += y // x=15
x -= y // x=5
x *= y // x=50
x /= y // x=2
x %= y // x=0
ログイン後にコピー

その後簡略化:


var re = new RegExp("\d+(.)+\d+","igm"),
result = re.exrc("padding 01234 text text 56789 padding");
console.log(result);//"01234 text text 56789"
ログイン後にコピー

7. 条件最適化の場合

簡略化前:

var result = /d+(.)+d+/igm.exec("padding 01234 text text 56789 padding");
console.log(result); //"01234 text text 56789"
ログイン後にコピー

簡略化後:


if (likeJavaScript === true)
ログイン後にコピー

実際の例:


if (likeJavaScript)
ログイン後にコピー

簡略化:


let c;
if ( c!= true ) {
// do something...
}
ログイン後にコピー

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

もちろん、これは意見の問題です。
通常使用するバージョン:


let c;
if ( !c ) {
// do something...
}
ログイン後にコピー

私のお気に入りのバージョン:


function myFunction( myString, myNumber, myObject, myArray, myBoolean ) {
// do something...
}
myFunction( "String", 1, [], {}, true );
ログイン後にコピー

翻訳者注: 原文の下に、元の投稿者の方法を使用することは推奨されず、最初の方法を使用するというコメントがあります。メソッドのパラメータの順序は変更できますが、2 番目のメソッドは注意が必要です。


10. charAt() の代替案

簡略化前:

function myFunction() {
/* 注释部分
console.log( arguments.length ); // 返回 5
for ( i = 0; i < arguments.length; i++ ) {
console.log( typeof arguments[i] ); // 返回 string, number, object, object, boolean
}
*/
}
myFunction( "String", 1, [], {}, true );
ログイン後にコピー

簡略化後:


"myString".charAt(0);
ログイン後にコピー

翻訳者注: 私はそう思います最初の方法を使用している人は、すでにあまり多くのことを行っていません左!


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

簡略化前:

"myString"[0];//返回&#39;m&#39;
ログイン後にコピー

簡略化後:


function x() {console.log(&#39;x&#39;)};function y() {console.log(&#39;y&#39;)};
let z = 3;
if (z == 3)
{
x();
} else
{
y();
}
ログイン後にコピー

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

JavaScript には数字を省略する方法がありますが、もしかしたら見落としているかもしれません。 1e7 は 10000000 を意味します。
簡略化前:


function x() {console.log(&#39;x&#39;)};function y() {console.log(&#39;y&#39;)};let z = 3;
(z==3?x:y)();
ログイン後にコピー

簡略化後:


for (let i = 0; i < 10000; i++) {
ログイン後にコピー

概要

以上がJavaScript のコード量を減らすための 12 の一般的なテクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート