三元操作符

如果使用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';
const big = x > 10 ? " greater 10" : x

Short-circuit Evaluation

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

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

Shorthand:

const variable2 = variable1 || 'new';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)

JavaScript的for循環

如果你只想要原生的JavaScript，而不想依賴于jQuery或Lodash這樣的外部庫，那這個小技巧是非常有用的。

Longhand:

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

Shorthand:

for (let index in allImgs)

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;

?

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的JavaScript 编码小技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。