前言
es6有很多新東西，但是感覺常用的并不是很多，這里學習記錄了一些我自己認為非常常用又強大的新特性。
scoping
實用的塊級作用域，let x ＝ xxx 可以聲明一個塊級作用域的局部變量，簡單舉個例子下面1號函數可以達到正常的效果，而二號則不能，因為變量i是全局的，以往我們可以通過自執行函數解決 不過現在嗎就是用let了。
///1111
let callbacks = []
for (let i = 0; i <= 2; i++) {
callbacks[i] = function () { return i * 2 }
}
//2222
var callbacks = [];
for (var i = 0; i <= 2; i++) {
callbacks[i] = function() { return i * 2; }
}
除了塊級變量還是有塊級函數，放個代碼。同理，不用再寫iife函數去消除作用域問題了。
{
function foo () { return 1 }
foo() === 1
{
function foo () { return 2 }
foo() === 2
}
foo() === 1
}
// only in ES5 with the help of block-scope emulating
// function scopes and function expressions
(function () {
var foo = function () { return 1; }
foo() === 1;
(function () {
var foo = function () { return 2; }
foo() === 2;
})();
foo() === 1;
})();
Arrow Functions
箭頭函數簡單說就是切換閉包中的this指向，把this指向它的父級作用域，看代碼。媽媽也不用擔心我用that _this 來替換this指針了。
///采用箭頭函數
this.nums.forEach((v) => {
if (v % 5 === 0)
this.fives.push(v)
})
////傳統解決指針問題方法
// variant 1
var self = this;
this.nums.forEach(function (v) {
if (v % 5 === 0)
self.fives.push(v);
});
// variant 2
this.nums.forEach(function (v) {
if (v % 5 === 0)
this.fives.push(v);
}, this);
// variant 3 (since ECMAScript 5.1 only)
this.nums.forEach(function (v) {
if (v % 5 === 0)
this.fives.push(v);
}.bind(this));
Extended Parameter Handling
函數 rest 操作符：
擴展參數操作，寫在參數尾部，表示多余的參數，和新增的spread運算符一樣都是三個點(...)，用法如下，后續介紹spread操作符。
///給參數設定默認參數
function f (x, y = 7, z = 42) {
return x + y + z
}
>>> f(1) === 50
／／／ var a = Array.prototype.slice.call(arguments, 2);
function f (x, y, ...a) {
return (x + y) * a.length
}
>>> f(1, 2, "hello", true, 7) === 9 (a = [ "hello", true, 7])
Template Literals
是不是看到那一堆的＋ ‘’ ＋‘’ 要吐了，es6拯救你～
var customer = { name: "Foo" }
var card = { amount: 7, product: "Bar", unitprice: 42 }
var message = `Hello ${customer.name},
want to buy ${card.amount} ${card.product} for
a total of ${card.amount * card.unitprice} bucks?`
get`http://example.com/foo?bar=${bar + baz}&quux=${quux}`
Modules
很常用的方法，react，vue等主流框架經常能看到，可以將js代碼模塊化，通過export 暴露給其他腳本使用該塊代碼。
以vue－router為例，通過接口暴露了一個router對象
// lib/math.js
export function sum (x, y) { return x + y }
export var pi = 3.141593
// someApp.js
import * as math from "lib/math"
console.log("2π = " + math.sum(math.pi, math.pi))
// otherApp.js
import { sum, pi } from "lib/math"
console.log("2π = " + sum(pi, pi))
Classes
在傳統變成語言中定義對象都是基于類，而js生成實例對象則不同。ES6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。
class Shape {
constructor (id, x, y) {
this.id = id
this.move(x, y)
}
move (x, y) {
this.x = x
this.y = y
}
///傳統實例對象
var Shape = function (id, x, y) {
this.id = id;
this.move(x, y);
};
Shape.prototype.move = function (x, y) {
this.x = x;
this.y = y;
};
}
Promises
ajax神器 這里就不贅述了。大部分項目里基本都在用了。 解決回調地獄的解決方法。es7還有 async 和await 函數 ，需要轉換支持。
function msgAfterTimeout (msg, who, timeout) {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(`${msg} Hello ${who}!`), timeout)
})
}
msgAfterTimeout("", "Foo", 100).then((msg) =>
msgAfterTimeout(msg, "Bar", 200)
).then((msg) => {
console.log(`done after 300ms:${msg}`)
})
采用promise.all 處理多個異步函數回調
New Built-In Methods
es6也對原有的數據類型和原生方法進行了擴展，這里只記錄關于數組的擴展，個人感覺比較常用，而且很有用。一些擴展方法可能并不怎么用得到，擴展類型symbol 我現在還想不到什么場景要用。。可能它并不是用來寫邏輯的。。而是研究型類型。。。不廢話了 開始正文。
- spread / ...運算符
- Array.of() //將一組值轉為數組
- Array.from() //用于將類數組（可遍歷）對象轉為數組
- Array.copyWithin(target, start,end) //復制一段數據到某個target
- Array.find(fn) // 遍歷數組尋找條件成員
- Array.findIndex(fn) //同上 返回成員位置
- Array.fill(t,s,e) //填充數組
- Array.includes() //檢測數組是否包含某個值
/////實例
//數組去重
var arr = [1,2,3,4,1,2,3]
var res = Array.from(new Set(arr))
>>>>> [1,2,3,4]
//查找條件成員
arr.find(function(it) {
return it > 3
})
>>>> 4
///spread用法
arr.push(...[1,2,3])
>>> [1,2,3,4,1,2,3,1,2,3]
總結
掌握一些最新的東西。可以讓你事半功倍，知識的深度不容易挖掘但是知識的廣度是非常重要的，以前數組去重，以前還能出面試題，現在估計人人都會了。多么的輕松。
如果覺得本文對你有所幫助，就star一下吧～大傳送之術！ 我的博客Github
