JavaScript技巧[轉載]

来源:http://www.cnblogs.com/yzg1/archive/2016/06/07/5567309.html
-Advertisement-
Play Games

在這篇文章中將給大家分享12個有關於JavaScript的小技巧。這些小技巧可能在你的實際工作中或許能幫助你解決一些問題。 使用!!操作符轉換布爾值 有時候我們需要對一個變數查檢其是否存在或者檢查值是否有一個有效值，如果存在就返回true值。為了做這樣的驗證，我們可以使用!!操作符來實現是非常的方便 ...


在這篇文章中將給大家分享12個有關於JavaScript的小技巧。這些小技巧可能在你的實際工作中或許能幫助你解決一些問題。

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

有時候我們需要對一個變數查檢其是否存在或者檢查值是否有一個有效值，如果存在就返回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

在這個示例中，只要account.cash的值大於0，那麼account.hasMoney返回的值就是true。

使用+將字元串轉換成數字

這個技巧非常有用，其非常簡單，可以交字元串數據轉換成數字，不過其只適合用於字元串數據，否則將返回NaN，比如下麵的示例：

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

這個也適用於Date，在本例中，它將返回的是時間戳數字：

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

並條件符

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

if (conected) {
    login();
}

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

conected && login();

如果一些屬性或函數存在於一個對象中，你也可以這樣做檢測，如下麵的代碼所示：

user && user.login();

使用||運算符

在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

在迴圈中緩存array.length

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

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

如果是一個小型數組，這樣做很好，如果你要處理的是一個大的數組，這段代碼在每次迭代都將會重新計算數組的大小，這將會導致一些延誤。為了避免這種現象出現，可以將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]);
}

檢測對象中屬性

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

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

在這個示例中，如果document不存在querySelector函數，那麼就會調用docuemnt.getElementById("id")。

獲取數組中最後一個元素

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小技巧，歡迎在評論中與我們一起分享。

本文出處：http://www.w3cplus.com/javascript/12-extremely-useful-hacks-for-javascript.html


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

-Advertisement-
Play Games
更多相關文章
  • [javaSE] IO流（管道流）
    之前我們使用io流，都是需要一個中間數組，管道流可以直接輸入流對接輸出流，一般和多線程配合使用，當讀取流中沒數據時會阻塞當前的線程，對其他線程沒有影響 定義一個類Read實現Runable介面，實現run()方法，構造方法傳遞PipedInputStream對象 讀取流裡面的數據 定義一個類Writ ...
  • java springmvc mybatis mysql
    僅供參考 java springMvc mybatis mylsq 項目搭建 1.開發環境： window 64、jdk 1.7.0_51、eclipse、tomcat 7 2.jdk安裝與環境變數配置 http://jingyan.baidu.com/article/6dad5075d1dc40a ...
  • java的if else語句入門
    條件語句，是程式中根據條件是否成立進行選擇執行的一類語句，這類語句在實際使用中，難點在於如何準確的抽象條件。例如實現程式登錄功能時，如果用戶名和密碼正確，則進入系統，否則彈出“密碼錯誤”這樣的提示框等。 本部分對於條件語句的介紹，重點在於語法講解和基本的使用，更詳細的使用參看後續的綜合示例部分。 在 ...
  • 淺談我對DDD領域驅動設計的理解
    從遇到問題開始 當人們要做一個軟體系統時，一般總是因為遇到了什麼問題，然後希望通過一個軟體系統來解決。 比如，我是一家企業，然後我覺得我現線上下銷售自己的產品還不夠，我希望能夠線上上也能銷售自己的產品。所以，自然而然就想到要做一個普通電商系統，用於實現線上銷售自己企業產品的目的。 再比如，我是一家互 ...
  • [Effective JavaScript 筆記]第28條：不要信賴函數對象的toString方法
    js函數有一個非凡的特性，即將其源代碼重現為字元串的能力。 反射獲取函數源代碼的功能很強大，使用函數對象的toString方法有嚴重的局限性。toString方法的局限性ECMAScript標準對函數對象的toString方法的返回結果（即該字元串）並沒有任何要求。這意味著不同的js引擎將產生不同的 ...
  • html筆記
    http-equiv 屬性為名稱/值對提供了名稱。並指示伺服器在發送實際的文檔之前先在要傳送給瀏覽器的 MIME 文檔頭部包含名稱/值對。 當伺服器向瀏覽器發送文檔時，會先發送許多名稱/值對。雖然有些伺服器會發送許多這種名稱/值對，但是所有伺服器都至少要發送一個：content-type:text/ ...
  • 前端架構知識體系
    1. 前端框架： Bootstrap: http://www.bootcss.com/ Semantic UI:http://www.semantic-ui.cn/ Flat UI:http://www.bootcss.com/p/flat-ui/ ONIUI:http://hotelued.qun ...
  • [轉]Hide or Remove jquery ui tab based on condition
    本文轉自：http://stackoverflow.com/questions/19132970/hide-or-remove-jquery-ui-tab-based-on-condition 問： Html: What I try on js : Sample Fiddle. I want to ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類