知っておくべきJavaScript最適化の18のヒント

この記事では、JavaScript の 18 の最適化テクニックを見てみましょう。この記事は、JavaScript プログラミングを使用しているすべての開発者に適しています。この記事の目的は、開発作業で JavaScript 言語の使用に習熟できるようにすることです。 . 皆様のお役に立てれば幸いです。

#1. 複数の条件の判定

複数の値を判定する必要がある場合は、次のように使用できます。配列の include メソッド。

//Bad
if (x === 'iphoneX' || x === 'iphone11' || x === 'iphone12') {
//code... 
}
//Good
if (['iphoneX', 'iphone11', 'iphone12'].includes(x)) {
//code...
}

2. If true ... else

if-else 条件の内部にそれ以上のロジックが含まれていない場合、3 項オペレーターの方が良くなりますよ。

// Bad
let test= boolean;
if (x > 100) {
test = true;
} else {
test = false;
}
// Good
let test = (x > 10) ? true : false;
//or we can simply use
let test = x > 10;

条件をネストした後、以下に示すように内容が保持されます (複素点の 3 つの目):

let x = 300,
let test2 = (x > 100) ? &#39;greater 100&#39; : (x < 50) ? &#39;less 50&#39; : &#39;between 50 and 100&#39;;
console.log(test2); // "greater than 100"

3. Null、未定義、'' null 値チェック

値として参照する変数が null ではない、未定義、または '' ではないかどうかを確認する必要がある場合は、短絡書き込み

// Bad
if (first !== null || first !== undefined || first !== '') {
let second = first;
}
// Good 短路写法
let second = first|| '';

を使用できます。

4. Null 値のチェックとデフォルト値の割り当て

値を割り当て、変数が空でデフォルト値を割り当てる必要があることがわかった場合は、次のように使用できます。次の短絡記述方法

let first = null,
let second = first || 'default'
console.log(second)

4. 二重ビット演算子

ビット演算子は、JavaScript 初心者向けチュートリアルの基礎知識です。ただし、ビット演算子はあまり使用しません。なぜなら、バイナリを扱わずに 1 と 0 を扱いたい人はいないからです。

しかし、2 ビット演算子には非常に実用的なケースがあります。 Math.floor( ) の代わりに倍ビット演算子を使用できます。二重負のビット演算子の利点は、同じ演算をより速く実行できることです

// Bad
Math.floor(4.9) === 4  //true
// Good
~~4.9 === 4  //true

5. ES6 の一般的な小さな最適化 - オブジェクト プロパティ

const x,y = 5
// Bad
const obj = { x:x, y:y }
// Good
const obj = { x, y }

6. ES6 の共通のマイナーな最適化 - アロー関数

//Bad
function sayHello(name) {
  console.log('Hello', name);
}
setTimeout(function() {
  console.log('Loaded')
}, 2000)
list.forEach(function(item) {
  console.log(item)
})
// Good
const sayHello = name => console.log('Hello', name)
setTimeout(() => console.log('Loaded'), 2000)
list.forEach(item => console.log(item))

7. ES6 の共通のマイナーな最適化 - 暗黙的な戻り値

戻り値は、関数の最終結果を返すために通常使用するキーワードです。ステートメントが 1 つだけあるアロー関数は、暗黙的に結果を返すことができます (return キーワードを省略するには、関数で括弧 ({ }) を省略する必要があります)。

複数行のステートメント (オブジェクト テキストなど) を返すには、{} の代わりに () を使用して関数本体をラップする必要があります。これにより、コードが単一のステートメントとして評価されることが保証されます。

//Bad
function calcCircumference(diameter) {
  return Math.PI * diameter
}
// Good
const calcCircumference = diameter => (
  Math.PI * diameter
)

8. ES6 の共通のマイナーな最適化 - 代入の構造化

const form = { a:1, b:2, c:3 }
//Bad
const a = form.a
const b = form.b
const c = form.c
// Good
const { a, b, c } = form

9. ES6 の共通のマイナーな最適化 - 展開操作記号

戻り値は、関数の最終結果を返すために通常使用するキーワードです。ステートメントが 1 つだけあるアロー関数は、暗黙的に結果を返すことができます (return キーワードを省略するには、関数で括弧 ({ }) を省略する必要があります)。

複数行のステートメント (オブジェクト テキストなど) を返すには、{} の代わりに () を使用して関数本体をラップする必要があります。これにより、コードが単一のステートメントとして評価されることが保証されます。

const odd = [ 1, 3, 5 ]
const arr = [ 1, 2, 3, 4 ]
// Bad
const nums = [ 2, 4, 6 ].concat(odd)
const arr2 = arr.slice( )
// Good
const nums = [2 ,4 , 6, ...odd]
const arr2 = [...arr]

10. 一般的な配列処理

配列の一般的なメソッドをマスターして、API を見ずに覚えておいてください。これにより、コーディング効率が効果的に向上します。結局のところ、これらのメソッドは毎日使用されます。

各フィルター マップ forEach find findIndex Reduce include

const arr = [1,2,3]
//every 每一项都成立，才会返回true
console.log( arr.every(it => it>0 ) ) //true
//some 有一项都成了，就会返回true
console.log( arr.some(it => it>2 ) ) //true
//filter 过滤器
console.log( arr.filter(it => it===2 ) ) //[2]
//map 返回一个新数组
console.log( arr.map(it => it==={id:it} ) ) //[ {id:1},{id:2},{id:3} ]
//forEach 没有返回值
console.log( arr.forEach(it => it===console.log(it)) ) //undefined
//find 查找对应值 找到就立马返回符合要求的新数组
console.log( arr.find(it => it===it>2) ) //3
//findIndex 查找对应值 找到就立马返回符合要求新数组的下标
console.log( arr.findIndex(it => it===it>2) ) //2
//reduce 求和或者合并数组
console.log( arr.reduce((prev,cur) => prev+cur) ) //6
//includes 求和或者合并数组
console.log( arr.includes(1) ) //true
//数组去重
const arr1 = [1,2,3,3]
const removeRepeat = (arr) => [...new Set(arr1)]//[1,2,3]
//数组求最大值
Math.max(...arr)//3
Math.min(...arr)//1
//对象解构 这种情况也可以使用Object.assign代替
let defaultParams={
    pageSize:1,
    sort:1
}
//goods1
let reqParams={
    ...defaultParams,
    sort:2
}
//goods2
Object.assign( defaultParams, {sort:2} )

11. 比較returns

return ステートメントで比較を使用すると、コードを 5 行から 1 行に減らすことができます。

// Bad
let test
const checkReturn = () => {
    if (test !== undefined) {
        return test;
    } else {
        return callMe('test');
}
}
// Good
const checkReturn = () => {
return test || callMe('test');
}

12. 短い関数呼び出し

三項演算子を使用してこのタイプの関数を実装できます。

const test1 =() => {
  console.log('test1');
}
const test2 =() => {
  console.log('test2');
}
const test3 = 1;
if (test3 == 1) {
  test1()
} else {
  test2()
}
// Good
test3 === 1? test1():test2()

13.スイッチ コード ブロック (ifelse コード ブロック) の省略形

条件を Key-Value オブジェクトに保存して、状況に応じてご利用ください。

// Bad
switch (data) {
  case 1:
    test1();
  break;
  case 2:
    test2();
  break;
  case 3:
    test();
  break;
  // And so on...
}
// Good
const data = {
  1: test1,
  2: test2,
  3: test
}
data[anything] && data[anything]()
// Bad
if (type === 'test1') {
  test1();
}
else if (type === 'test2') {
  test2();
}
else if (type === 'test3') {
  test3();
}
else if (type === 'test4') {
  test4();
} else {
  throw new Error('Invalid value ' + type);
}
// Good
const types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};
const func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();

14. 複数行の文字列の省略形

コード内で複数行の文字列を処理するときは、次のようにすることができます:

// Bad
const data = 'abc abc abc abc abc abc\n\t'
+ 'test test,test test test test\n\t'
// Good
const data = `abc abc abc abc abc abc
         test test,test test test test`

15. Object.entries() Object.values() Object.keys()

Object.entries() この機能はオブジェクトを変換できますオブジェクトの配列に変換します。

Object.values() はオブジェクトの値を取得できます

Object.keys() はオブジェクトのキーの値を取得できます

const data = { test1: 'abc', test2: 'cde' }
const arr1 = Object.entries(data)
const arr2 = Object.values(data)
const arr3 = Object.keys(data)
/** arr1 Output:
[ 
    [ 'test1', 'abc' ],
    [ 'test2', 'cde' ],
]
**/
/** arr2 Output:
['abc', 'cde']
**/
/** arr3 Output:
['test1', 'test2']
**/

16. さらに繰り返す文字列

同じ文字を複数回繰り返すには、for ループを使用してそれらを同じループに追加します。

//Bad 
let test = ''; 
for(let i = 0; i < 5; i ++) { 
  test += &#39;test,&#39;; 
} 
console.log(str);// test,test,test,test,test,
//good 
console.log(&#39;test,&#39;.repeat(5))

17. べき乗の略語

数学的指数累乗関数の良さは次のとおりです:

//Bad 
Math.pow(2,3)// 8
//good 
2**3 // 8

18. 数字の区切り文字

#_ を使用するだけで簡単に数字を区切ることができるようになりました。これにより、大量のデータの処理が容易になります。

//old syntax
let number = 98234567
//new syntax
let number = 98_234_567

最新バージョンの JavaScript (ES2021/ES12) の最新機能を使用したい場合は、以下を確認してください。

• 1.replaceAll(): 一致するすべてのパターンが新しい置換単語に置き換えられた新しい文字列を返します。

• 2.Promise.any(): 反復可能な Promise オブジェクトが必要です。Promise が完了すると、値を含む Promise が返されます。

• 3.weakref: このオブジェクトは別のオブジェクトへの弱い参照を保持しますが、オブジェクトのガベージ コレクションが妨げられることはありません。

• 4.FinalizationRegistry: オブジェクトがガベージ コレクションされたときにコールバックを要求できるようにします。

• 5. プライベート メソッド: メソッドとアクセサーの修飾子: プライベート メソッドは # を使用して宣言できます。

• 6. 論理演算子: && および || 演算子。

• 7.Intl.ListFormat: このオブジェクトにより、言語に依存したリストの書式設定が可能になります。

• 8.Intl.DateTimeFormat: このオブジェクトにより、言語に依存した日付と時刻の書式設定が可能になります。

[推奨学習: JavaScript 上級チュートリアル]

以上が知っておくべきJavaScript最適化の18のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。