JavaScript のコードを削減および最適化するためのヒントのまとめ

1) !!

を使用して変数をブール型に変換する 場合によっては、変数が存在するかどうか、または有効な値があるかどうかを確認して、それらの値を true と見なす必要があります。このようなチェックを行うには、|| (二重否定演算子) を使用できます。これにより、任意のタイプのデータが自動的にブール値に変換されます。0、null、""、未定義、または NaN の変数のみが返されます。真実。この簡単な例を見てみましょう:

function Account(cash) { 
 this.cash = cash; 
 this.hasMoney = !!cash; 
} 
var account = new Account(100.50); 
console.log(account.cash); // 100.50 
console.log(account.hasMoney); // true 
var emptyAccount = new Account(0); 
console.log(emptyAccount.cash); // 0 
console.log(emptyAccount.hasMoney); // false

この例では、account.cash の値がゼロより大きい場合、account.hasMoney の値は true です。

2) + を使用して変数を数値に変換します

この変換は非常に簡単ですが、数値文字列でのみ機能し、それ以外の場合は NaN (数値ではない) を返します。この例を見てください:

function toNumber(strNumber) { 
 return +strNumber; 
} 
console.log(toNumber("1234")); // 1234 
console.log(toNumber("ACB")); // NaN

この変換操作は Date でも機能し、その場合はタイムスタンプを返します:

console.log(+new Date()) // 1461288164385

3) 短絡状態

If が表示される場合次のようなコードを渡します:

if (conected) { 
 login(); 
}

その後、これら 2 つの変数の間に && (AND 演算子) を使用してコードを短縮できます。たとえば、前のコードは 1 行に減らすことができます:

conected && login();

また、このメソッドを使用して、オブジェクトに特定のプロパティまたは関数が存在するかどうかを確認することもできます。次のコードに似ています:

user && user.login();

4) || を使用してデフォルト値を設定します

ES6 にはデフォルトのパラメータ関数があります。古いブラウザでこの機能をエミュレートするには、|| (OR 演算子) を使用し、デフォルト値を 2 番目の引数として渡すことができます。最初のパラメータが false を返した場合、2 番目のパラメータはデフォルト値として返されます。この例を見てください:

function User(name, age) { 
 this.name = name || "Oliver Queen"; 
 this.age = age || 27; 
} 
var user1 = new User(); 
console.log(user1.name); // Oliver Queen 
console.log(user1.age); // 27 
var user2 = new User("Barry Allen", 25); 
console.log(user2.name); // Barry Allen 
console.log(user2.age); // 25

5) ループ内で array.length をキャッシュする

このトリックは非常に簡単で、大規模な配列をループする際のパフォーマンスへの大きな影響を回避します。基本的に、ほとんどの人が for を使って配列をループする方法は次のとおりです:

for (var i = 0; i < array.length; i++) { 
 console.log(array[i]); 
}

小さな配列を使用している場合は問題ありませんが、大きな配列を扱っている場合、このコードはすべてのループ内に含まれます。配列の が繰り返し計算されるため、一定の遅延が生じます。これを回避するには、array.length を変数にキャッシュして、ループ内で毎回 array.length の代わりにキャッシュが使用されるようにします。

var length = array.length; 
for (var i = 0; i < length; i++) { 
 console.log(array[i]); 
}

6) オブジェクト内のプロパティを検出する

このトリックは、特定のプロパティが存在するかどうかを確認し、未定義の関数やプロパティの実行を回避する必要がある場合に非常に役立ちます。クロスブラウザー コードを作成する場合は、この手法を使用することもできます。たとえば、古いバージョンの Internet Explorer 6 と互換性のあるコードを記述する必要があり、document.querySelector() を使用して ID によって特定の要素を取得するとします。 ただし、最近のブラウザにはこの機能はありません。したがって、この関数が存在するかどうかを確認するには、in 演算子を使用できます。この例を見てください:

for (var i = 0, length = array.length; i < length; i++) { 
 console.log(array[i]); 
}

この場合、ドキュメントに querySelector 関数がない場合、代わりに document.getElementById() が使用されます。

7) 配列の最後の要素を取得します

Array.prototype.slice(begin, end) を使用して配列を切り取ることができます。ただし、終了パラメータ end の値が設定されていない場合、関数は自動的に end を配列の長さの値に設定します。この関数が負の値を受け入れることができることを知っている人はあまりいないと思います。 begin を負の数に設定すると、配列から逆数の要素を取得できます:

if ('querySelector' in document) { 
 document.querySelector("#id"); 
} else { 
 document.getElementById("id"); 
}

8) 配列の切り捨て

thisこの手法では配列のサイズをロックできます。これは、配列内の固定数の要素を削除する場合に非常に便利です。たとえば、要素が 10 個ある配列があるが、最初の 5 要素だけを取得したい場合は、array.length = 5 を設定することで配列をステージングできます。この例を見てください:

var array = [1, 2, 3, 4, 5, 6]; 
console.log(array.slice(-1)); // [6] 
console.log(array.slice(-2)); // [5,6] 
console.log(array.slice(-3)); // [4,5,6]

9) すべて置換

String.replace() 関数を使用すると、文字列と正規表現を使用して文字列を置換できます。この関数自体は、最初に一致した文字列のみを置換できます。ただし、正規表現の最後に /g を追加して replaceAll() 関数をシミュレートすることができます:

var array = [1, 2, 3, 4, 5, 6]; 
console.log(array.length); // 6 
array.length = 3; 
console.log(array.length); // 3 
console.log(array); // [1,2,3]

10) 配列の連結

2 つの配列を結合する必要がある場合は、Array.concat を使用できます。 () 関数:

var string = "john john"; 
console.log(string.replace(/hn/, "ana")); // "joana john" 
console.log(string.replace(/hn/g, "ana")); // "joana joana"

ただし、この関数は新しい配列を作成し、大量のメモリを消費するため、大規模な配列には適していません。この場合、Array.push.apply(arr1, arr2) を使用できます。これは、新しい配列を作成せず、2 番目の配列を最初の配列にマージしてメモリ使用量を削減します。

如果运行document.querySelectorAll("p")函数，它会返回一个DOM元素数组，即NodeList对象。但是这个对象并没有一些属于数组的函数，例如：sort()，reduce()，map()，filter()。为了启用这些函数，以及数组的其他的原生函数，你需要将NodeList转换为数组。要进行转换，只需使用这个函数：[] .slice.call（elements）：

var elements = document.querySelectorAll("p"); // NodeList  
var arrayElements = [].slice.call(elements); // 现在已经转换成数组了 
var arrayElements = Array.from(elements); // 把NodeList转换成数组的另外一个方法

12) 对数组元素进行洗牌

如果要像外部库Lodash那样对数据元素重新洗牌，只需使用这个技巧：

var list = [1, 2, 3];  
console.log(list.sort(function() {  
  return Math.random() - 0.5 
})); // [2,1,3]

以上がJavaScript のコードを削減および最適化するためのヒントのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。