JavaScript中需要掌握的技巧

如果你是個JavaScript新手或只是最近才在你的開發工作中接觸它，你可能會感到沮喪。所有的語言都有自己的怪癖（quirks）——但從基於強類型的伺服器端語言轉移過來的開發人員可能會感到困惑。我就曾經這樣，幾年前，當我被推到了全職JavaScript開發者的時候，有很多事情我希望我一開始就知道。在這篇文章中，我將分享一些怪癖，希望我能分享給你一些曾經令我頭痛不已的經驗。這不是一個完整清單——只是一部分——但希望它讓你看清這門語言的強大之處，可能曾經被你認為是障礙的東西。

1. 空(null, undefined)驗證

當我們建立了一個新的變量，我們通常會去驗證該變數的值是否為空(null)或則未定義(undefined)。這對於JavaScript程式設計來說，是一個經常要考慮到的驗證。

如果直接寫，那麼像下面這樣：

#if (variable1 !== null || variable1 ! == undefined || variable1 !== '') { let variable2 = variable1; }

我們可以用一個更簡潔的版本：

#let variable2 = variable1  || '';

 

如果你不相信，在Google瀏覽器開發者面板的控制台下試試！

//值為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;

}

簡化後：

#let big = x > 10 ? true : false;

#

 

極大簡化了程式碼量！

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}"

#4. 變數宣告

#儘管JavaScript會自動將變數上提(hoist)，使用該方法可以將所有的變數都在函數的頭部用一行搞定。 優化前：##let y;

let x;

let z =

3;

# 

#優化後：

let x, y, z=

3;

 5. 賦值語句的簡化minusCount = minusCount - 1;

## 簡化前：

##x=x+ 1;

#y=y*

10;

## 簡化後：y=5，那麼基本的算術運算可以使用如下的簡寫方式：

x++;

minusCount -- ;

y*=

10;

# 

假設 x=10

，

##x += y // x=15

x -= y

// x=5#x *= y

// x=50

x /= y // x=2x %= y // x=0

 

6. 避免使用RegExp物件簡化前：

var re =

new

RegExp("\d+(.)+\d+","igm"),

result = re.exec("padding 01234 text text 56789 padding");

#console.log(result) ; //"01234 text text 56789"

 

#/

console.log(result); //"01234 text text 56789"

##var result =

/d+(.)+d+/igm.exec("padding 01234 text text 56789 padding");

 簡化前：

7. If 條件最佳化雖然很簡單，但還是值得提一下。

if (likeJavaScript === true)

 已簡化後：

if (likeJavaScript)

### ######我們再來句一個判斷非真的範例：############## #######let c;############if ( c!= ###true ) {###############// do something...#########}################

 

簡化後：

# # 

#let c;

##if ( !c ) {

// do something...

#}

9. 函數參數最佳化

我個人傾向於使用取得物件元素的方式來存取函數參數，當然這個見仁見智啦！

通常使用的版本：

 

function

myFunction( myString, myNumber, myObject, myArray, myBoolean ) {

// do something...

}

myFunction(

"String ",

1, [], {}, true );

我喜歡的版本：

 

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 );

譯者註：原文下方有評論表示不建議用樓主的方法，使用第一種方法函數參數的順序是可以變動的，第二種你就要小心了。

10. charAt()的替代品

簡化前：

 

"myString".charAt(

0);

## 0]; // 返回'm'

"myString"[

## 

譯者註：我相信用第一種方法的人已經不多了吧！ 11. 函數呼叫還可以更短y();

簡化前：

function x( ) {console.log('x')};function y() {console.log('y')} ;

#let z = 3;

if (z ==

3)

#{

x();

}

else

{

#}

 #(z==#3 ?x:y)();

簡化後：

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

#你說四不四很短？

12. 如何優雅的表示大數字

在JavaScript中，有一個簡寫數字的方法，也許你忽略了。 1e7表示10000000。

簡化前：

for (let i = 0; i <

10000 ; i++) {

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

以上是JavaScript中需要掌握的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！