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

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

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

如果你想只用一行代碼寫出一個 if..else 表達式，那么這是一個很好的節(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 表達式：

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

當需要給另一個變量分配一個變量時，你可能需要確保變量不是 null、undefined 或者不為空。你可以寫一個有多個 if 表達式的語句，你也可以使用短路求值。

常規(guī)寫法：

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

速記法：

const variable2 = variable1  || "new";

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

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

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

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

常規(guī)寫法：

let x;
let y;
let z = 3;

速記法：

let x, y, z=3;

這可能會有些瑣碎，但是值得一提。當需要用 if 判斷一個變量是否為真時，賦值運算符有時候可以省略。

常規(guī)寫法：

if (likeJavaScript === true)

速記法：

if (likeJavaScript)

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

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

常規(guī)寫法：

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

速記法：

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

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

常規(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

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

常規(guī)寫法：

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

速記法：

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

你可能隨處可見這種寫法。這是一種比較 fancy 的寫法，省去了后面的一堆零。舉個栗子，1e7 就意味著 1 后面跟著 7 個零。這是十進制基數(shù)指數(shù)的一種寫法（JavaScript 會按照浮點類型去解釋），和 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 中定義對象字面量非常簡單。ES6 提供了一個更簡單的定義對象屬性的方法。如果 name 和 key 名字相同，那么就可以直接使用如下速記法。

常規(guī)寫法：

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

速記法：

const obj = { x, y };

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

常規(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ù)里是完全不同的，所以那兩個例子并不是嚴格等價的。查看 this article on arrow function syntax獲取更多細節(jié)。

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

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

常規(guī)寫法：

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

速記法：

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

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

常規(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)厭倦了使用 " + " 來將多個變量拼接成一個字符串？難道就沒有更簡單的方式來完成嗎？如果你可以使用 ES6 的話，那么恭喜你，你要做的只是使用反引號和 ${} 來包裹你的變量。

常規(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 框架，那么你很有可能會使用數(shù)組或者對象字面量形式的數(shù)據(jù)在組件和 API 之間傳遞信息。一旦組件接收到數(shù)據(jù)對象，你就需要將其展開。

常規(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;

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

常規(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.
	"

但是有一種更簡單的方法：使用反引號。

速記法：

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.

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

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

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

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

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 默認會將函數(shù)參數(shù)設(shè)置為 undefined。一些其他的編程語言會拋出警告或錯誤。為了強制給參數(shù)賦值，如果參數(shù)沒有定義的話，你可以使用 if 表達式拋出錯誤，或者可以使用“強制參數(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 寫一個查找函數(shù)，你可能會使用 for 循環(huán)。在 ES6 中，你可以使用數(shù)組的一個新方法 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"] 吧。一開始，似乎并沒有原因解釋說為什么應(yīng)該像這樣寫。但是這種寫法可以讓你編寫可重用代碼。
考慮下一個驗證函數(shù)的簡單例子：
function validate(values) {
  if(!values.first)
    return false;
  if(!values.last)
    return false;
  return true;
}

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