javascript 12個技巧

1. 使用!!操作符轉換布爾值

有時候我們需要對一個變量查檢其是否存在或者檢查值是否有一個有效值,如果存在就返回true值。為了做這樣的驗證,我們可以使用!!操作符來實現是非常的方便與簡單。對于變量可以使用!!variable做檢測,只要變量的值為:0、null、" "、undefined或者NaN都將返回的是false,反之返回的是true。比如下面的示例:

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

2. 使用+將字符串轉換成數字

這個技巧非常有用,其非常簡單,可以交字符串數據轉換成數字,不過其只適合用于字符串數據,否則將返回NaN,

  • 這個也適用于Date,在本例中,它將返回的是時間戳數字:

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

3. 并條件符

如果你有一段這樣的代碼:

if (conected) {
    login();
}

你也可以將變量簡寫,并且使用&&和函數連接在一起,比如上面的示例,可以簡寫成這樣:

conected && login();

如果一些屬性或函數存在于一個對象中,你也可以這樣做檢測,如下面的代碼所示:

user && user.login();

3. 使用||運算符

在ES6中有默認參數這一特性。為了在老版本的瀏覽器中模擬這一特性,可以使用||操作符,并且將將默認值當做第二個參數傳入。如果第一個參數返回的值為false,那么第二個值將會認為是一個默認值。如下面這個示例:


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

4. 在循環中緩存array.length

這個技巧很簡單,這個在處理一個很大的數組循環時,對性能影響將是非常大的。基本上,大家都會寫一個這樣的同步迭代的數組:

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

5. 檢測對象中屬性

當你需要檢測一些屬性是否存在,避免運行未定義的函數或屬性時,這個小技巧就顯得很有用。如果你打算定些一些跨兼容的瀏覽器代碼,你也可能會用到這個小技巧。例如,你想使用document.querySelector()來選擇一個id,并且讓它能兼容IE6瀏覽器,但是在IE6瀏覽器中這個函數是不存在的,那么使用這個操作符來檢測這個函數是否存在就顯得非常的有用

if ('querySelector' in document) {
    document.querySelector("#id");
} else {
    document.getElementById("id");
}
  • [ ] 在這個示例中,如果document不存在querySelector函數,那么就會調用docuemnt.getElementById("id")。

6. 獲取數組中最后一個元素

Array.prototype.slice(begin,end)用來獲取begin和end之間的數組元素。如果你不設置end參數,將會將數組的默認長度值當作end值。但有些同學可能不知道這個函數還可以接受負值作為參數。如果你設置一個負值作為begin的值,那么你可以獲取數組的最后一個元素。如:

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]

數組截斷

這個小技巧主要用來鎖定數組的大小,如果用于刪除數組中的一些元素來說,是非常有用的。例如,你的數組有10個元素,但你只想只要前五個元素,那么你可以通過array.length=5來截斷數組。如下面這個示例:

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]

替換所有

String.replace()函數允許你使用字符串或正則表達式來替換字符串,本身這個函數只替換第一次出現的字符串,不過你可以使用正則表達多中的/g來模擬replaceAll()函數功能:

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

合并數組

如果你要合并兩個數組,一般情況之下你都會使用Array.concat()函數:

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

然后這個函數并不適合用來合并兩個大型的數組,因為其將消耗大量的內存來存儲新創建的數組。在這種情況之個,可以使用Array.pus().apply(arr1,arr2)來替代創建一個新數組。這種方法不是用來創建一個新的數組,其只是將第一個第二個數組合并在一起,同時減少內存的使用:

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

將NodeList轉換成數組

如果你運行document.querySelectorAll(“p”)函數時,它可能返回DOM元素的數組,也就是NodeList對象。但這個對象不具有數組的函數功能,比如sort()、reduce()、map()、filter()等。為了讓這些原生的數組函數功能也能用于其上面,需要將節點列表轉換成數組。可以使用[].slice.call(elements)來實現:

var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // Now the NodeList is an array
var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array

數組元素的洗牌

對于數組元素的洗牌,不需要使用任何外部的庫,比如Lodash,只要這樣做:

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

總結

現在你學會了些有用的JavaScript小技巧。希望這些小技巧能在工作中幫助你解決一些麻煩,或者說這篇文章對你有所幫助。如果你有一些優秀的JavaScript小技巧,歡迎在評論中與我們一起分享。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,698評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,202評論 3 426
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,742評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,580評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,297評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,688評論 1 327
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,693評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,875評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,438評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,183評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,384評論 1 372
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,931評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,612評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,022評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,297評論 1 292
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,093評論 3 397
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,330評論 2 377

推薦閱讀更多精彩內容

  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,263評論 0 4
  • PHP常用函數大全 usleep() 函數延遲代碼執行若干微秒。 unpack() 函數從二進制字符串對數據進行解...
    上街買菜丶迷倒老太閱讀 1,380評論 0 20
  • 婆婆腦中風,左側肢體偏癱,治療過程中需要不斷的按摩左側肢體,大爺每天陪著婆婆,給她每個關節每塊肌肉的按摩,然后定時...
    一個人陌上閱讀 283評論 0 0
  • 去年,表哥家的孫女出生,請我們喝喜酒。平時有這種活動,我都會跟爸媽哥哥姐姐們一起去,禮金也都在一個水平線上。那天不...
    慢慢阿維娃閱讀 517評論 2 1