JavaScript 開發人員需要知道的簡寫技巧

来源:http://www.cnblogs.com/powertoolsteam/archive/2017/10/24/shorthand-javascript.html
-Advertisement-
Play Games

本文來源於多年的 JavaScript 編碼技術經驗，適合所有正在使用 JavaScript 編程的開發人員閱讀。本文的目的在於幫助大家更加熟練的運用 JavaScript 語言來進行開發工作。 ...


本文來源於多年的 JavaScript 編碼技術經驗，適合所有正在使用 JavaScript 編程的開發人員閱讀。

本文的目的在於幫助大家更加熟練的運用 JavaScript 語言來進行開發工作。

文章將分成初級篇和高級篇兩部分，分別進行介紹。

 

初級篇

1、三目運算符

下麵是一個很好的例子，將一個完整的 if 語句，簡寫為一行代碼。

const x = 20;
let answer;
if (x > 10) {
    answer = 'greater than 10';
} else {
    answer = 'less than 10';
}

簡寫為：

const answer = x > 10 ? 'greater than 10' : 'less than 10';

 

2、迴圈語句

當使用純 JavaScript（不依賴外部庫，如 jQuery 或 lodash）時，下麵的簡寫會非常有用。

for (let i = 0; i < allImgs.length; i++)

簡寫為：

for (let index of allImgs)

下麵是遍曆數組 forEach 的簡寫示例：

function logArrayElements(element, index, array) {
  console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[2] = 9

 

3、聲明變數

在函數開始之前，對變數進行賦值是一種很好的習慣。在申明多個變數時：

let x;
let y;
let z = 3;

可以簡寫為：

let x, y, z=3;

 

4、if 語句

在使用 if 進行基本判斷時，可以省略賦值運算符。

if (likeJavaScript === true)

簡寫為：

if (likeJavaScript)

 

5、十進位數

可以使用科學計數法來代替較大的數據，如可以將 10000000 簡寫為 1e7。

for (let i = 0; i < 10000; i++) { }

簡寫為：

for (let i = 0; i < 1e7; i++) { }

 

6、多行字元串

如果需要在代碼中編寫多行字元串，就像下麵這樣：

const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
    + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
    + 'veniam, quis nostrud exercitation ullamco laboris\n\t'
    + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
    + 'irure dolor in reprehenderit in voluptate velit esse.\n\t'

但是還有一個更簡單的方法，只使用引號：

const lorem = `Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse.`

 

高級篇

1、變數賦值

當將一個變數的值賦給另一個變數時，首先需要確保原值不是 null、未定義的或空值。

可以通過編寫一個包含多個條件的判斷語句來實現：

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}

或者簡寫為以下的形式：

const variable2 = variable1  || 'new';

可以將下麵的代碼粘貼到 es6console 中，自己測試：

let variable1;
let variable2 = variable1  || '';
console.log(variable2 === ''); // prints true
variable1 = 'foo';
variable2 = variable1  || '';
console.log(variable2); // prints foo

 

2、預設值賦值

如果預期參數是 null 或未定義，則不需要寫六行代碼來分配預設值。我們可以只使用一個簡短的邏輯運算符，只用一行代碼就能完成相同的操作。

let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = 'localhost';
}

簡寫為：

const dbHost = process.env.DB_HOST || 'localhost';

 

3、對象屬性

ES6 提供了一個很簡單的辦法，來分配屬性的對象。如果屬性名與 key 名相同，則可以使用簡寫。

const obj = { x:x, y:y };

簡寫為：

const obj = { x, y };

 

4、箭頭函數

經典函數很容易讀寫，但是如果把它們嵌套在其它函數中進行調用時，整個函數就會變得有些冗長和混亂。這時候可以使用箭頭函數來簡寫：

function sayHello(name) {
  console.log('Hello', name);
}
 
setTimeout(function() {
  console.log('Loaded')
}, 2000);
 
list.forEach(function(item) {
  console.log(item);
});

簡寫為：

sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));

 

5、隱式返回值

返回值是我們通常用來返回函數最終結果的關鍵字。只有一個語句的箭頭函數，可以隱式返回結果（函數必須省略括弧（{ }），以便省略返回關鍵字）。

要返回多行語句（例如對象文本），需要使用（）而不是{ }來包裹函數體。這樣可以確保代碼以單個語句的形式進行求值。

function calcCircumference(diameter) {
  return Math.PI * diameter
}

簡寫為：

calcCircumference = diameter => (
  Math.PI * diameter;
)

 

6、預設參數值

可以使用 if 語句來定義函數參數的預設值。ES6 中規定了可以在函數聲明中定義預設值。

function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}

簡寫為：

volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24

 

7、模板字元串

過去我們習慣了使用“+”將多個變數轉換為字元串，但是有沒有更簡單的方法呢？

ES6 提供了相應的方法，我們可以使用反引號和 $ { } 將變數合成一個字元串。

const welcome = 'You have logged in as ' + first + ' ' + last + '.'
const db = 'http://' + host + ':' + port + '/' + database;

簡寫為：

const welcome = `You have logged in as ${first} ${last}`;
const db = `http://${host}:${port}/${database}`;

 

8、解構賦值

解構賦值是一種表達式，用於從數組或對象中快速提取屬性值，並賦給定義的變數。

在代碼簡寫方面，解構賦值能達到很好的效果。

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');
const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;

簡寫為：

import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props;

甚至可以指定自己的變數名：

const { store, form, loading, errors, entity:contact } = this.props;

 

9、展開運算符

展開運算符是在 ES6 中引入的，使用展開運算符能夠讓 JavaScript 代碼更加有效和有趣。

使用展開運算符可以替換某些數組函數。

// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
 
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice( )

簡寫為：

// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
 
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

和 concat( ) 功能不同的是，用戶可以使用擴展運算符在任何一個數組中插入另一個數組。

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

也可以將展開運算符和 ES6 解構符號結合使用：

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

 

10、強制參數

預設情況下，如果不向函數參數傳值，那麼 JavaScript 會將函數參數設置為未定義。其它一些語言則會發出警告或錯誤。要執行參數分配，可以使用if語句拋出未定義的錯誤，或者可以利用“強制參數”。

function foo(bar) {
  if(bar === undefined) {
    throw new Error('Missing parameter!');
  }
  return bar;
}

簡寫為：

mandatory = ( ) => {
  throw new Error('Missing parameter!');
}
foo = (bar = mandatory( )) => {
  return bar;
}

 

11、Array.find

如果你曾經編寫過普通 JavaScript 中的 find 函數，那麼你可能使用了 for 迴圈。在 ES6 中，介紹了一種名為 find（）的新數組函數，可以實現 for 迴圈的簡寫。

const pets = [
  { type: 'Dog', name: 'Max'},
  { type: 'Cat', name: 'Karl'},
  { type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
  for(let i = 0; i<pets.length; ++i) {
    if(pets[i].type === 'Dog' && pets[i].name === name) {
      return pets[i];
    }
  }
}

簡寫為：

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

 

12、Object [key]

雖然將 foo.bar 寫成 foo ['bar'] 是一種常見的做法，但是這種做法構成了編寫可重用代碼的基礎。

請考慮下麵這個驗證函數的簡化示例：

function validate(values) {
  if(!values.first)
    return false;
  if(!values.last)
    return false;
  return true;
}
console.log(validate({first:'Bruce',last:'Wayne'})); // true

上面的函數完美的完成驗證工作。但是當有很多表單，則需要應用驗證，此時會有不同的欄位和規則。如果可以構建一個在運行時配置的通用驗證函數，會是一個好選擇。

// object validation rules
const schema = {
  first: {
    required:true
  },
  last: {
    required:true
  }
}
 
// universal validation function
const validate = (schema, values) => {
  for(field in schema) {
    if(schema[field].required) {
      if(!values[field]) {
        return false;
      }
    }
  }
  return true;
}
console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true

現在有了這個驗證函數，我們就可以在所有窗體中重用，而無需為每個窗體編寫自定義驗證函數。

 

13、雙位操作符

位操作符是 JavaScript 初級教程的基本知識點，但是我們卻不常使用位操作符。因為在不處理二進位的情況下，沒有人願意使用 1 和 0。

但是雙位操作符卻有一個很實用的案例。你可以使用雙位操作符來替代 Math.floor( )。雙否定位操作符的優勢在於它執行相同的操作運行速度更快。

Math.floor(4.9) === 4  //true

簡寫為：

~~4.9 === 4  //true

 

總結

上述是一些常用的 JavaScript 簡寫技巧，如果有其它未提及的簡寫技巧，也歡迎大家補充。

原文鏈接：https://www.sitepoint.com/shorthand-javascript-techniques/

轉載請註明出自：葡萄城控制項

 

相關閱讀：

【報表福利大放送】100餘套報表模板免費下載

1分鐘選好最合適你的JavaScript框架

Top 10 JavaScript編輯器，你在用哪個？

 


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

-Advertisement-
Play Games
更多相關文章
  • Python 運算符
    1、算數運算 2、比較減運算 3、賦值運算 4、邏輯運算 5、成員運算 ...
  • UVW源碼漫談（四）
    十一假期後就有點懶散，好長時間都沒想起來寫東西了。另外最近在打LOL的S賽。接觸LOL時間不長，雖然平時玩的比較少，水平也相當菜，但是像這種大型的賽事有時間還是不會錯過的。主要能夠感受到選手們對競技的激情，對瞬息萬變的戰局的應變，非常精彩。KeKe～～。 這一篇主要對UVW的源碼討論來收個尾，就介紹 ...
  • 用node.js實現ORM的一種思路
    ORM是O和R的映射。O代錶面向對象，R代表關係型資料庫。二者有相似之處同時也各有特色。就是因為這種即是又非的情況，才需要做映射的。 理想情況是，根據關係型資料庫（含業務需求）的特點來設計資料庫。同時根據面向對象（含業務需求）的特點來設計模型（實體類）。然後再去考慮如何做映射。但是理想很骨jian感 ...
  • DUBBO初探-搭建DUBBO開發環境
    我所理解的DUBBO 相對於傳統web開發框架，dubbo更加適合於並行系統開發，分散式，模塊化。將server和client都註冊到zookeeper註冊中心上，然後由最外層客戶端發起請求到相應client上，client再調用server。所謂模塊化，舉例說明，將一個電商系統分隔成用戶，商品，進 ...
  • java SSM框架 代碼生成器 websocket即時通訊 shiro redis 後臺框架源碼
    A代碼編輯器，線上模版編輯，仿開發工具編輯器，pdf線上預覽，文件轉換編碼B 集成代碼生成器 [正反雙向](單表、主表、明細表、樹形表，快速開發利器)+快速表單構建器 freemaker模版技術 ，0個代碼不用寫，生成完整的一個模塊，帶頁面、建表sql腳本，處理類，service等完整模塊C 集成阿 ...
  • webpack解決跨域問題
    一、vue腳手架跨域問題 1.跨域問題 文件config/index.js 原始代碼： proxyTable修改如下： "參考資料" 2.遠程訪問問題 目的：寫好的項目希望在其他電腦上或手機上查看。 方法： 打開文件 config/index.js，在dev對象中添加一個屬性host，值為本機的ip ...
  • ELK系列~NLog.Targets.Fluentd到達如何通過tcp發到fluentd
    最近火的不能再火的日誌框架就是ELK，其中E（Elasticsearch）表示日誌存儲，L（Logstash）表示日誌收集，K（kibana）表示日誌的UI界面，用來查詢和分析，而其中的L可以使用Fluentd來代替，並且以上架構都可以通過docker來進行快速的部署。 它們的工作流程 fluent ...
  • [js插件開發教程]定製一個手風琴插件(accordion)
    本文帶來一個垂直方向的手風琴插件開發，可以定製的功能如下： 調用方法： 效果預覽： 效果預覽： 完整的手風琴插件代碼： html部分: 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <!--作者:ghostwu(吳華)--> 5 <meta char ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類