摘要：常規(guī)寫法速記法判斷變量是否存在速記法這可能會(huì)有些瑣碎，但是值得一提。常規(guī)寫法速記法注意這兩個(gè)例子并不是完全相等，只要變量是一個(gè)真值，該表達(dá)式就是成立的。

這確實(shí)是一篇針對(duì)于基于 JavaScript 語(yǔ)言編程的開發(fā)者必讀的文章。在過(guò)去幾年我學(xué)習(xí) JavaScript 的時(shí)候，我寫下了這篇文章，并將其作為 JavaScript 快速編程技巧的一個(gè)重要參考。為了有助于理解，針對(duì)常規(guī)寫法我也給出了相關(guān)的編程觀點(diǎn)。

2017 年 6 月 14 日：這篇文章更新了一些基于 ES6 的速記寫法。如果你想進(jìn)一步了解 ES6 中有哪些新增的變化，可以注冊(cè) SitePoint Premium 并查看我們錄制的視頻 A Look into ES6.

如果你想只用一行代碼寫出一個(gè) if..else 表達(dá)式，那么這是一個(gè)很好的節(jié)省代碼的方式。

常規(guī)寫法：

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

速記法：

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

你也可以像這樣嵌套 if 表達(dá)式：

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

當(dāng)需要給另一個(gè)變量分配一個(gè)變量時(shí)，你可能需要確保變量不是 null、undefined 或者不為空。你可以寫一個(gè)有多個(gè) if 表達(dá)式的語(yǔ)句，你也可以使用短路求值。

常規(guī)寫法：

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

速記法：

const variable2 = variable1  || "new";

你不相信這樣可以 work？那就自己測(cè)試下吧（把下面的代碼復(fù)制粘貼到 es6console：

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

variable1 = "foo";
variable2 = variable1  || "";
console.log(variable2); // prints foo

在函數(shù)里聲明變量時(shí)，如果需要同時(shí)聲明多個(gè)變量，這種速記法能夠給你節(jié)省大量的時(shí)間和空間。

常規(guī)寫法：

let x;
let y;
let z = 3;

速記法：

let x, y, z=3;

這可能會(huì)有些瑣碎，但是值得一提。當(dāng)需要用 if 判斷一個(gè)變量是否為真時(shí)，賦值運(yùn)算符有時(shí)候可以省略。

常規(guī)寫法：

if (likeJavaScript === true)

速記法：

if (likeJavaScript)

注意：這兩個(gè)例子并不是完全相等，只要 likeJavaScript 變量是一個(gè) 真值，該表達(dá)式就是成立的。

再給出一個(gè)例子。如果 "a" 不等于 true，如下：

常規(guī)寫法：

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

速記法：

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

如果你只想跑原生 JavaScript，不想依賴如 JQuery 或 lodash 這樣的外部庫(kù)，那這個(gè)小技巧會(huì)非常有用。

常規(guī)寫法：

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

速記法：

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

如果我們不想為了只是判斷一個(gè)變量是 null 或 undefined 就分配一個(gè)默認(rèn)值而寫六行代碼，那么可以使用短路邏輯操作符完成同樣的功能，而且只有一行代碼。

常規(guī)寫法：

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

速記法：

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

你可能隨處可見這種寫法。這是一種比較 fancy 的寫法，省去了后面的一堆零。舉個(gè)栗子，1e7 就意味著 1 后面跟著 7 個(gè)零。這是十進(jìn)制基數(shù)指數(shù)的一種寫法（JavaScript 會(huì)按照浮點(diǎn)類型去解釋），和 10,000,000 是相等的。

常規(guī)寫法：

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

速記法：

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;

在 JavaScript 中定義對(duì)象字面量非常簡(jiǎn)單。ES6 提供了一個(gè)更簡(jiǎn)單的定義對(duì)象屬性的方法。如果 name 和 key 名字相同，那么就可以直接使用如下速記法。

常規(guī)寫法：

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

速記法：

const obj = { x, y };

經(jīng)典的函數(shù)寫法易于閱讀，但是一旦將這樣的函數(shù)放進(jìn)回調(diào)中就會(huì)略顯冗長(zhǎng)，而且會(huì)造成一些困惑。

常規(guī)寫法：

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));

這里需要注意的是：this 值在箭頭函數(shù)和常規(guī)寫法的函數(shù)里是完全不同的，所以那兩個(gè)例子并不是嚴(yán)格等價(jià)的。查看 this article on arrow function syntax獲取更多細(xì)節(jié)。

我們經(jīng)常使用 return 關(guān)鍵字來(lái)返回一個(gè)函數(shù)的結(jié)果。僅有一個(gè)表達(dá)式的箭頭函數(shù)會(huì)隱性返回函數(shù)結(jié)果（函數(shù)必須省略大括號(hào)({})才能省略 return 關(guān)鍵字）。

如果要返回多行表達(dá)式（比如一個(gè)對(duì)象字面量），那么需要用 () 而不是 {} 來(lái)包裹函數(shù)體。這樣可以確保代碼作為一個(gè)多帶帶的表達(dá)式被計(jì)算返回。

常規(guī)寫法：

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

速記法：

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

你可以使用 if 表達(dá)式為函數(shù)參數(shù)定義默認(rèn)值。在 ES6 中，你可以在函數(shù)聲明的時(shí)候直接定義默認(rèn)值。

常規(guī)寫法：

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

你是不是已經(jīng)厭倦了使用 " + " 來(lái)將多個(gè)變量拼接成一個(gè)字符串？難道就沒有更簡(jiǎn)單的方式來(lái)完成嗎？如果你可以使用 ES6 的話，那么恭喜你，你要做的只是使用反引號(hào)和 ${} 來(lái)包裹你的變量。

常規(guī)寫法：

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

如果你正在使用任意一種流行的 web 框架，那么你很有可能會(huì)使用數(shù)組或者對(duì)象字面量形式的數(shù)據(jù)在組件和 API 之間傳遞信息。一旦組件接收到數(shù)據(jù)對(duì)象，你就需要將其展開。

常規(guī)寫法：

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;

如果你需要在代碼中寫多行字符串，那么你可能會(huì)這樣寫：

常規(guī)寫法：

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

但是有一種更簡(jiǎn)單的方法：使用反引號(hào)。

速記法：

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.

展開運(yùn)算符是在 ES6 中引入的，它的多種應(yīng)用場(chǎng)景使得 JavaScript 代碼使用起來(lái)更高效、更有趣。它可以用來(lái)替換某些數(shù)組函數(shù)。展開運(yùn)算符寫起來(lái)很簡(jiǎn)單，就是三個(gè)點(diǎn)。

常規(guī)寫法：

// 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() 函數(shù)不同，你可以在另一個(gè)數(shù)組里的任意位置插入一個(gè)數(shù)組。

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

你也可以將展開運(yùn)算符和 ES6 解析賦值結(jié)合起來(lái)使用：

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 默認(rèn)會(huì)將函數(shù)參數(shù)設(shè)置為 undefined。一些其他的編程語(yǔ)言會(huì)拋出警告或錯(cuò)誤。為了強(qiáng)制給參數(shù)賦值，如果參數(shù)沒有定義的話，你可以使用 if 表達(dá)式拋出錯(cuò)誤，或者可以使用“強(qiáng)制參數(shù)速記法”。

常規(guī)寫法：

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

速記法：

mandatory = () => {
  throw new Error("Missing parameter!");
}

foo = (bar = mandatory()) => {
  return bar;
}

如果你曾經(jīng)使用原生 JavaScript 寫一個(gè)查找函數(shù)，你可能會(huì)使用 for 循環(huán)。在 ES6 中，你可以使用數(shù)組的一個(gè)新方法 find()。

常規(guī)寫法：

const pets = [
  { type: "Dog", name: "Max"},
  { type: "Cat", name: "Karl"},
  { type: "Dog", name: "Tommy"},
]

function findDog(name) {
  for(let i = 0; i
速記法：
pet = pets.find(pet => pet.type ==="Dog" && pet.name === "Tommy");
console.log(pet); // { type: "Dog", name: "Tommy" }
18. Object [key] 速記法
你知道 Foo.bar 可以寫成 Foo["bar"] 吧。一開始，似乎并沒有原因解釋說(shuō)為什么應(yīng)該像這樣寫。但是這種寫法可以讓你編寫可重用代碼。
考慮下一個(gè)驗(yàn)證函數(shù)的簡(jiǎn)單例子：
function validate(values) {
  if(!values.first)
    return false;
  if(!values.last)
    return false;
  return true;
}

console.log(validate({first:"Bruce",last:"Wayne"})); // true
這個(gè)函數(shù)完美的實(shí)現(xiàn)了所需的功能。但是，請(qǐng)考慮一個(gè)場(chǎng)景：你有許多表單需要驗(yàn)證，并且不同的域有不同的驗(yàn)證規(guī)則。那創(chuàng)建一個(gè)在運(yùn)行時(shí)被配置的通用驗(yàn)證函數(shù)豈不是更好？
速記法：
// 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
現(xiàn)在創(chuàng)建了一個(gè)可以在所有的表單里重用的驗(yàn)證函數(shù)，而不必為每個(gè)表單多帶帶寫一個(gè)特定的驗(yàn)證函數(shù)。
19. 雙位取反運(yùn)算符速記法
逐位運(yùn)算符是你在剛學(xué)習(xí) JavaScript 時(shí)會(huì)學(xué)到的一個(gè)特性，但是如果你不處理二進(jìn)制的話，基本上是從來(lái)都不會(huì)用上的。
但是，雙位運(yùn)算符有一個(gè)非常實(shí)用的使用場(chǎng)景：可以用來(lái)代替 Math.floor。雙位取反運(yùn)算符的優(yōu)勢(shì)在于它執(zhí)行相同操作的速度更快。你可以在這里查看更多關(guān)于位運(yùn)算符的知識(shí)。
常規(guī)寫法：
Math.floor(4.9) === 4  //true
速記法：
~~4.9 === 4  //true
20. 還有其他的小技巧？
我確實(shí)喜歡這些小技巧，也樂于發(fā)現(xiàn)更多的小技巧。如果你有什么想說(shuō)的話，就直接留言吧！
譯者：myvin
鏈接：http://www.zcfy.cc/article/3519
原文：https://www.sitepoint.com/shorthand-javascript-techniques/

原文地址:
https://www.sitepoint.com/sho...
眾成翻譯
http://www.zcfy.cc/article/19...