19 個 JavaScript 編碼小技巧

這篇文章適合任何一位基於JavaScript開發的開發者。我寫這篇文章主要涉及JavaScript中一些簡寫的代碼，幫助你們更好理解一些JavaScript的基礎。但願這些代碼能從不一樣的角度幫助你更好的理解JavaScript。

三元操做符

若是使用if...else語句，那麼這是一個很好節省代碼的方式。

Longhand:

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

Shorthand:

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

你還能夠像下面這樣嵌套if語句：

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

Short-circuit Evaluation

分配一個變量值到另外一個變量的時候，你可能想要確保變量不是null、undefined或空。你能夠寫一個有多個if的條件語句或者Short-circuit Evaluation。

Longhand:

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

Shorthand:

const variable2 = variable1  || 'new';

不要相信我，請先相信本身的測試（能夠把下面的代碼粘貼在es6console）

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

聲明變量

在函數中聲明變量時，像下面這樣同時聲明多個變量能夠節省你大量的時間和空間：

Longhand:

let x;
let y; let x = 3;

Shorthand:

let x, y, z=3;

若是存在

這多是微不足道的，但值得說起。作「若是檢查」時，賦值操做符有時能夠省略。

Longhand:

if (likeJavaScript === true)

Shorthand:

if (likeJavaScript)

注：這兩種方法並不徹底相同，簡寫檢查只要likeJavaScript是true都將經過。

這有另外一個示例。若是a不是true，而後作什麼。

Longhand:

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

Shorthand:

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

JavaScript的for循環

若是你只想要原生的JavaScript，而不想依賴於jQuery或Lodash這樣的外部庫，那這個小技巧是很是有用的。

Longhand:

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

Shorthand:

for (let index in allImgs)

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

Short-circuit Evaluation

若是參數是null或者是undefined，咱們能夠簡單的使用一個Short-circuit邏輯運算，實現一行代碼替代六行代碼的寫法。

Longhand:

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

Shorthand:

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

十進制指數

你可能看過這個。它本質上是一個寫數字的奇特寫法，就是一個數字後面有不少個0。例如1e7本質至關於10000000（1的後面有7個0）。它表明了十進制計數等於10000000。

Longhand:

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

Shorthand:

for (let i = 0; i < 1e7; i++) {} // All the below will evaluate to true 1e0 === 1; 1e1 === 10; 1e2 === 100; 1e3 === 1000; 1e4 === 10000; 1e5 === 100000;

對象屬性

定義對象文字（Object literals）讓JavaScript變得更有趣。ES6提供了一個更簡單的辦法來分配對象的屬性。若是屬性名和值同樣，你可使用下面簡寫的方式。

Longhand:

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

Shorthand:

const obj = { x, y };

箭頭函數

經典函數很容易讀和寫，但它們確實會變得有點冗長，特別是嵌套函數中調用其餘函數時還會讓你感到困惑。

Longhand:

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

Shorthand:

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

隱式返回

return在函數中常用到的一個關鍵詞，將返回函數的最終結果。箭頭函數用一個語句將隱式的返回結果（函數必須省略{}，爲了省略return關鍵詞）。

若是返回一個多行語句（好比對象），有必要在函數體內使用()替代{}。這樣能夠確保代碼是否做爲一個單獨的語句返回。

Longhand:

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

Shorthand:

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

默認參數值

你可使用if語句來定義函數參數的默認值。在ES6中，能夠在函數聲明中定義默認值。

Longhand:

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

Shorthand:

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

Template Literals

是否是厭倦了使用+來鏈接多個變量變成一個字符串？難道就沒有一個更容易的方法嗎？若是你能使用ES6，那麼你是幸運的。在ES6中，你要作的是使用撇號和${}，而且把你的變量放在大括號內。

Longhand:

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

Shorthand:

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

Destructuring Assignment

若是你正在使用任何一個流行的Web框架時，就有不少機會使用數組的形式或數據對象的形式與API之間傳遞信息。一旦數據對象達到一個對個組件時，你須要將其展開。

Longhand:

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;

Shorthand:

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

你甚至能夠本身指定變量名：

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

多行字符串

你會發現之前本身寫多行字符串的代碼會像下面這樣：

Longhand:

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'

但還有一個更簡單的方法。使用撇號。

Shorthand:

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.`

Spread Operator

Spread Operator是ES6中引入的，使JavaScript代碼更高效和有趣。它能夠用來代替某些數組的功能。Spread Operator只是一個系列的三個點(...)。

Longhand:

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

Shorthand:

// 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()函數，使用Spread Operator你能夠將一個數組插入到另外一個數組的任何地方。

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

另外還能夠看成解構符：

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 }

強制參數

默認狀況下，JavaScript若是不給函數參數傳一個值的話，將會是一個undefined。有些語言也將拋出一個警告或錯誤。在執行參數賦值時，你可使用if語句，若是未定義將會拋出一個錯誤，或者你可使用強制參數（Mandatory parameter）。

Longhand:

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

Shorthand:

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

Array.find

若是你之前寫過一個查找函數，你可能會使用一個for循環。在ES6中，你可使用數組的一個新功能find()。

Longhand:

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

Shorthand:

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

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

這個函數能夠正常工做。然而，須要考慮一個這樣的場景：有不少種形式須要應用驗證，並且不一樣領域有不一樣規則。在運行時很難建立一個通用的驗證功能。

Shorthand:

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

如今咱們有一個驗證函數，能夠各類形式的重用，而不須要爲每一個不一樣的功能定製一個驗證函數。

Double Bitwise NOT

若是你是一位JavaScript新手的話，對於逐位運算符（Bitwise Operator）你應該永遠不會在任何地方使用。此外，若是你不處理二進制0和1，那就更不會想使用。

然而，一個很是實用的用例，那就是雙位操做符。你能夠用它替代Math.floor()

Longhand:

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

Shorthand:

~~4.9 === 4 //true