什么是ES6？

　　ECMAScript 6（以下簡(jiǎn)稱ES6）是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了。Mozilla公司將在這個(gè)標(biāo)準(zhǔn)的基礎(chǔ)上，推出JavaScript 2.0。

　　ECMAScript和JavaScript到底是什么關(guān)系？很多初學(xué)者會(huì)感到困惑，簡(jiǎn)單來說，ECMAScript是JavaScript語(yǔ)言的國(guó)際標(biāo)準(zhǔn)，JavaScript是ECMAScript的實(shí)現(xiàn)。

一、let和const

在JavaScript中咱們以前主要用關(guān)鍵var來定義變量，ES6之后，新增了定義變量的兩個(gè)關(guān)鍵字，分別是let和const。

對(duì)于變量來說，在ES5中var定義的變量會(huì)提升到作用域中所有的函數(shù)與語(yǔ)句前面，而ES6中l(wèi)et定義的變量則不會(huì)，let聲明的變量會(huì)在其相應(yīng)的代碼塊中建立一個(gè)暫時(shí)性死區(qū)，直至變量被聲明。

let和const都能夠聲明塊級(jí)作用域，用法和var是類似的，let的特點(diǎn)是不會(huì)變量提升，而是被鎖在當(dāng)前塊中。

一個(gè)非常簡(jiǎn)單的例子：

function test() {
if(true) {
 console.log(a)//TDZ，俗稱臨時(shí)死區(qū)，用來描述變量不提升的現(xiàn)象
 let a = 1
}
}
test() // a is not defined

function test() {
 if(true) {
  let a = 1
 }
 console.log(a)
} 
test() // a is not defined

唯一正確的使用方法：先聲明，再訪問。

function test() {
 if(true) {
  let a = 1
  console.log(a)
 }
}
test() // 1

const

聲明常量，一旦聲明，不可更改，而且常量必須初始化賦值。

const雖然是常量，不允許修改默認(rèn)賦值，但如果定義的是對(duì)象Object，那么可以修改對(duì)象內(nèi)部的屬性值。

const type = {
 a: 1
}
type.a = 2 //沒有直接修改type的值，而是修改type.a的屬性值，這是允許的。
console.log(type) // {a: 2}

const和let的異同點(diǎn)

相同點(diǎn)：const和let都是在當(dāng)前塊內(nèi)有效，執(zhí)行到塊外會(huì)被銷毀，也不存在變量提升（TDZ），不能重復(fù)聲明。

不同點(diǎn)：const不能再賦值，let聲明的變量可以重復(fù)賦值。
const實(shí)際上保證的，并不是變量的值不得改動(dòng)，而是變量指向的那個(gè)內(nèi)存地址所保存的數(shù)據(jù)不得改動(dòng)。對(duì)于簡(jiǎn)單類型的數(shù)據(jù)（數(shù)值、字符串、布爾值），值就保存在變量指向的那個(gè)內(nèi)存地址，因此等同于常量。但對(duì)于復(fù)合類型的數(shù)據(jù)（主要是對(duì)象和數(shù)組），變量指向的內(nèi)存地址，保存的只是一個(gè)指向?qū)嶋H數(shù)據(jù)的指針，const只能保證這個(gè)指針是固定的（即總是指向另一個(gè)固定的地址），至于它指向的數(shù)據(jù)結(jié)構(gòu)是不是可變的，就完全不能控制了。因此，將一個(gè)對(duì)象聲明為常量必須非常小心。

塊級(jí)作用域的使用場(chǎng)景

除了上面提到的常用聲明方式，我們還可以在循環(huán)中使用，最出名的一道面試題：循環(huán)中定時(shí)器閉包的考題
在for循環(huán)中使用var聲明的循環(huán)變量，會(huì)跳出循環(huán)體污染當(dāng)前的函數(shù)。

for(var i = 0; i < 5; i++) {
 setTimeout(() => {
 console.log(i) //5, 5, 5, 5, 5
 }, 0)
}
console.log(i) //5 i跳出循環(huán)體污染外部函數(shù)

//將var改成let之后
for(let i = 0; i < 5; i++) {
 setTimeout(() => {
 console.log(i) // 0,1,2,3,4
 }, 0)
}
console.log(i)//i is not defined i無法污染外部函數(shù)

在實(shí)際開發(fā)中，我們選擇使用var、let還是const，取決于我們的變量是不是需要更新，通常我們希望變量保證不被惡意修改，而使用大量的const。使用const聲明，聲明一個(gè)對(duì)象的時(shí)候，也推薦使用const，當(dāng)你需要修改聲明的變量值時(shí)，使用let，var能用的場(chǎng)景都可以使用let替代。

symbol

ES6 以前，我們知道5種基本數(shù)據(jù)類型分別是Undefined，Null，Boolean，Number以及String，然后加上一種引用類型Object構(gòu)成了JavaScript中所有的數(shù)據(jù)類型，但是ES6出來之后，新增了一種數(shù)據(jù)類型，名叫symbol，像它的名字表露的一樣，意味著獨(dú)一無二，意思是每個(gè) Symbol類型都是獨(dú)一無二的，不與其它 Symbol 重復(fù)。
可以通過調(diào)用 Symbol() 方法將創(chuàng)建一個(gè)新的 Symbol 類型的值，這個(gè)值獨(dú)一無二，不與任何值相等。

var mySymbol=Symbol();
console.log(typeof mySymbol) //"symbol"

二、字符串

ES6字符串新增的方法

UTF-16碼位：ES6強(qiáng)制使用UTF-16字符串編碼。關(guān)于UTF-16的解釋請(qǐng)自行百度了解。

codePointAt()：該方法支持UTF-16，接受編碼單元的位置而非字符串位置作為參數(shù)，返回與字符串中給定位置對(duì)應(yīng)的碼位，即一個(gè)整數(shù)值。

String.fromCodePoiont()：作用與codePointAt相反，檢索字符串中某個(gè)字符的碼位，也可以根據(jù)指定的碼位生成一個(gè)字符。

normalize()：提供Unicode的標(biāo)準(zhǔn)形式，接受一個(gè)可選的字符串參數(shù)，指明應(yīng)用某種Unicode標(biāo)準(zhǔn)形式。

在ES6中，新增了3個(gè)新方法。每個(gè)方法都接收2個(gè)參數(shù)，需要檢測(cè)的子字符串，以及開始匹配的索引位置。

模板字符串

字符串是JavaScript中基本類型之一，應(yīng)該算是除了對(duì)象之外是使用最為頻繁的類型吧，字符串中包含了例如substr，replace，indexOf,slice等等諸多方法，ES6引入了模板字符串的特性，用反引號(hào)來表示，可以表示多行字符串以及做到文本插值（利用模板占位符）。

// 以前的多行字符串我們這么寫：
console.log("hello world 1\n\
hello cala");
// "hello world
// hello cala"

//有了模板字符串之后
console.log(`hello world
string text line 2`);
// "hello world
// hello cala"

可以用${}來表示模板占位符，可以將你已經(jīng)定義好的變量傳進(jìn)括弧中，例如：

var name="cala";
var age=22;
console.log(`hello,I'am ${name},my age is ${age}`)
//hello,I'am cala,my age is 22
includes(str, index)：如果在字符串中檢測(cè)到指定文本，返回true，否則false。

let t = 'abcdefg'
if(t.includes('cde')) {
 console.log(2)
}
//true
startsWith(str, index)：如果在字符串起始部分檢測(cè)到指定文本，返回true，否則返回false。

let t = 'abcdefg'
if(t.startsWith('ab')) {
 console.log(2)
}
//true
endsWith(str, index)：如果在字符串的結(jié)束部分檢測(cè)到指定文本，返回true，否則返回false。

let t = 'abcdefg'
if(t.endsWith('fg')) {
 console.log(2)
}
//true

如果你只是需要匹配字符串中是否包含某子字符串，那么推薦使用新增的方法，如果需要找到匹配字符串的位置，使用indexOf()。

三、函數(shù)

函數(shù)的默認(rèn)參數(shù)

在ES5中，我們給函數(shù)傳參數(shù)，然后在函數(shù)體內(nèi)設(shè)置默認(rèn)值，如下面這種方式。

function a(num, callback) {
 num = num || 6
 callback = callback || function (data) {console.log('ES5: ', data)}
 callback(num * num)
}
a() //ES5: 36，不傳參輸出默認(rèn)值

//你還可以這樣使用callback
a(10, function(data) {
 console.log(data * 10) // 1000， 傳參輸出新數(shù)值
})

在ES6中，我們使用新的默認(rèn)值寫法

function a(num = 6, callback = function (data) {console.log('ES6: ', data)}) {
 callback(num * num)
}

a() //ES6: 36， 不傳參輸出默認(rèn)值

a(10, function(data) {
 console.log(data * 10) // 1000，傳參輸出新數(shù)值
})

四、箭頭函數(shù)（=>）

（箭頭函數(shù)比較重要，現(xiàn)在簡(jiǎn)單提一下，遲一點(diǎn)有空專門寫一篇箭頭函數(shù)的文章。）

const arr = [5, 10]
const s = arr.reduce((sum, item) => sum + item)
console.log(s) // 15

箭頭函數(shù)中this的使用跟普通函數(shù)也不一樣，在JavaScript的普通函數(shù)中，都會(huì)有一個(gè)自己的this值，主要分為：

普通函數(shù)：

1、函數(shù)作為全局函數(shù)被調(diào)用時(shí)，this指向全局對(duì)象
2、函數(shù)作為對(duì)象中的方法被調(diào)用時(shí)，this指向該對(duì)象
3、函數(shù)作為構(gòu)造函數(shù)的時(shí)候，this指向構(gòu)造函數(shù)new出來的新對(duì)象
4、還可以通過call，apply，bind改變this的指向

箭頭函數(shù)：

1、箭頭函數(shù)沒有this，函數(shù)內(nèi)部的this來自于父級(jí)最近的非箭頭函數(shù)，并且不能改變this的指向。
2、箭頭函數(shù)沒有super
3、箭頭函數(shù)沒有arguments
4、箭頭函數(shù)沒有new.target綁定。
5、不能使用new
6、沒有原型
7、不支持重復(fù)的命名參數(shù)。

箭頭函數(shù)的簡(jiǎn)單理解

1、箭頭函數(shù)的左邊表示輸入的參數(shù)，右邊表示輸出的結(jié)果。

const s = a => a
console.log(s(2)) // 2

2、在箭頭函數(shù)中，this屬于詞法作用域，直接由上下文確定，對(duì)于普通函數(shù)中指向不定的this，箭頭函數(shù)中處理this無疑更加簡(jiǎn)單，如下：

//ES5普通函數(shù)
function Man(){
 this.age=22;
 return function(){
 this.age+1;
 }
}
var cala=new Man();
console.log(cala())//undefined
//ES6箭頭函數(shù)
function Man(){
 this.age=22;
 return () => this.age+1;
}
var cala=new Man();
console.log(cala())//23

3、箭頭函數(shù)中沒有arguments(我們可以用rest參數(shù)替代),也沒有原型，也不能使用new 關(guān)鍵字，例如：

//沒有arguments
var foo=(a,b)=>{return arguments[0]*arguments[1]}
console.log(foo(3,5))
//arguments is not defined
//沒有原型
var Obj = () => {};
console.log(Obj.prototype); 
// undefined
//不能使用new 關(guān)鍵字
var Obj = () => {"hello world"};
var o = new Obj(); 
// TypeError: Obj is not a constructor

4、箭頭函數(shù)給數(shù)組排序

const arr = [10, 50, 30, 40, 20]
const s = arr.sort((a, b) => a - b)
console.log(s) // [10,20,30,40,50]

尾調(diào)用優(yōu)化

尾調(diào)用是指在函數(shù)return的時(shí)候調(diào)用一個(gè)新的函數(shù)，由于尾調(diào)用的實(shí)現(xiàn)需要存儲(chǔ)到內(nèi)存中，在一個(gè)循環(huán)體中，如果存在函數(shù)的尾調(diào)用，你的內(nèi)存可能爆滿或溢出。

ES6中，引擎會(huì)幫你做好尾調(diào)用的優(yōu)化工作，你不需要自己優(yōu)化，但需要滿足下面3個(gè)要求：

1、函數(shù)不是閉包
2、尾調(diào)用是函數(shù)最后一條語(yǔ)句
3、尾調(diào)用結(jié)果作為函數(shù)返回

尾調(diào)用實(shí)際用途——遞歸函數(shù)優(yōu)化
在ES5時(shí)代，我們不推薦使用遞歸，因?yàn)檫f歸會(huì)影響性能。
但是有了尾調(diào)用優(yōu)化之后，遞歸函數(shù)的性能有了提升。

//新型尾優(yōu)化寫法
"use strict"; 
function a(n, p = 1) {
 if(n <= 1) {
 return 1 * p
 }
 let s = n * p
 return a(n - 1, s)
}
//求 1 x 2 x 3的階乘
let sum = a(3)
console.log(sum) // 6

五、ES6對(duì)象新增方法

Object.assign()

Object.assign()方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。
Object.assign 方法只會(huì)拷貝源對(duì)象自身的并且可枚舉的屬性到目標(biāo)對(duì)象。該方法使用源對(duì)象的[[Get]]和目標(biāo)對(duì)象的[[Set]]，所以它會(huì)調(diào)用相關(guān) getter 和 setter。因此，它分配屬性，而不僅僅是復(fù)制或定義新的屬性。如果合并源包含getter，這可能使其不適合將新屬性合并到原型中。為了將屬性定義（包括其可枚舉性）復(fù)制到原型，應(yīng)使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。

String類型和 Symbol 類型的屬性都會(huì)被拷貝。

合并對(duì)象

var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目標(biāo)對(duì)象自身也會(huì)改變。

合并具有相同屬性的對(duì)象

var o1 = { a: 1, b: 1, c: 1 };
var o2 = { b: 2, c: 2 };
var o3 = { c: 3 };
var obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

六、Map和Set

Map和Set都叫做集合，但是他們也有所不同。Set常被用來檢查對(duì)象中是否存在某個(gè)鍵名，Map集合常被用來獲取已存的信息。
Set是有序列表，含有相互獨(dú)立的非重復(fù)值。
Array和Set對(duì)比
都是一個(gè)存儲(chǔ)多值的容器，兩者可以互相轉(zhuǎn)換，但是在使用場(chǎng)景上有區(qū)別。如下:
Array的indexOf方法比Set的has方法效率低下
Set不含有重復(fù)值（可以利用這個(gè)特性實(shí)現(xiàn)對(duì)一個(gè)數(shù)組的去重）
Set通過delete方法刪除某個(gè)值，而Array只能通過splice。兩者的使用方便程度前者更優(yōu)
Array的很多新方法map、filter、some、every等是Set沒有的（但是通過兩者可以互相轉(zhuǎn)換來使用）
Object和Map對(duì)比
Object是字符串-值，Map是值-值
Object鍵為string類型,Map的鍵是任意類型
手動(dòng)計(jì)算Object尺寸,Map.size可以獲取尺寸

Map的排序是插入順序

Object有原型，所以映射中有一些缺省的鍵。可以理解為Map=Object.create(null)

Set操作集合

let set = new Set()
// Set轉(zhuǎn)化為數(shù)組
let arr = Array.from(set)
let arr = [...set]
// 實(shí)例屬性（繼承自Set）
set.constructor === Set 
set.size 
// 操作方法
set.add(1) // 添加一個(gè)值
set.delete(1) //刪除一個(gè)值
set.has(1) //判斷是否有這個(gè)值（Array中的indexOf）
set.clear() //清除所有值
// 獲取用于遍歷的成員方法(Set的遍歷順序就是插入順序)
set.keys() // 返回鍵名的遍歷器
set.values() // 返回鍵值得遍歷器
set.entries() // 返回鍵值對(duì)的遍歷器
set.forEach() // 循環(huán)遍歷每個(gè)值(和Array的方法一致)
for (let key of set.keys()){}
for (let val of set.values()){}
for (let entry of set.entries()){}
// 使用數(shù)組方法來處理set值
set = new Set(arr)
set = new Set([...set].map((x) => x = x * 2))
set = new Set([...set].filter((x) => x > 2))

Map的方法集合

let map = new Map()
// 實(shí)例屬性(繼承自Map)
map.constructor === Map
map.size
// 操作方法
map.set(1,2)
map.get(1)
map.delete(1)
map.has(1)
map.clear()
// 遍歷方法
map.keys()
map.values()
map.entries()
map.forEach()
// Map和數(shù)組的轉(zhuǎn)換
map = new Map([['key','val'],[2,1]]) // 要求雙成員數(shù)組
let arr = [...map]
// 值得注意的是Map的鍵是跟內(nèi)存綁定的
map.set([1], 's')
map.get([1])
let arr = [1]
let arr1 = [1]
map.set(arr, 's')
map.get(arr)
map.set(arr1, 's')
map.get(arr1)

七、迭代器（Iterator）

1、entries() 返回迭代器：返回鍵值對(duì)

//數(shù)組
const arr = ['a', 'b', 'c'];
for(let v of arr.entries()) {
 console.log(v)
}
// [0, 'a'] [1, 'b'] [2, 'c']
//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.entries()) {
 console.log(v)
}
// ['a', 'a'] ['b', 'b'] ['c', 'c']
//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.entries()) {
 console.log(v)
}
// ['a', 'a'] ['b', 'b']

2、values() 返回迭代器：返回鍵值對(duì)的value

//數(shù)組
const arr = ['a', 'b', 'c'];
for(let v of arr.values()) {
 console.log(v)
}
//'a' 'b' 'c'
//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.values()) {
 console.log(v)
}
// 'a' 'b' 'c'
//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.values()) {
 console.log(v)
}
// 'a' 'b'

3、keys() 返回迭代器：返回鍵值對(duì)的key

//數(shù)組
const arr = ['a', 'b', 'c'];
for(let v of arr.keys()) {
 console.log(v)
}
// 0 1 2
//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.keys()) {
 console.log(v)
}
// 'a' 'b' 'c'
//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.keys()) {
 console.log(v)
}
// 'a' 'b'

雖然上面列舉了3種內(nèi)建的迭代器方法，但是不同集合的類型還有自己默認(rèn)的迭代器，在for of中，數(shù)組和Set的默認(rèn)迭代器是values()，Map的默認(rèn)迭代器是entries()。

for of循環(huán)解構(gòu)

對(duì)象本身不支持迭代，但是我們可以自己添加一個(gè)生成器，返回一個(gè)key，value的迭代器，然后使用for of循環(huán)解構(gòu)key和value。

const obj = {
 a: 1,
 b: 2,
 *[Symbol.iterator]() {
 for(let i in obj) {
  yield [i, obj[i]]
 }
 }
}
for(let [key, value] of obj) {
 console.log(key, value)
}
// 'a' 1, 'b' 2

字符串迭代器

const str = 'abc';
for(let v of str) {
 console.log(v)
}
// 'a' 'b' 'c'

ES6給數(shù)組添加了幾個(gè)新方法：find()、findIndex()、fill()、copyWithin()

1、find()：傳入一個(gè)回調(diào)函數(shù)，找到數(shù)組中符合當(dāng)前搜索規(guī)則的第一個(gè)元素，返回它，并且終止搜索。

const arr = [1, "2", 3, 3, "2"]
console.log(arr.find(n => typeof n === "number")) // 1

2、findIndex()：傳入一個(gè)回調(diào)函數(shù)，找到數(shù)組中符合當(dāng)前搜索規(guī)則的第一個(gè)元素，返回它的下標(biāo)，終止搜索。

const arr = [1, "2", 3, 3, "2"]
console.log(arr.findIndex(n => typeof n === "number")) // 0

3、fill()：用新元素替換掉數(shù)組內(nèi)的元素，可以指定替換下標(biāo)范圍。

arr.fill(value, start, end)

4、copyWithin()：選擇數(shù)組的某個(gè)下標(biāo)，從該位置開始復(fù)制數(shù)組元素，默認(rèn)從0開始復(fù)制。也可以指定要復(fù)制的元素范圍。

arr.copyWithin(target, start, end)
const arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(3)) // [1,2,3,1,2] 從下標(biāo)為3的元素開始，復(fù)制數(shù)組，所以4, 5被替換成1, 2
const arr1 = [1, 2, 3, 4, 5]
console.log(arr1.copyWithin(3, 1)) // [1,2,3,2,3] 從下標(biāo)為3的元素開始，復(fù)制數(shù)組，指定復(fù)制的第一個(gè)元素下標(biāo)為1，所以4, 5被替換成2, 3
const arr2 = [1, 2, 3, 4, 5]
console.log(arr2.copyWithin(3, 1, 2)) // [1,2,3,2,5] 從下標(biāo)為3的元素開始，復(fù)制數(shù)組，指定復(fù)制的第一個(gè)元素下標(biāo)為1，結(jié)束位置為2，所以4被替換成2

ES6中類class、Promise與異步編程、代理（Proxy）和反射（Reflection）API，這幾塊內(nèi)容比較復(fù)雜，以后有機(jī)會(huì)再詳細(xì)寫。

總結(jié)

以上所述是小編給大家介紹的工作中常用到的ES6語(yǔ)法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！