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

77rou發表於2017-10-24
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';

可以將下面的程式碼貼上到  中，自己測試： 

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 開發工具推薦

純前端表格控制元件是基於 HTML5 的 JavaScript 電子表格和網格功能控制元件，提供了完備的公式引擎、排序、過濾、輸入控制元件、資料視覺化、Excel 匯入/匯出等功能，適用於 .NET、Java 和移動端等各平臺線上編輯類 Excel 功能的表格程式開發。

 

總結

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

原文連結：

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

 

關於葡萄城

葡萄城成立於1980年，是全球最大的控制元件提供商，世界領先的企業應用定製工具、企業報表和商業智慧解決方案提供商，為超過75%的全球財富500強企業提供服務。葡萄城於1988年在中國設立研發中心，在全球化產品的研發過程中，不斷適應中國市場的本地需求，併為軟體企業和各行業的資訊化提供優秀的軟體工具和諮詢服務。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/28298702/viewspace-2146296/，如需轉載，請註明出處，否則將追究法律責任。

相關文章