ES6速記手冊

1.三元操作符

這是一個很好的節省代碼當你想要編寫一個如果. . else語句在一線。

普通寫法:

     const x = 20;let big;if (x > 10) {

速記:

const big = x > 10 ? true : false;

你還可以嵌套的if語句如下:

const big = x > 10 ? " greater 10" : x < 5 ? "less 5" : "between 5 and 10";

2. 短路評價速記

分配一個變數值到另一個變數的時候,你可能想要確保源變數不是null,未定義的或空。 你可以寫一個長有多個條件的if語句,或者使用短路評估。

普通寫法:

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {

速記:

const variable2 = variable1 || 'new';

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

3. 聲明變數速記

是一種很好的做法聲明變數作業開始時你的功能。 這個速記方法可以節省你大量的時間和空間同時當聲明多個變數。

普通寫法:

let x;let y;let z = 3;

速記:

let x, y, z=3;

     4. 如果存在簡寫

這可能是微不足道的,但是值得提及。 做“如果檢查”時,賦值操作符有時可以省略。

普通寫法:

if (likeJavaScript === true)

速記:

if (likeJavaScript)

普通寫法:

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

速記:

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

5. JavaScript for迴圈速記

這個小技巧是非常有用的,如果你想要的純JavaScript並不是如jQuery或lodash依賴外部庫。

普通寫法:

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

速記:

for (let index in allImgs)

簡稱Array.forEach:

function logArrayElements(element, index, array) {

6. 短路的評估

而不是寫6行代碼分配一個預設值,如果參數是null或未定義,我們可以簡單地使用一個短路邏輯運算元,實現同樣的事情只有一行代碼。

普通寫法:

let dbHost;if (process.env.DB_HOST) {

速記:

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

7. 十進位計數指數

你可能看過這個。 它本質上是一個奇特的方法寫數字沒有落後於0。 例如,1 e7本質上意味著1 7 0緊隨其後。 它代表了十進位計數(JavaScript解釋浮子式)等於10000000。

普通寫法:

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

速記:

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

8. 對象屬性簡寫

定義對象文字在JavaScript中讓生活更容易。 ES6提供了一個更簡單的辦法分配對象的屬性。 如果屬性名和密鑰名一樣,您可以利用的速記符號。

普通寫法:

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

速記:

const obj = { x, y };

9. 箭頭功能速記

經典函數很容易讀和寫在他們的普通形式,但它們確實會變得有點冗長,困惑一旦你開始嵌套在其他函數調用。

普通寫法:

function sayHello(name) {

速記:

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

10. 隱式返回速記

回報是我們經常使用的一個關鍵字返回一個函數的最終結果。 箭函數用一個語句將隱式返回結果評價(函數必須省略括弧({})為了省略返回關鍵字)。返回多行語句(如對象字面量),有必要使用()而不是{}包裝你的函數體。 這樣可以確保代碼是評估作為一個單獨的語句。

普通寫法:

function calcCircumference(diameter) {

速記:

calcCircumference = diameter => (

11. 預設參數值

您可以使用if語句來定義函數參數的預設值。 在ES6,您可以在函數聲明中定義的預設值。

普通寫法:

function volume(l, w, h) {

速記:

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

12. 模板文字

難道你厭倦了使用' + '成一個字元串連接多個變數? 沒有一個更容易的方法嗎? 如果你能使用ES6,那麼你是幸運的。 所有您需要做的就是使用撇號,和${}附上你的變數。

普通寫法:

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

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;

速記:

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

你甚至可以自己指定變數名:

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

14. 多行字元串速記

如果你曾經發現自己需要編寫多行字元串的代碼,這是如何寫:

普通寫法:

const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'

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

速記:

const lorem = `Lorem ipsum dolor sit amet, consectetur

15.傳播運算元速記

的傳播運算元引入ES6有幾個用例,讓JavaScript代碼更高效和有趣。 它可以用來代替某些陣列功能。 傳播運算元只是一系列的三個點。

手寫

// joining arraysconst odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
// cloning arraysconst arr = [1, 2, 3, 4];
const arr2 = arr.slice()

速記:

// joining arraysconst odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];console.log(nums);
 // [ 2, 4, 6, 1, 3, 5 ]// cloning arraysconst arr = [1, 2, 3, 4];const arr2 = [...arr];

不像concat()功能,您可以使用傳播運算元數組插入另一個數組內的任何地方。

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

你也可以把傳播運算元與ES6 destructuring符號:

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1console.log(b) // 2console.log(z) // { c: 3, d: 4 }

16.強制參數速記

預設情況下,JavaScript將函數參數undefined如果他們不通過一個值。 一些其他語言將拋出一個警告或者錯誤。 執行參數賦值,您可以使用一個if如果聲明拋出一個錯誤undefined
,或者你可以利用“強制參數速記”。

普通寫法:

function foo(bar) {

速記:

mandatory = () => {

17.數組中。 找到速記

如果你曾負責編寫一個發現在純JavaScript函數,您可能會使用一個for迴圈。 在ES6,一個新的數組函數命名find()介紹了。

普通寫法:

const pets = [

速記:

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

18. 對象(例子)速記

你知道嗎,Foo.bar也可以寫成Foo['bar']嗎? 起初,似乎沒有理由你應該這樣寫。 然而,這個符號給你編寫可重用代碼的構建塊。

來看下麵這一段簡化驗證函數的例子:

function validate(values) {

這個函數做它的工作。 然而,考慮這樣一個場景:你有很多種形式,您需要應用驗證,但不同領域和規則。 不是很好建立一個通用的驗證功能,可以在運行時配置?

速記:

// object validation rulesconst schema = {

現在我們有一個驗證函數我們可以各種形式的重用,而不需要編寫一個定製的驗證功能。

19. 雙位不是速記

逐位運算符是其中一個特性你瞭解JavaScript新手教程和你永遠不會實施任何地方。 此外,誰想一起工作如果你不處理二進位0和1 ?

然而,一個非常實用的用例雙位操作符。 您可以使用它作為替代Math.floor()。 兩位沒有運營商的優勢是,它執行相同的操作要快得多。 你可以閱讀更多關於位運算符在這裡。

普通寫法:

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

速記:

~~4.9 === 4 //true