學會了ES6，就不會寫出那樣的代碼

04-21

用let不用var

ES6之前我們用var聲明一個變數，但是它有很多弊病：

因為沒有塊級作用域，很容易聲明全局變數
變數提升
可以重複聲明
還記得這道面試題嗎？

var a = [];for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); };}a[6](); // 10a[7](); // 10a[8](); // 10a[9](); // 10

所以，你現在還有什麼理由不用let?

有時候const比let更好

const和let的唯一區別就是，const不可以被更改，所以當聲明變數的時候，尤其是在聲明容易被更改的全局變數的時候，盡量使用const。

更好的代碼語義化，一眼看到就是常量。
另一個原因是因為JavaScript 編譯器對const的優化要比let好，多使用const，有利於提高程序的運行效率。
所有的函數都應該設置為常量。

動態字元串

不要使用「雙引號」，一律用單引號或反引號

// lowconst a = "foobar";const b = foo + a + bar;// bestconst a = foobar;const b = `foo${a}bar`;const c = foobar;

解構賦值的騷操作

變數賦值

在用到數組成員對變數賦值時，盡量使用解構賦值。

const arr = [1, 2, 3, 4];// lowconst first = arr[0];const second = arr[1];// goodconst [first, second] = arr;

函數傳對象

函數的參數如果是對象的成員，優先使用解構賦值。

// lowfunction getFullName(user) { const firstName = user.firstName; const lastName = user.lastName;}// goodfunction getFullName({ firstName, lastName }) {}

如果函數返回多個值，優先使用對象的解構賦值，而不是數組的解構賦值。這樣便於以後添加返回值，以及更改返回值的順序。

/ lowfunction processInput(input) { return [left, right, top, bottom];}// goodfunction processInput(input) { return { left, right, top, bottom };}const { left, right } = processInput(input);

關於對象的細節

逗號

單行定義的對象結尾不要逗號：

// lowconst a = { k1: v1, k2: v2, };// goodconst a = { k1: v1, k2: v2 };

多行定義的對象要保留逗號：

// lowconst b = { k1: v1, k2: v2};// goodconst b = { k1: v1, k2: v2,};

一次性初始化完全

不要聲明之後又給對象添加新屬性：

// lowconst a = {};a.x = 3;// goodconst a = { x: null };a.x = 3;

如果一定非要加請使用Object.assign：

const a = {};Object.assign(a, { x: 3 });

如果對象的屬性名是動態的，可以在創造對象的時候，使用屬性表達式定義：

// lowconst obj = { id: 5, name: San Francisco,};obj[getKey(enabled)] = true;// goodconst obj = { id: 5, name: San Francisco, [getKey(enabled)]: true,};

再簡潔一點

在定義對象時，能簡潔表達盡量簡潔表達：

var ref = some value;// lowconst atom = { ref: ref, value: 1, addValue: function (value) { return atom.value + value; },};// goodconst atom = { ref, value: 1, addValue(value) { return atom.value + value; },};

數組

...

使用擴展運算符（...）拷貝數組：

// 還在用for i 你就太low了const len = items.length;const itemsCopy = [];let i;for (i = 0; i < len; i++) { itemsCopy[i] = items[i];}// cool !const itemsCopy = [...items];

不要跟我提類數組

用 Array.from 方法，將類似數組的對象轉為數組：

const foo = document.querySelectorAll(.foo);const nodes = Array.from(foo);

函數

箭頭函數=>

立即執行函數可以寫成箭頭函數的形式：

(() => { console.log(Welcome to the Internet.);})();

盡量寫箭頭函數使你的代碼看起來簡潔優雅：

// low[1, 2, 3].map(function (x) { return x * x;});// cool ![1, 2, 3].map(x => x * x);

不要把布爾值直接傳入函數

// lowfunction divide(a, b, option = false ) {}// goodfunction divide(a, b, { option = false } = {}) {}

別再用arguments（類數組）了！

使用 rest 運算符（...）代替，rest 運算符可以提供一個真正的數組。

// lowfunction concatenateAll() { const args = Array.prototype.slice.call(arguments); return args.join();}// goodfunction concatenateAll(...args) { return args.join();}

傳參時試試設置默認值？

// lowfunction handleThings(opts) { opts = opts || {};}// goodfunction handleThings(opts = {}) { // ...}

Object？Map！

簡單的鍵值對優先Map

如果只是簡單的key: value結構，建議優先使用Map，因為Map提供方便的遍歷機制。

let map = new Map(arr);// 遍歷key值for (let key of map.keys()) { console.log(key);}// 遍歷value值for (let value of map.values()) { console.log(value);}// 遍歷key和value值for (let item of map.entries()) { console.log(item[0], item[1]);}

更加簡潔直觀class語法

// lowfunction Queue(contents = []) { this._queue = [...contents];}Queue.prototype.pop = function() { const value = this._queue[0]; this._queue.splice(0, 1); return value;}// goodclass Queue { constructor(contents = []) { this._queue = [...contents]; } pop() { const value = this._queue[0]; this._queue.splice(0, 1); return value; }}

模塊化

引入模塊

使用import取代require，因為Module是Javascript模塊的標準寫法。

// badconst moduleA = require(moduleA);const func1 = moduleA.func1;const func2 = moduleA.func2;// goodimport { func1, func2 } from moduleA;

輸出模塊

使用export輸出變數，拒絕module.exports:

import React from react;class Breadcrumbs extends React.Component { render() { return <nav />; }};export default Breadcrumbs;

輸出單個值，使用export default
輸出多個值，使用export
export default與普通的export不要同時使用

編碼規範

模塊輸出一個函數，首字母應該小寫：

function getData() {}export default getData;

模塊輸出一個對象，首字母應該大寫

const Person = { someCode: { }};export default Person ;