2. 程式人生 > >超實用的JavaScript技巧及最佳實踐（下）

超實用的JavaScript技巧及最佳實踐（下）

阿新 • • 發佈：2019-02-14

1.使用邏輯符號&&或者||進行條件判斷

  1. var foo = 10;    
  2. foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething(); 
  3. foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();

AND也可以用來設定函式引數的預設值

  1. Function doSomething(arg1){   
  2.     Arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set
  3. }  
2.使用map()方法來遍歷陣列
  1. var squares = [1,2,3,4].map(function (val) {    
  2.     return val * val;    
  3. });   
  4. // squares will be equal to [1, 4, 9, 16] 
3.舍入小數位數
  1. var num =2.443242342;  
  2. num = num.toFixed(4);  // num will be equal to 2.4432
4.浮點數問題
  1. 0.1 + 0.2 === 0.3 
    // is false 
  2. 9007199254740992 + 1 // is equal to 9007199254740992  
  3. 9007199254740992 + 2 // is equal to 9007199254740994

0.1+0.2等於0.30000000000000004，為什麼會發生這種情況？根據IEEE754標準，你需要知道的是所有JavaScript數字在64位二進位制內的都表示浮點數。開發者可以使用toFixed()和toPrecision()方法來解決這個問題。

5.使用for-in loop檢查遍歷物件屬性

下面這段程式碼主要是為了避免遍歷物件屬性。

  1. for (var name 
    in object) {    
  2.     if (object.hasOwnProperty(name)) {   
  3.         // do something with name                    
  4.     }    
  5. }  
6.逗號操作符
  1. var a = 0;   
  2. var b = ( a++, 99 );   
  3. console.log(a);  // a will be equal to 1 
  4. console.log(b);  // b is equal to 99
7.計算或查詢快取變數

在使用jQuery選擇器的情況下，開發者可以快取DOM元素

  1. var navright = document.querySelector('#right');   
  2. var navleft = document.querySelector('#left');   
  3. var navup = document.querySelector('#up');   
  4. var navdown = document.querySelector('#down');  
8.在將引數傳遞到isFinite()之前進行驗證
  1. isFinite(0/0) ; // false 
  2. isFinite("foo"); // false 
  3. isFinite("10"); // true 
  4. isFinite(10);   // true 
  5. isFinite(undifined);  // false 
  6. isFinite();   // false 
  7. isFinite(null);  // true  !!! 
9.在陣列中避免負向索引
  1. var numbersArray = [1,2,3,4,5];   
  2. var from = numbersArray.indexOf("foo") ;  // from is equal to -1 
  3. numbersArray.splice(from,2);    // will return [5]

確保引數傳遞到indexOf()方法裡是非負向的。

10.（使用JSON）序列化和反序列化
  1. var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };   
  2. var stringFromPerson = JSON.stringify(person);   
  3. /* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"   */
  4. var personFromString = JSON.parse(stringFromPerson);    
  5. /* personFromString is equal to person object  */
11.避免使用eval()或Function建構函式

eval()和Function建構函式被稱為指令碼引擎，每次執行它們的時候都必須把原始碼轉換成可執行的程式碼，這是非常昂過的操作。

  1. var func1 = new Function(functionCode);  
  2. var func2 = eval(functionCode);  
12.避免使用with()方法

如果在全域性區域裡使用with()插入變數，那麼，萬一有一個變數名字和它名字一樣，就很容易混淆和重寫。

13.避免在數組裡使用for-in loop

而不是這樣用：

  1. var sum = 0;    
  2. for (var i in arrayNumbers) {    
  3.     sum += arrayNumbers[i];    
  4. }  
這樣會更好：
  1. var sum = 0;    
  2. for (var i = 0, len = arrayNumbers.length; i < len; i++) {    
  3.     sum += arrayNumbers[i];    
  4. }  
這樣會更快：
  1. for (var i = 0; i < arrayNumbers.length; i++)  
為什麼？陣列長度arraynNumbers在每次loop迭代時都會被重新計算。

14.不要向setTimeout()和setInterval()方法裡傳遞字串

如果在這兩個方法裡傳遞字串，那麼字串會像eval那樣重新計算，這樣速度就會變慢，而不是這樣使用：

  1. setInterval('doSomethingPeriodically()', 1000);    
  2. setTimeOut('doSomethingAfterFiveSeconds()', 5000);  
相反，應該這樣用：
  1. setInterval(doSomethingPeriodically, 1000);    
  2. setTimeOut(doSomethingAfterFiveSeconds, 5000);  
15.使用switch/case語句代替較長的if/else語句

如果有超過2個以上的case，那麼使用switch/case速度會快很多，而且程式碼看起來更加優雅。

16.遇到數值範圍時，可以選用switch/casne
  1. function getCategory(age) {    
  2.     var category = "";    
  3.     switch (true) {    
  4.         case isNaN(age):    
  5.             category = "not an age";    
  6.             break;    
  7.         case (age >= 50):    
  8.             category = "Old";    
  9.             break;    
  10.         case (age <= 20):    
  11.             category = "Baby";    
  12.             break;    
  13.         default:    
  14.             category = "Young";    
  15.             break;    
  16.     };    
  17.     return category;    
  18. }    
  19. getCategory(5);  // will return "Baby"
17.建立一個物件，該物件的屬性是一個給定的物件

可以編寫一個這樣的函式，建立一個物件，該物件屬性是一個給定的物件，好比這樣：

  1. function clone(object) {    
  2.     function OneShotConstructor(){};   
  3.     OneShotConstructor.prototype= object;    
  4.     returnnew OneShotConstructor();   
  5. }   
  6. clone(Array).prototype ;  // []
18.一個HTML escaper函式
  1. function escapeHTML(text) {    
  2.     var replacements= {"<": "<", ">": ">","&": "&", "\"": ""

    相關推薦

    超實用的JavaScript技巧及最佳實踐（下）

    1.使用邏輯符號&&或者||進行條件判斷 var foo = 10;     foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething(); 

    20個超實用的JavaScript技巧及最佳實踐

    眾所周知，JavaScript是一門非常流行的程式語言，開發者用它不僅可以開發出炫麗的Web程式，還可以用它來開發一些移動應用程式（如PhoneGap或Appcelerator），它還有一些服務端實現，比如NodeJS、Wakanda以及其它實現。此外，許多開發者都會把JavaScript選為入門語言，使

    Greenplum在企業生產中的最佳實踐（下）

    原文地址 今天，我們將分享國內客戶在使用GP時遇到的問題及相關建議。同時，架構師就大家經常遇到的技術問題進行了細緻的說明，相信對您有所啟迪！ 第一個案例——底層資料檔案報錯處理 在一個金融客戶的案例中發現RAID卡故障導致底層的資料檔案損壞了。這是什麼意思呢？假如通

    ADO.NET最佳實踐（下）

    為了更好地理解ADO.NET模型和設計思想，回顧一下ADO的概念是有用的。ADO使用一個單一的物件Recordset與所有資料型別打交道。Recordset被用來處理從資料庫返回的只進流資料、翻卷伺服器上資料或者翻卷一批儲存結果集。資料上的改變會立即運用到資料庫上或運用到使用樂觀查詢和更新操作的一批資料上。當

    高效運維最佳實踐（03）：Redis叢集技術及Codis實踐 (轉)

    專欄介紹 “高效運維最佳實踐”是InfoQ在2015年推出的精品專欄，由觸控科技運維總監蕭田國撰寫，InfoQ總編輯崔康策劃。 前言 誠如開篇文章所言，高效運維包括管理的專業化和技術的專業化。前兩篇我們主要在說些管理相關的內容，本篇說一下技術專業化。希望讀者朋友們能適應這個轉

    項目管理全過程最佳實踐（上）

    管理昨天參加了部門組織的項目管理培訓，培訓主題是「項目管理全過程最佳實踐」，培訓時間為1天，講師是現代卓越的鄭曉龍老師，整體感覺，教授氛圍和互動方式都很輕松，讓人印象深刻，有不少收獲，分享給大家。 會分2篇文章分享，整體分享點如下： 教授方式 概述 定目標 拜真佛 編計劃 要資源 抓落實 一頁紙項目管理

    Java Exception最佳實踐（轉）

    理解 異常 resource 開發 lock 結束線程 用戶名 文檔 each https://www.dubby.cn/detail.html?id=9033 1.異常介紹 2.Java中的異常介紹 3.自定義異常 4.幾個建議 1）不要生吞異常 2）申明具體的異常

    Spring Boot 最佳實踐（一）快速入門

    我想 並不是 系統 exe 輸出 開發環境 模型 hot 根據 一、關於Spring Boot 在開始了解Spring Boot之前，我們需要先了解一下Spring，因為Spring Boot的誕生和Spring是息息相關的，Spring Boot是Spring發展到一定程

    Spring Boot 最佳實踐（二）集成Jsp與生產環境部署

    內容 tro conf 相關 安裝 packaging exc 詳細介紹 更新 一、簡介 提起Java不得不說的一個開發場景就是Web開發，也是Java最熱門的開發場景之一，說到Web開發繞不開的一個技術就是JSP，因為目前市面上仍有很多的公司在使用JSP，所以本文就來介紹

    Spring Boot 最佳實踐（四）模板引擎Thymeleaf集成

    data 圖層 int app 創建模板 原因 xmlns make 使用場景 一、Thymeleaf介紹 Thymeleaf是一種Java XML / XHTML / HTML5模板引擎，可以在Web和非Web環境中使用。它更適合在基於MVC的Web應用程序的視圖層提供X

    車聯網上雲最佳實踐（二）

    ice http請求 ack lse .html 1.2 ive bms 的人 摘要： 我們對傳統IDC應用架構進行分析之後，我們發現之前的系統架構存在一些不合理的地方導致了很多的痛點，為了解決這些痛點我們最終考慮上雲。開始思考怎樣利用雲上產品來解決目前遇到的痛點。例如 雲

    OpenResty 最佳實踐 （2）

    此文已由作者湯曉靜授權網易雲社群釋出。 歡迎訪問網易雲社群，瞭解更多網易技術產品運營經驗。 lua 協程與 nginx 事件機制結合 文章前部分用大量篇幅闡述了 lua 和 nginx 的相關知識，包括 nginx 的程序架構，nginx 的事件迴圈機制，lua 協程，lua 協程如何與 C

    Unity2018照明流程最佳實踐（上）

    目前 Unity 提供了多種渲染管道，兩種全域性照明系統，四種照明模式，三種燈光模式，以及兩種 Shadowmask 模式，為開發者在建立面向高配PC、主機、移動和XR裝置專案的過程中提供了高度靈活性。但是，作為 Unity 新手，如果不熟悉渲染的話，面對這些選擇不免感到茫然，本文

    Spring Boot 最佳實踐（三）模板引擎FreeMarker整合

    一、FreeMaker介紹 FreeMarker是一款免費的Java模板引擎，是一種基於模板和資料生成文字（HMLT、電子郵件、配置檔案、原始碼等）的工具，它不是面向終端使用者的，而是一款程式設計師使用的元件。 FreeMarker最初設計是用來在MVC模式的Web

    Spring Boot 最佳實踐（五）Spring Data JPA 操作 MySQL 8

    一、Spring Data JPA 介紹 JPA（Java Persistence API）Java持久化API，是 Java 持久化的標準規範，Hibernate是持久化規範的技術實現，而Spring Data JPA是在 Hibernate 基礎上封裝的一款框架

    SpringCloud入門最佳實踐（三）Rest微服務構建案例工程模組

    介紹 承接著我們的springmvc+mybatis+mysql初級高階課程，以Dept部門模組做一個微服務通用案例Consumer消費（Client）通過REST呼叫Provider提供者（Serv

    最佳實踐（1）：安卓開發

    這篇文章主要為Futurice公司Android開發者總結的經驗教訓。遵循這些規範可以避免無謂的重複勞動。如果對iOS或Windows Phone平臺的開發感興趣，請檢視《iOS開發最佳實踐》和《Windows客戶端最佳實踐》。 歡迎反饋，但請先閱讀反饋規範。 摘要 使用Gr

    規模化敏捷開發的10個最佳實踐（上）

    【編者按】軟體開發和採購人員經常會對現有軟體開發方法、技巧和工具產生一些疑問。針對這些疑問，Kevin Fall 整理了五個軟體方面的話題：Agile at Scale，Safety-Critical Systems，Monitoring Software-In

    孫宇聰：來自Google的DevOps理念及實踐（下） – 運維派

    接下來聊一聊SRE的一些最佳實踐，我認為Google做得比較好的幾點。 SRE的最佳實踐 建設平臺化服務體系 首先， Google現在是一個六萬人的公司，涉及到的產品線可能一百多個，各個部門之間差距很大，而且Google全球幾百個資料中心，有很多機器，它如何管理？如果按照國內公司的方式去管理早就累死

    最佳實踐（2）：iOS開發篇

    這份文件就像軟體專案一樣，如果我們不維護它就會逐漸腐壞。歡迎大家跟我們一起來維護它——只需提交 issue 或者發 pull request 即可！ 為什麼要寫這篇文件？ iOS 開發在上手時可能會有些令人生畏。無論是 Objective-C 還是 Swift 在別處都沒有廣