ES6 完全使用手冊

kgbook 發布于2019-08-23 13:44 / 2020人閱讀

摘要：前言這里的泛指之后的新語法這里的完全是指本文會不斷更新這里的使用是指本文會展示很多的使用場景這里的手冊是指你可以參照本文將項目更多的重構為語法此外還要注意這里不一定就是正式進入規范的語法。

前言

這里的 "ES6" 泛指 ES5 之后的新語法

這里的 "完全" 是指本文會不斷更新

這里的 "使用" 是指本文會展示很多 ES6 的使用場景

這里的 "手冊" 是指你可以參照本文將項目更多的重構為 ES6 語法

此外還要注意這里不一定就是正式進入規范的語法。

1. let 和 const

在我們開發的時候，可能認為應該默認使用 let 而不是 var，這種情況下，對于需要寫保護的變量要使用 const。

然而另一種做法日益普及：默認使用 const，只有當確實需要改變變量的值的時候才使用 let。這是因為大部分的變量的值在初始化后不應再改變，而預料之外的變量的修改是很多 bug 的源頭。

// 例子 1-1

// bad
var foo = "bar";

// good
let foo = "bar";

// better
const foo = "bar";

2. 模板字符串 1. 模板字符串

需要拼接字符串的時候盡量改成使用模板字符串:

// 例子 2-1

// bad
const foo = "this is a" + example;

// good
const foo = `this is a ${example}`;

2. 標簽模板

可以借助標簽模板優化書寫方式:

// 例子 2-2

let url = oneLine `
    www.taobao.com/example/index.html
    ?foo=${foo}
    &bar=${bar}
`;

console.log(url); // www.taobao.com/example/index.html?foo=foo&bar=bar

oneLine 的源碼可以參考《ES6 系列之模板字符串》

3. 箭頭函數

優先使用箭頭函數，不過以下幾種情況避免使用：

1. 使用箭頭函數定義對象的方法

// 例子 3-1

// bad
let foo = {
  value: 1,
  getValue: () => console.log(this.value)
}

foo.getValue();  // undefined

2. 定義原型方法

// 例子 3-2

// bad
function Foo() {
  this.value = 1
}

Foo.prototype.getValue = () => console.log(this.value)

let foo = new Foo()
foo.getValue();  // undefined

3. 作為事件的回調函數

// 例子 3-3

// bad
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
    console.log(this === window); // => true
    this.innerHTML = "Clicked button";
});

4. Symbol 1. 唯一值

// 例子 4-1


// bad
// 1. 創建的屬性會被 for-in 或 Object.keys() 枚舉出來
// 2. 一些庫可能在將來會使用同樣的方式，這會與你的代碼發生沖突
if (element.isMoving) {
  smoothAnimations(element);
}
element.isMoving = true;

// good
if (element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__) {
  smoothAnimations(element);
}
element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__ = true;

// better
var isMoving = Symbol("isMoving");

...

if (element[isMoving]) {
  smoothAnimations(element);
}
element[isMoving] = true;

2. 魔術字符串

魔術字符串指的是在代碼之中多次出現、與代碼形成強耦合的某一個具體的字符串或者數值。

魔術字符串不利于修改和維護，風格良好的代碼，應該盡量消除魔術字符串，改由含義清晰的變量代替。

// 例子 4-1

// bad
const TYPE_AUDIO = "AUDIO"
const TYPE_VIDEO = "VIDEO"
const TYPE_IMAGE = "IMAGE"

// good
const TYPE_AUDIO = Symbol()
const TYPE_VIDEO = Symbol()
const TYPE_IMAGE = Symbol()

function handleFileResource(resource) {
  switch(resource.type) {
    case TYPE_AUDIO:
      playAudio(resource)
      break
    case TYPE_VIDEO:
      playVideo(resource)
      break
    case TYPE_IMAGE:
      previewImage(resource)
      break
    default:
      throw new Error("Unknown type of resource")
  }
}

3. 私有變量

Symbol 也可以用于私有變量的實現。

// 例子 4-3

const Example = (function() {
    var _private = Symbol("private");

    class Example {
        constructor() {
          this[_private] = "private";
        }
        getName() {
          return this[_private];
        }
    }

    return Example;
})();

var ex = new Example();

console.log(ex.getName()); // private
console.log(ex.name); // undefined

5. Set 和 Map 1. 數組去重

// 例子 5-1

[...new Set(array)]

2. 條件語句的優化

// 例子 5-2
// 根據顏色找出對應的水果

// bad
function test(color) {
  switch (color) {
    case "red":
      return ["apple", "strawberry"];
    case "yellow":
      return ["banana", "pineapple"];
    case "purple":
      return ["grape", "plum"];
    default:
      return [];
  }
}

test("yellow"); // ["banana", "pineapple"]

// good
const fruitColor = {
  red: ["apple", "strawberry"],
  yellow: ["banana", "pineapple"],
  purple: ["grape", "plum"]
};

function test(color) {
  return fruitColor[color] || [];
}

// better
const fruitColor = new Map()
  .set("red", ["apple", "strawberry"])
  .set("yellow", ["banana", "pineapple"])
  .set("purple", ["grape", "plum"]);

function test(color) {
  return fruitColor.get(color) || [];
}

6. for of 1. 遍歷范圍

for...of 循環可以使用的范圍包括：

數組

Set

Map

類數組對象，如 arguments 對象、DOM NodeList 對象

Generator 對象

字符串

2. 優勢

ES2015 引入了 for..of 循環，它結合了 forEach 的簡潔性和中斷循環的能力：

// 例子 6-1

for (const v of ["a", "b", "c"]) {
  console.log(v);
}
// a b c

for (const [i, v] of ["a", "b", "c"].entries()) {
  console.log(i, v);
}
// 0 "a"
// 1 "b"
// 2 "c"

3. 遍歷 Map

// 例子 6-2

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

// 遍歷 key 和 value 值(二)
for (let [key, value] of data) {
  console.log(key)
}

7. Promise 1. 基本示例

// 例子 7-1

// bad
request(url, function(err, res, body) {
    if (err) handleError(err);
    fs.writeFile("1.txt", body, function(err) {
        request(url2, function(err, res, body) {
            if (err) handleError(err)
        })
    })
});

// good
request(url)
.then(function(result) {
    return writeFileAsynv("1.txt", result)
})
.then(function(result) {
    return request(url2)
})
.catch(function(e){
    handleError(e)
});

2. finally

// 例子 7-2

fetch("file.json")
.then(data => data.json())
.catch(error => console.error(error))
.finally(() => console.log("finished"));

8. Async 1. 代碼更加簡潔

// 例子 8-1

// good
function fetch() {
  return (
    fetchData()
    .then(() => {
      return "done"
    });
  )
}

// better
async function fetch() {
  await fetchData()
  return "done"
};

// 例子 8-2

// good
function fetch() {
  return fetchData()
  .then(data => {
    if (data.moreData) {
        return fetchAnotherData(data)
        .then(moreData => {
          return moreData
        })
    } else {
      return data
    }
  });
}

// better
async function fetch() {
  const data = await fetchData()
  if (data.moreData) {
    const moreData = await fetchAnotherData(data);
    return moreData
  } else {
    return data
  }
};

// 例子 8-3

// good
function fetch() {
  return (
    fetchData()
    .then(value1 => {
      return fetchMoreData(value1)
    })
    .then(value2 => {
      return fetchMoreData2(value2)
    })
  )
}

// better
async function fetch() {
  const value1 = await fetchData()
  const value2 = await fetchMoreData(value1)
  return fetchMoreData2(value2)
};

2. 錯誤處理

// 例子 8-4

// good
function fetch() {
  try {
    fetchData()
      .then(result => {
        const data = JSON.parse(result)
      })
      .catch((err) => {
        console.log(err)
      })
  } catch (err) {
    console.log(err)
  }
}

// better
async function fetch() {
  try {
    const data = JSON.parse(await fetchData())
  } catch (err) {
    console.log(err)
  }
};

3. "async 地獄"

// 例子 8-5

// bad
(async () => {
  const getList = await getList();
  const getAnotherList = await getAnotherList();
})();

// good
(async () => {
  const listPromise = getList();
  const anotherListPromise = getAnotherList();
  await listPromise;
  await anotherListPromise;
})();

// good
(async () => {
  Promise.all([getList(), getAnotherList()]).then(...);
})();

9. Class

構造函數盡可能使用 Class 的形式

// 例子 9-1

class Foo {
  static bar () {
    this.baz();
  }
  static baz () {
    console.log("hello");
  }
  baz () {
    console.log("world");
  }
}

Foo.bar(); // hello

// 例子 9-2

class Shape {
  constructor(width, height) {
    this._width = width;
    this._height = height;
  }
  get area() {
    return this._width * this._height;
  }
}

const square = new Shape(10, 10);
console.log(square.area);    // 100
console.log(square._width);  // 10

10.Decorator 1. log

// 例子 10-1

class Math {
  @log
  add(a, b) {
    return a + b;
  }
}

log 的實現可以參考《ES6 系列之我們來聊聊裝飾器》

2. autobind

// 例子 10-2

class Toggle extends React.Component {

  @autobind
  handleClick() {
    console.log(this)
  }

  render() {
    return (
      
    );
  }
}

autobind 的實現可以參考《ES6 系列之我們來聊聊裝飾器》

3. debounce

// 例子 10-3

class Toggle extends React.Component {

  @debounce(500, true)
  handleClick() {
    console.log("toggle")
  }

  render() {
    return (
      
    );
  }
}

debounce 的實現可以參考《ES6 系列之我們來聊聊裝飾器》

4. React 與 Redux

// 例子 10-4

// good
class MyReactComponent extends React.Component {}

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

// better
@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {};

11. 函數 1. 默認值

// 例子 11-1

// bad
function test(quantity) {
  const q = quantity || 1;
}

// good
function test(quantity = 1) {
  ...
}

// 例子 11-2

doSomething({ foo: "Hello", bar: "Hey!", baz: 42 });

// bad
function doSomething(config) {
  const foo = config.foo !== undefined ? config.foo : "Hi";
  const bar = config.bar !== undefined ? config.bar : "Yo!";
  const baz = config.baz !== undefined ? config.baz : 13;
}

// good
function doSomething({ foo = "Hi", bar = "Yo!", baz = 13 }) {
  ...
}

// better
function doSomething({ foo = "Hi", bar = "Yo!", baz = 13 } = {}) {
  ...
}

// 例子 11-3

// bad
const Button = ({className}) => {
    const classname = className || "default-size";
    return 
};

// good
const Button = ({className = "default-size"}) => (
    
);

// better
const Button = ({className}) =>
    
}

Button.defaultProps = {
    className: "default-size"
}

// 例子 11-4

const required = () => {throw new Error("Missing parameter")};

const add = (a = required(), b = required()) => a + b;

add(1, 2) // 3
add(1); // Error: Missing parameter.

12. 拓展運算符 1. arguments 轉數組

// 例子 12-1

// bad
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// good
const sortNumbers = (...numbers) => numbers.sort();

2. 調用參數

// 例子 12-2

// bad
Math.max.apply(null, [14, 3, 77])

// good
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);

3. 構建對象

剔除部分屬性，將剩下的屬性構建一個新的對象

// 例子 12-3
let [a, b, ...arr] = [1, 2, 3, 4, 5];

const { a, b, ...others } = { a: 1, b: 2, c: 3, d: 4, e: 5 };

有條件的構建對象

// 例子 12-4

// bad
function pick(data) {
  const { id, name, age} = data

  const res = { guid: id }

  if (name) {
    res.name = name
  }
  else if (age) {
    res.age = age
  }

  return res
}

// good
function pick({id, name, age}) {
  return {
    guid: id,
    ...(name && {name}),
    ...(age && {age})
  }
}

合并對象

// 例子 12-5

let obj1 = { a: 1, b: 2,c: 3 }
let obj2 = { b: 4, c: 5, d: 6}
let merged = {...obj1, ...obj2};

4. React

將對象全部傳入組件

// 例子 12-6

const parmas =  {value1: 1, value2: 2, value3: 3}

13. 雙冒號運算符

// 例子 13-1

foo::bar;
// 等同于
bar.bind(foo);

foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);

如果雙冒號左邊為空，右邊是一個對象的方法，則等于將該方法綁定在該對象上面。

// 例子 13-2

var method = obj::obj.foo;
// 等同于
var method = ::obj.foo;

let log = ::console.log;
// 等同于
var log = console.log.bind(console);

14. 解構賦值 1. 對象的基本解構

// 例子 14-1

componentWillReceiveProps(newProps) {
    this.setState({
        active: newProps.active
    })
}

componentWillReceiveProps({active}) {
    this.setState({active})
}

// 例子 14-2

// bad
handleEvent = () => {
  this.setState({
    data: this.state.data.set("key", "value")
  })
};

// good
handleEvent = () => {
  this.setState(({data}) => ({
    data: data.set("key", "value")
  }))
};

// 例子 14-3

Promise.all([Promise.resolve(1), Promise.resolve(2)])
.then(([x, y]) => {
    console.log(x, y);
});

2. 對象深度解構

// 例子 14-4

// bad
function test(fruit) {
  if (fruit && fruit.name)  {
    console.log (fruit.name);
  } else {
    console.log("unknown");
  }
}

// good
function test({name} = {}) {
  console.log (name || "unknown");
}

// 例子 14-5

let obj = {
    a: {
      b: {
        c: 1
      }
    }
};

const {a: {b: {c = ""} = ""} = ""} = obj;

3. 數組解構

// 例子 14-6

// bad
const spliteLocale = locale.splite("-");
const language = spliteLocale[0];
const country = spliteLocale[1];

// good
const [language, country] = locale.splite("-");

4. 變量重命名

// 例子 14-8

let { foo: baz } = { foo: "aaa", bar: "bbb" };
console.log(baz); // "aaa"

5. 僅獲取部分屬性

// 例子 14-9

function test(input) {
  return [left, right, top, bottom];
}
const [left, __, top] = test(input);

function test(input) {
  return { left, right, top, bottom };
}
const { left, right } = test(input);

15. 增強的對象字面量

// 例子 15-1

// bad
const something = "y"
const x = {
  something: something
}

// good
const something = "y"
const x = {
  something
};

動態屬性

// 例子 15-2

const x = {
  ["a" + "_" + "b"]: "z"
}

console.log(x.a_b); // z

16. 數組的拓展方法 1. keys

// 例子 16-1

var arr = ["a", , "c"];

var sparseKeys = Object.keys(arr);
console.log(sparseKeys); // ["0", "2"]

var denseKeys = [...arr.keys()];
console.log(denseKeys);  // [0, 1, 2]

2. entries

// 例子 16-2

var arr = ["a", "b", "c"];
var iterator = arr.entries();

for (let e of iterator) {
    console.log(e);
}

3. values

// 例子 16-3

let arr = ["w", "y", "k", "o", "p"];
let eArr = arr.values();

for (let letter of eArr) {
  console.log(letter);
}

4. includes

// 例子 16-4

// bad
function test(fruit) {
  if (fruit == "apple" || fruit == "strawberry") {
    console.log("red");
  }
}

// good
function test(fruit) {
  const redFruits = ["apple", "strawberry", "cherry", "cranberries"];
  if (redFruits.includes(fruit)) {
    console.log("red");
  }
}

5. find

// 例子 16-5

var inventory = [
    {name: "apples", quantity: 2},
    {name: "bananas", quantity: 0},
    {name: "cherries", quantity: 5}
];

function findCherries(fruit) {
    return fruit.name === "cherries";
}

console.log(inventory.find(findCherries)); // { name: "cherries", quantity: 5 }

6. findIndex

// 例子 16-6

function isPrime(element, index, array) {
  var start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2

更多的就不列舉了。

17. optional-chaining

舉個例子：

// 例子 17-1

const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
};

const baz = obj?.foo?.bar?.baz; // 42

同樣支持函數：

// 例子 17-2

function test() {
  return 42;
}
test?.(); // 42

exists?.(); // undefined

需要添加 @babel/plugin-proposal-optional-chaining 插件支持

18. logical-assignment-operators

// 例子 18-1

a ||= b;

obj.a.b ||= c;

a &&= b;

obj.a.b &&= c;

Babel 編譯為：

var _obj$a, _obj$a2;

a || (a = b);

(_obj$a = obj.a).b || (_obj$a.b = c);

a && (a = b);

(_obj$a2 = obj.a).b && (_obj$a2.b = c);

出現的原因：

// 例子 18-2

function example(a = b) {
  // a 必須是 undefined
  if (!a) {
    a = b;
  }
}

function numeric(a = b) {
  // a 必須是 null 或者 undefined
  if (a == null) {
    a = b;
  }
}

// a 可以是任何 falsy 的值
function example(a = b) {
  // 可以，但是一定會觸發 setter
  a = a || b;

  // 不會觸發 setter，但可能會導致 lint error
  a || (a = b);

  // 就有人提出了這種寫法：
  a ||= b;
}

需要 @babel/plugin-proposal-logical-assignment-operators 插件支持

19. nullish-coalescing-operator

a ?? b

// 相當于

(a !== null && a !== void 0) ? a : b

舉個例子：

var foo = object.foo ?? "default";

// 相當于

var foo = (object.foo != null) ? object.foo : "default";

需要 @babel/plugin-proposal-nullish-coalescing-operator 插件支持

20. pipeline-operator

const double = (n) => n * 2;
const increment = (n) => n + 1;

// 沒有用管道操作符
double(increment(double(5))); // 22

// 用上管道操作符之后
5 |> double |> increment |> double; // 22

其他

新開了知乎專欄，大家可以在更多的平臺上看到我的文章，歡迎關注哦~

參考

ES6 實踐規范

babel 7 簡單升級指南

不得不知的 ES6 小技巧

深入解析 ES6：Symbol

什么時候你不能使用箭頭函數？

一些使 JavaScript 更加簡潔的小技巧

幾分鐘內提升技能的 8 個 JavaScript 方法

[[譯] 如何使用 JavaScript ES6 有條件地構造對象](https://juejin.im/post/5bb47d...

5 個技巧讓你更好的編寫 JavaScript(ES6) 中條件語句

ES6 帶來的重大特性 – JavaScript 完全手冊（2018版）

ES6 系列

ES6 系列目錄地址：https://github.com/mqyqingfeng/Blog

ES6 系列預計寫二十篇左右，旨在加深 ES6 部分知識點的理解，重點講解塊級作用域、標簽模板、箭頭函數、Symbol、Set、Map 以及 Promise 的模擬實現、模塊加載方案、異步處理等內容。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。

云服務器 GPU云服務器 ubuntu完全手冊完全攻略手冊 java完全自學手冊 javascript完全自學手冊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99474.html

前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
AI開發書籍分享

摘要：編程書籍的整理和收集最近一直在學習深度學習和機器學習的東西，發現深入地去學習就需要不斷的去提高自己算法和高數的能力然后也找了很多的書和文章，隨著不斷的學習，也整理了下自己的學習筆記準備分享出來給大家后續的文章和總結會繼續分享，先分享一部分的編程書籍的整理和收集最近一直在學習deep learning深度學習和機器學習的東西，發現深入地去學習就需要不斷的去提高自己算法和高數的能力然后...

huayeluoliuhen 2019-06-26 18:18 評論0 收藏0