如果你是個JavaScript新手或只是最近才在你的開發工作中接觸它,你可能會感到沮喪。所有的語言都有自己的怪癖(quirks)——但從基於強類型的伺服器端語言轉移過來的開發人員可能會感到困惑。我就曾經這樣,幾年前,當我被推到了全職JavaScript開發者的時候,有很多事情我希望我一開始就知道。在這篇文章中,我將分享一些怪癖,希望我能分享給你一些曾經令我頭痛不已的經驗。這不是一個完整清單——只是一部分——但希望它讓你看清這門語言的強大之處,可能曾經被你認為是障礙的東西。
當我們建立了一個新的變量,我們通常會去驗證該變數的值是否為空(null)或則未定義(undefined)。這對於JavaScript程式設計來說,是一個經常要考慮到的驗證。
如果直接寫,那麼像下面這樣:
#if (variable1 !== null || variable1 ! == undefined || variable1 !== '') { let variable2 = variable1; } |
我們可以用一個更簡潔的版本:
#let variable2 = variable1 || ''; |
//值為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'
|
這樣好像比較簡單!
非最佳化程式碼:
let a = new Array(); a[0] = "myString1"; a[1] = "myString2"; a[2] = "myString3"; |
#
最佳化程式碼:
#let a = ["myString1", "myString2", "myString3"]; |
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}"
|
|
let x; |
# #優化後:
let x, y, z= 3; |
## 簡化前:
##x=x+ 1;
| minusCount = minusCount -
#y=y*
10;
x++; minusCount -- ; y*=10;
#
假設 x=10 , | y=5
// x=15
x -= y
// x=5// x=50 x /= y // x=2x %= y // x=0
6. 避免使用RegExp物件簡化前:
|
new
RegExp(
result = re.exec("padding 01234 text text 56789 padding");
#console.log(result) ; //"01234 text text 56789"
|
##var result = /d+(.)+d+/igm.exec("padding 01234 text text 56789 padding");
|
7. If 條件最佳化雖然很簡單,但還是值得提一下。 | 簡化前:
已簡化後:
if (likeJavaScript)
|
簡化後:
#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);
|
"myString"[ | 0];
簡化前: function x( ) {console.log('x')};function y() {console.log('y')} ;
#let z = 3;
if (z == 3)
#{ x();} else
{ |
簡化後: #function x() {console.log( 'x')};function y() {console.log('y')};let z = 3;
|
#你說四不四很短?
簡化前:
for (let i = 0; i < 10000 ; i++) { |
以上是JavaScript中需要掌握的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章!