12個非常有用的JavaScript技巧

来源:http://www.cnblogs.com/jassy/archive/2017/05/14/6851632.html
-Advertisement-
Play Games

原文：12 Extremely Useful Hacks for JavaScript 作者：Caio Ribeiro Pereira 翻譯：雁驚寒 ...


1) 使用!!將變數轉換成布爾類型

有時，我們需要檢查一些變數是否存在，或者它是否具有有效值，從而將它們的值視為true。對於做這樣的檢查，你可以使用||（雙重否定運算符），它能自動將任何類型的數據轉換為布爾值，只有這些變數才會返回false：0，null，""，undefined或NaN，其他的都返回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

在這個例子中，如果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 (conected) {  
    login();
}

那麼你可以在這兩個變數之間使用&&（AND運算符）來縮短代碼。例如，前面的代碼可以縮減到一行：

conected && login();

你也可以用這種方法來檢查對象中是否存在某些屬性或函數。類似於以下代碼：

user && user.login();

4) 使用||設置預設值

在ES6中有預設參數這個功能。為了在舊版瀏覽器中模擬此功能，你可以使用||（OR運算符），並把預設值作為它的第二個參數。如果第一個參數返回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

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

為了更簡潔，可以這麼寫：

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

6) 檢測對象中的屬性

當你需要檢查某些屬性是否存在，避免運行未定義的函數或屬性時，這個技巧非常有用。如果你打算編寫跨瀏覽器代碼，你也可能會用到這個技術。例如，我們假設你需要編寫與舊版Internet Explorer 6相容的代碼，並且想要使用document.querySelector()來通過ID獲取某些元素。 但是，在現代瀏覽器中，這個函數不存在。所以，要檢查這個函數是否存在，你可以使用in運算符。看下這個例子：

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

在這種情況下，如果在document中沒有querySelector函數，它就會使用document.getElementById()作為代替。

7) 獲取數組的最後一個元素

Array.prototype.slice（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]

8) 數組截斷

這個技術可以鎖定數組的大小，這對於要刪除數組中固定數量的元素是非常有用的。例如，如果你有一個包含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]

9) 全部替換

String.replace()函數允許使用String和Regex來替換字元串，這個函數本身只能替換第一個匹配的串。但是你可以在正則表達式末尾添加/g來模擬replaceAll()函數：

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

10) 合併數組

如果你需要合併兩個數組，你可以使用Array.concat()函數：

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

但是，這個函數對於大數組來說不併合適，因為它將會創建一個新的數組並消耗大量的記憶體。在這種情況下，你可以使用Array.push.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];

11) 把NodeList轉換成數組

如果運行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]

結論

現在，你已經學到了一些有用的JS技巧，它們主要用於縮減JavaScript代碼量，其中一些技巧在許多流行的JS框架都使用到，如Lodash，Underscore.js，Strings.js等。如果你知道其他JS技巧，歡迎分享！


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 詳解HashMap數據結構實現
    HashMap的設計是由數組加鏈表的符合數據結構，在這裡用自己的語言以及結合源碼去總結一下，如果有不對的地方希望評論指正，先拱手謝謝。 HashMap是日常中非常常用的一種數據結構，我們要想深入瞭解學習任何一門技術，都是要先應用，再深入。深入就要瞭解實現的原理，在java語言中，最基本的結構是數組以 ...
  • Lock
    之前對於synchronized的實現和運用有所瞭解，但是也發現了一些缺陷，由於synchronized是在JVM層面上實現同步互斥，是以關鍵字形式加鎖，導致其顆粒度過大，有的時候不需要這麼大範圍的加鎖，在中斷和線程阻塞處理上也有所欠缺，在JDK1.5之後，Java引入了Lock，作為對於synch ...
  • Django入門筆記
    Django入門筆記 **文檔包含Django安裝包、學習的筆記、代碼等 安裝 Django參考附件，只需要把附件拷貝到你需要的目錄就行。Django是1.8.16版本 Python：在附件中，其中有Django需要的依賴包 編輯器：Aptana，一個強大的IDE工具，可以在上邊新建模板，支持各種語 ...
  • python基礎--異常，對象和迭代器
    異常處理 面向對象 迭代器和生成器 python異常處理 下麵代碼觸發了一個FileNotFoundError 拋出異常 異常類型 捕獲異常使用try,except,finally,else python面向對象 python是完全面向對象的，python中一切都是對象，包括變數，函數等。 定義一個 ...
  • 逆向工程
    1.概念 ①正向工程：Java類→資料庫表 MyBatis不支持 ②逆向工程：資料庫表→Java類 總結：通過MyBatis的jar包自動的生成資料庫所對應的Javabean。 步驟： 1.①創建一個專門的工程用於生成Java文件 先導包： 2.②pom.xml配置 3. ③創建generatorC ...
  • 前端迷思與React.js
    前端迷思與React.js 前端技術這幾年蓬勃發展, 這是當時某幾個項目需要做前端技術選型時, 相關資料整理, 部分評論引用自社區。 開始吧: 目前， Web 開發技術框架選型為兩種的占 80% 。這種戲劇性的變化持續了近 6 年。 自 2013 年 5 月推出以來，ReactJS 在過去三年中已成... ...
  • 十億級視頻播放技術優化揭密
    本文為轉載文章，文章來自：王輝|十億級視頻播放技術優化揭密 QCon是由InfoQ主辦的全球頂級技術盛會，每年在倫敦、北京、東京、紐約、聖保羅、上海、舊金山召開。自 2007年 3月份首次舉辦以來，已經有超萬名高級技術人員參加過QCon大會。QCon內容源於實踐並面向社區，演講嘉賓依據熱點話題，面向 ...
  • 讀 Zepto 源碼之神奇的 $
    無論是jquery還是zepto，都離不開$，這個符號似乎是萬能的，這篇文章通過zepto源碼來探究的就是$實現的原理。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類