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

この記事では主に、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];//返回'm'

簡略化後:

function x() {console.log('x')};function y() {console.log('y')};
let z = 3;
if (z == 3)
{
x();
} else
{
y();
}

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

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

function x() {console.log('x')};function y() {console.log('y')};let z = 3;
(z==3?x:y)();

簡略化後:

for (let i = 0; i < 10000; i++) {

概要

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