JavaScript 經常使用的簡寫技巧

1. 三元運算符

當你想用一行代碼來寫if...else語句的時候，使用三元操做符是很是好的選擇，例如：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

能夠簡寫爲：

const answer = x > 10 ? 'is greater' : 'is lesser';

• 1

• 1

也能夠嵌套if語句：

const big = x > 10 ? " greater 10" : x

• 1

• 1

2. 簡寫短路求值

當給一個變量分配另外一個值的時候，你可能想肯定初值不是null，undefined或空值。這時，你能夠寫一個多重條件的if語句：

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

• 1
• 2
• 3

• 1
• 2
• 3

或者可使用短路求值的方法：

const variable2 = variable1 || 'new';

• 1

• 1

3. 簡寫變量聲明

在定義函數的時候，你可能須要先聲明多個變量，例如：

let x; let y; let z = 3;

• 1
• 2
• 3

• 1
• 2
• 3

這時，你可使用簡寫的方式節省不少時間和空間，即同時聲明多個變量：

let x, y, z=3;

• 1

• 1

4. 簡寫 if 執行條件

這可能微不足道，但值得一提。在你作if條件檢查的時候，其賦值操做能夠省略，例如：

if (likeJavaScript === true)

• 1

• 1

能夠簡寫爲：

if (likeJavaScript)

• 1

• 1

只有當likeJavaScript是真值的時候，以上兩個語句才能夠替換。若是判斷假值，例如：

let a; if ( a !== true ) { // do something... }

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

能夠簡寫爲：

let a; if ( !a ) { // do something... }

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

5. 簡寫 JavaScript 循環方法

當你想使用純 javascript 而不依賴外庫（例如jQuery）的時候，這是很是有用的。

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

• 1

• 1

能夠簡寫爲：

for (let index in allImgs)

• 1

• 1

也可使用Array.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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

6. 短路求值

若是想經過判斷參數是否爲null或者undefined來分配默認值的話，咱們不須要寫六行代碼，而是可使用一個短路邏輯運算符，只用一行代碼來完成相同的操做。例如：

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

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

能夠簡寫爲：

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

• 1

• 1

7. 十進制指數

當數字的尾部爲不少的零時（如10000000），我們可使用指數（1e7）來代替這個數字，例如：

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

• 1

• 1

能夠簡寫爲：

for (let i = 0; i < 1e7; i++) {} // 下面都是返回 true 1e0 === 1; 1e1 === 10; 1e2 === 100; 1e3 === 1000; 1e4 === 10000; 1e5 === 100000;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

8. 簡寫對象屬性

在 JavaScript 中定義對象很簡單，並且ES6提供了一個更簡單的分配對象屬性的方法。若是屬性名與key值相同，例如：

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

• 1

• 1

則能夠簡寫爲：

const obj = { x, y };

• 1

• 1

9. 簡寫箭頭函數

傳統函數很容易讓人理解和編寫，可是當它嵌套在另外一個函數中的時候，它就會變得冗長和混亂。例如：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

這時，能夠簡寫爲：

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

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

10. 簡寫隱式返回值

咱們常常使用return語句來返回函數最終結果，僅有一行聲明語句的箭頭函數能隱式返回其值（這時函數必須省略{}以便省略return關鍵字）。若是想要返回多行語句，則須要使用()包圍函數體。例如：

function calcCircumference(diameter) { return Math.PI * diameter } var func = function func() { return { foo: 1 }; };

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

能夠簡寫爲：

calcCircumference = diameter => ( Math.PI * diameter; ) var func = () => ({ foo: 1 });

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

11. 默認參數值

咱們常常可使用if語句來爲函數中的參數定義默認值。可是在ES6中，我們能夠在函數自己聲明參數的默認值。例如：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

能夠簡寫爲：

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

• 1
• 2
• 3

• 1
• 2
• 3

12. 字符串模板

你是否是厭倦了使用+將多個變量轉換爲字符串？有沒有更簡單的方法呢？若是你可以使用ES6，那麼很幸運，你僅需使用反引號並將變量置於${}之中便可。例如：

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

• 1
• 2
• 3

• 1
• 2
• 3

能夠簡寫爲：

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

• 1
• 2
• 3

• 1
• 2
• 3

13. 簡寫賦值方法

若是你正在使用任何流行的 Web 框架，那麼你頗有可能使用數組或以對象本文的形式將數據在組件和 API 之間進行通訊。一旦數據對象到達一個組件，你就須要解壓它。例如：

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;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

能夠簡寫爲：

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

• 1
• 2
• 3

• 1
• 2
• 3

也能夠分配變量名：

// 最後一個變量名爲 contact const { store, form, loading, errors, entity:contact } = this.props; 

• 1
• 2
• 3

• 1
• 2
• 3

14. 簡寫多行字符串

若是你曾發現本身須要在代碼中編寫多行字符串，那麼這估計就是你編寫它們的方法，即在輸出的多行字符串間用+來拼接：

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'

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

可是若是使用反引號，你就能夠達到簡寫的目的：

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
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

15. 擴展運算符

在ES6中，包括擴展運算符，它可使你的操做更簡單，例如：

// 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()

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

能夠簡寫爲：

// 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];

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

不像concat()函數，你可使用擴展運算符在一個數組中任意處插入另外一個數組，例如：

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

• 1
• 2

• 1
• 2

也可使用擴展運算符：

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 }

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

16. 強制參數

默認狀況下，若是不傳遞值，JavaScript 會將函數參數設置爲undefined，而其餘一些語言則會報出警告或錯誤。想要執行參數分配，則可讓if語句拋出undefined的錯誤，或者使用「強制參數」的方法。例如：

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

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

能夠簡寫爲：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

17. Array.find 簡寫

若是你曾負責編寫 JavaScript 中的find函數，那麼你頗有可能使用了for循環。在此，介紹ES6中一個名爲find()的數組函數。

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

能夠簡寫爲：

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

• 1
• 2

• 1
• 2

18. 簡寫 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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

這個函數能夠完美的完成它的任務。可是，考慮一個場景，你有不少表單，你須要進行驗證，但有不一樣的字段和規則。那麼，構建一個能夠在運行時配置的通用驗證函數不是很好嗎？

// 對象驗證規則 const schema = { first: { required:true }, last: { required:true } } // 通用驗證函數 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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

如今咱們就有了一個能夠在全部的form中重用的驗證函數，而無需爲每一個form編寫其自定義的驗證函數啦！

19. 簡寫雙重按位非運算符

按位運算符絕對是你初學 JavaScript 時瞭解的但一直沒有用武之地的運算符。由於若是不處理二進制，誰會沒事操做0和1呢？可是，雙重按位非運算符很是實用，例如你可使用它來替代floor()函數，並且與其餘相同的操做相比，按位運算符的操做速度更快。

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

• 1

• 1

能夠簡寫爲：

~~4.9 === 4 //true