es2015是es6。es全稱「ECMAScript」，是根據ECMA-262標準實現的通用指令碼語言，而由2015年6月正式釋出的版本，其正式名為ECMAScript2015（ES2015），因其是ECMAScript的第6個版本，因此可簡稱為es6。

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

「es」簡介

es全稱「ECMAScript」，是根據 ECMA-262 標準實現的通用指令碼語言，ECMA-262 標準主要規定了這門語言的語法、型別、語句、關鍵字、保留字、操作符、物件等幾個部分。每次看到 ES 後面跟著數位，是 ECMAScript 的不同版本。

es6/ ES2015

es6全稱ECMAScript6（ECMAScript的第6個版本），是於2015年6月正式釋出的JavaScript語言的標準，正式名為ECMAScript 2015（ES2015）。它的目標是使得JavaScript語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。

ECMAScript 6 目前基本成為業界標準，它的普及速度比 ES5 要快很多，主要原因是現代瀏覽器對 ES6 的支援相當迅速，尤其是 Chrome 和 Firefox 瀏覽器，已經支援 ES6 中絕大多數的特性。

在此後ECMA Script每年釋出一個大版本新增加一些重要特性，我們稱之為ES6+。

本文主要總結了ES2015-ES2019的主要特性，一個學習前端的童鞋應該是常用且理解的一些特性。

ES2015 的主要作用：

解決原有語法的一些不足
對原有語法進行增強
全新的物件、全新的方法、全新的功能

Promise、Proxy、Object.assign等

全新的資料型別和資料結構

Symbol、Set、Map等

ES2015 常用的環境支援情況

nodejs查詢：https://node.green/
瀏覽器查詢：http://kangax.github.io/compat-table/es6/

PC瀏覽器對ES2015的支援情況

Chrome：51 版起便可以支援 97% 的 ES6 新特性。
Firefox：53 版起便可以支援 97% 的 ES6 新特性。
Safari：10 版起便可以支援 99% 的 ES6 新特性。
Edge：Edge 15可以支援 96% 的 ES6 新特性。Edge 14 可以支援 93% 的 ES6 新特性。
IE：IE7 ~ 11 基本不支援 ES6

行動端瀏覽器對ES2015的支援情況

iOS：10.0 版起便可以支援 99% 的 ES6 新特性。
Android：基本不支援 ES6 新特性（5.1 僅支援 25%）

伺服器對ES2015的支援情況，具體檢視：https://node.green/

Node.js：6.5 版起便可以支援 97% 的 ES6 新特性。（6.0 支援 92%）

var（對比let、const）

只有全域性作用域、函數作用域，不存在嚴格的塊級作用域
存在變數提升
變數的宣告和定義可以分開進行
變數可以重複宣告

let（塊級作用域）

存在塊級作用域
不能變數提升
變數的宣告和定義可以分開進行
變數不能重複宣告

const 常數

存在塊級作用域
不能變數提升
變數的宣告和定義必須在同一個語句中
變數不能重複宣告
不能修改宣告過的變數值（例如：可以修改物件的屬性值，不能修改物件地址）
最佳實踐：不用var，主用const，配合let

陣列解構

const [foo, bar, baz] = arr
console.log(foo, bar, baz)

const [, , baz] = arr
console.log(baz)

// 解構剩餘的陣列元素
// 只能在最後一個位置使用擴充套件運運算元
const [foo, ...rest] = arr
console.log(rest)

// 解構時元素較少，按照順序取元素
const [foo] = arr
console.log(foo)

// 解構時設定預設值
const [foo, bar, baz = 123, more = 'default value'] = arr
console.log(bar, more)
登入後複製

物件解構

const obj = { name: 'zce', age: 18 }

// 變數名重複時，可以重新命名和設定預設值
const name = 'tom'
const { name: objName = 'jack' } = obj
console.log(objName)
登入後複製

模板字串

支援換行符
支援嵌入變數、表示式

const name = 'tom'
// 可以通過 ${} 插入表示式，表示式的執行結果將會輸出到對應位置
const msg = `hey, ${name} --- ${1 + 2} ---- ${Math.random()}`
console.log(msg)
登入後複製

字串的擴充套件方法

includes 包含字串
startsWith 是否以某字串開頭
endsWith 是否以某字串結束

const message = 'Error: foo is not defined.'

console.log(
  // message.startsWith('Error')
  // message.endsWith('.')
  message.includes('foo')
)
登入後複製

方法的引數預設值

在function引數後面使用=設定預設值
只有當形參傳遞是undefined或者沒有傳遞值時，才會設定預設值（false也不會）
如果只有部分預設值，需要將設定預設值的程式碼放到後面；否則無法正常使用

// 預設引數一定是在形參列表的最後
function foo (bar，enable = true) {
  console.log('foo invoked - enable: ')
  console.log(enable)
}

foo(false)
登入後複製

方法的剩餘引數

只能出現在形參的最後一位
只能使用一次
args是一個陣列，區別於arguments是一個偽陣列

function foo (first, ...args) {
  console.log(args)
}

foo(1, 2, 3, 4)
登入後複製

展開陣列

const arr = ['foo', 'bar', 'baz']

// console.log(
//   arr[0],
//   arr[1],
//   arr[2],
// )

// console.log.apply(console, arr)

console.log(...arr)
登入後複製

箭頭函數

外掛：Fira Code字型將箭頭畫的更好看

const arr = [1, 2, 3, 4, 5, 6, 7]

// arr.filter(function (item) {
//   return item % 2
// })

// 常用場景，回撥函數
arr.filter(i => i % 2)
登入後複製

箭頭函數的簡寫

function(value){return value} 等價於 value=>value
登入後複製

箭頭函數的this指向

普通函數的this指向呼叫它方法的物件
箭頭函數的this和它外面函數的this指向相同，即：箭頭函數不會改變this的指向

// 箭頭函數與 this
// 箭頭函數不會改變 this 指向

const person = {
  name: 'tom',
  // sayHi: function () {
  //   console.log(`hi, my name is ${this.name}`)//tom，this指向該函數呼叫者
  // }
  sayHi: () => {
    console.log(`hi, my name is ${this.name}`) //undefined，this和sayHi()外面的函數this相同
  },
  sayHiAsync: function () {
    // const _this = this
    // setTimeout(function () {
    //   console.log(_this.name) //這裡的this為window，所以需要使用_this
    // }, 1000)

    console.log(this)
    setTimeout(() => {
      // console.log(this.name) //這裡的this指向sayHiAsync裡的this，即person
      console.log(this)
    }, 1000)
  }
}
person.sayHi()
person.sayHiAsync()
登入後複製

物件字面量

如果屬性名和值的變數名相同，可以省略一個變數
方法的簡寫：可以省略「：function」
計算屬性名：屬性名可以在[]裡面使用任意表示式

const bar = '345'

const obj = {
  foo: 123,
  // bar: bar
  // 屬性名與變數名相同，可以省略 : bar
  bar,
  // method1: function () {
  //   console.log('method111')
  // }
  // 方法可以省略 : function
  method1 () {
    console.log('method111')
    // 這種方法就是普通的函數，this 指向obj。
    console.log(this)
  },
  // Math.random(): 123 // 不允許，使用[]才行
  // 通過 [] 讓表示式的結果作為屬性名
  [bar]: 123
}
登入後複製

Object.assign

Object.assign是不完全的深拷貝？它究竟拷貝了多少東西？
獲取不到obj中的get、set資訊

將源物件中的值賦值到目標物件
目標物件和返回值是同一個物件
如果目標物件中有相同名字的屬性，則覆蓋該屬性
可以傳入多個源物件，按照順序依次覆蓋目標物件

const source1 = {
  a: 123,
  b: 123
}

const source2 = {
  b: 789,
  d: 789
}

const target = {
  a: 456,
  c: 456
}

const result = Object.assign(target, source1, source2)

console.log(target)
console.log(result === target) //true，目標物件和返回值是一個物件
登入後複製

Object.is

0 == false              // => true
0 === false             // => false
+0 === -0               // => true
NaN === NaN             // => false
Object.is(+0, -0)       // => false
Object.is(NaN, NaN)     // => true
登入後複製

Proxy 和 Object.defineProperty

Proxy的作用
對Object屬性變化進行監聽

對比Object.defineProperty
參考筆記：https://gitee.com/ymcdhr/e-task/wikis/?sort_id=4053906

Reflect（統一的操作Object物件方法）

Proxy屬性的方法中預設呼叫了Reflect中的方法，例如：

const obj = {
  foo: '123',
  bar: '456'
}

const proxy = new Proxy(obj, {
  get (target, property) {
    console.log('watch logic~')
    // Proxy中如果不寫，預設呼叫了此方法
    return Reflect.get(target, property)
  }
})
登入後複製

Relect提供了統一的操作Object物件的方法，MDN上有完整的13中方法：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

// console.log('name' in obj)
// console.log(delete obj['age'])
// console.log(Object.keys(obj))

console.log(Reflect.has(obj, 'name'))
console.log(Reflect.deleteProperty(obj, 'age'))
console.log(Reflect.ownKeys(obj))
登入後複製

Promise

Class 類的基本語法

// class 關鍵詞

// function Person (name) {
//   this.name = name
// }

// Person.prototype.say = function () {
//   console.log(`hi, my name is ${this.name}`)
// }

class Person {
  // 建構函式
  constructor (name) {
    this.name = name
  }
  // 成員變數
  age = 18
  // 成員函數
  say () {
    console.log(`hi, my name is ${this.name}`)
  }
}

const p = new Person('tom')
p.say()
登入後複製

Class 中的靜態方法static

宣告靜態方法：static關鍵字
呼叫靜態方法：Person.say
靜態方法的this指向為類

// static 方法

class Person {
  constructor (name) {
    this.name = name
  }

  say () {
    console.log(`hi, my name is ${this.name}`)
  }

  static create (name) {
    return new Person(name)
  }
}

const tom = Person.create('tom')
tom.say()
登入後複製

Class 的繼承

使用extends繼承
注意super的使用，能夠存取父類別；通常用來執行父類別建構函式。

class Person {
  constructor (name) {
    this.name = name
  }

  say () {
    console.log(`hi, my name is ${this.name}`)
  }
}

class Student extends Person {
  constructor (name, number) {
    super(name) // 呼叫父類別建構函式，否則name就沒有賦值（重要）
    this.number = number
  }

  hello () {
    super.say() // 呼叫父類別成員
    console.log(`my school number is ${this.number}`)
  }
}

const s = new Student('jack', '100')
s.hello()
登入後複製

Set、Map

Set 沒有重複元素的陣列集合

常用的成員方法

s.add(item) 新增item，返回集合本身，可鏈式呼叫
s.size 獲取Set的長度
s.has(item)判斷是否存在某個item
s.delete(item)刪除某個item
s.clear()刪除全部

const s = new Set()
s.add(1).add(2).add(3).add(4).add(2)
// console.log(s)

// s.forEach(i => console.log(i))  //forEach、for...of 都可以用來遍歷Set

// for (let i of s) {
//   console.log(i)
// }

// console.log(s.size)
// console.log(s.has(100))
// console.log(s.delete(3))
// console.log(s)
// s.clear()
// console.log(s)
登入後複製

常用來陣列去重

// 應用場景：陣列去重
const arr = [1, 2, 1, 3, 4, 1]

const result1 = Array.from(new Set(arr))
const result2 = [...new Set(arr)]

console.log(result1，result2)
登入後複製

Map 能使用複雜結構作為屬性的物件集合

以前的物件儲存物件屬性時，會將複雜資料轉換成字串（toString()方法），如下：

const obj = {}
obj[true] = 'value'
obj[123] = 'value'
obj[{ a: 1 }] = 'value'

console.log(Object.keys(obj))

//0: "123"
//1: "true"
//2: "[object Object]"
登入後複製

使用Map可以儲存複雜資料作為物件屬性，常用的方法有如下：

const m = new Map()
const tom = { name: 'tom' }
m.set(tom, 90)
console.log(m)
console.log(m.get(tom))

// m.has()
// m.delete()
// m.clear()

// forEach可以遍歷Map中的item
m.forEach((value, key) => {
  console.log(value, key)
})
登入後複製

Symbol

一個全新的基礎資料型別，每次建立都是獨一無二的值

let s = Symbol();

typeof s
// "symbol"

let s1 = Symbol('foo');
let s2 = Symbol('foo');

s1 === s2 // false

// for方法是建立的一樣的值，引數會自動轉換成字串
let s3 = Symbol.for('foo');
let s4 = Symbol.for('foo');

s3 === s4 // true
登入後複製

可以轉換為字串，通過description（ES2019提供的方法）

let s1 = Symbol('foo');
let s2 = Symbol('foo');

s1 // Symbol(foo)
s2 // Symbol(foo)

s1 === s2 // false

s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(foo)"
s1.description // "foo" // ES2019提供的方法
登入後複製

可以作為物件的屬性名，可以避免同名衝突

const obj = {}
obj[Symbol()] = '123'
obj[Symbol()] = '456'
console.log(obj)
//Symbol(): "123"
//Symbol(): "456"
登入後複製

使用 Symbol 值定義屬性時，Symbol 值必須放在方括號之中，而且不能使用點運運算元

let s = Symbol();

// 第一種寫法
let a = {};
a[s] = 'Hello!';

// 第二種寫法
let a = {
  [s]: 'Hello!'
};

// 以上寫法都得到同樣結果
a[s] // "Hello!"
登入後複製

可以作為物件的私有成員，不能在外部直接存取（因為每次存取都不一樣），只能通過內部this存取

// 案例2：Symbol 模擬實現私有成員

// a.js ======================================

const name = Symbol()
const person = {
  [name]: 'zce',
  say () {
    console.log(this[name])
  }
}
// 只對外暴露 person

// b.js =======================================

// 由於無法建立出一樣的 Symbol 值，
// 所以無法直接存取到 person 中的「私有」成員
// person[Symbol()]
person.say()
登入後複製

注意：for…in、Obeject.keys、Json.stringify都無法在Symbol上使用
使用：Object.getOwnPropertySymbols，替代Obeject.keys方法用於Symbol

for…of 統一遍歷方法

以前的 for…in 遍歷鍵值對，forEach 存在侷限性

可以用使用break終止遍歷，forEach不能跳出迴圈
可以遍歷Array陣列、Set和Map物件
普通物件不能被直接 for…of 遍歷，因為它沒有Symbol.iterator屬性
物件（Object）之所以沒有預設部署 Iterator 介面，是因為物件的哪個屬性先遍歷，哪個屬性後遍歷是不確定的，需要開發者手動指定。
所有可以使用 for…of 的物件都需要具有Symbol.iterator屬性

// for...of 迴圈
const arr = [100, 200, 300, 400]

// for...of 迴圈可以替代 陣列物件的 forEach 方法 但可以使用break跳出迴圈
arr.forEach(item => {
  console.log(item)
})

for (const item of arr) {
  console.log(item)
  if (item > 100) {
    break
  }
}

// forEach 無法跳出迴圈，必須使用 some 或者 every 方法
// arr.forEach() // 不能跳出迴圈
// arr.some()
// arr.every()

// 遍歷 Set 與遍歷陣列相同
const s = new Set(['foo', 'bar'])

for (const item of s) {
  console.log(item)
}

// 遍歷 Map 可以配合陣列結構語法，直接獲取鍵值
const m = new Map()
m.set('foo', '123')
m.set('bar', '345')

for (const [key, value] of m) {
  console.log(key, value)
}

// 普通物件不能被直接 for...of 遍歷
const obj = { foo: 123, bar: 456 }

for (const item of obj) {
  console.log(item)
}
登入後複製

可迭代介面 iterator（主要給for…of使用）

一些資料結構的原型物件 _ proto _ 中含有Symbol.iterator方法
iterator方法返回一個帶next()方法的指標物件
每次執行next()方法，它都會返回下一個資料

具有 Symbol.iterator 屬性的資料結構

Array、Map、Set、String、TypedArray、函數的 arguments 物件、NodeList 物件

iterator 的遍歷過程是這樣的。

（1）建立一個指標物件，指向當前資料結構的起始位置。也就是說，遍歷器物件本質上，就是一個指標物件。
（2）第一次呼叫指標物件的next方法，可以將指標指向資料結構的第一個成員。
（3）第二次呼叫指標物件的next方法，指標就指向資料結構的第二個成員。
（4）不斷呼叫指標物件的next方法，直到它指向資料結構的結束位置。

使物件能夠使用 for…of

const obj = {
  // 使用計算屬性，用[]存表示式屬性名
  // 1、Iterable，物件必須要有一個Symbol.iterator屬性
  [Symbol.iterator]: function () {
    return {
      // 2、Iterator，返回的物件有一個next()方法
      next: function () {
        // 3、IterationResult，next()方法返回一個物件
        return {
          value: 'zce',
          done: true
        }
      }
    }
  }
}

for (const item of obj) {
  console.log('迴圈體', item)
}
登入後複製

使物件能夠使用 for…of，完整的程式碼

const obj = {
  store: ['foo', 'bar', 'baz'],

  [Symbol.iterator]: function () {
    let index = 0
    const self = this

    return {
      next: function () {
        const result = {
          value: self.store[index],
          done: index >= self.store.length
        }
        index++
        return result
      }
    }
  }
}

for (const item of obj) {
  console.log('迴圈體', item)
}
登入後複製

迭代器模式（設計模式之一）

迭代器的另外一個主要用途：迭代器模式

ES2016 新增特性

陣列的includes方法

// Array.prototype.includes -----------------------------------

const arr = ['foo', 1, NaN, false]

// 找到返回元素下標
console.log(arr.indexOf('foo'))
// 找不到返回 -1
console.log(arr.indexOf('bar'))
// 無法找到陣列中的 NaN
console.log(arr.indexOf(NaN))

// 直接返回是否存在指定元素
console.log(arr.includes('foo'))
// 能夠查詢 NaN
console.log(arr.includes(NaN))
登入後複製

指數運運算元

// 指數運運算元 ---------------------------------------------------

console.log(Math.pow(2, 10))

console.log(2 ** 10)
登入後複製

ES2017 新增特性

Object新增方法

Object.values —— 類似Object.keys，返回物件的值陣列
Object.entries —— 以陣列的形式返回物件中的鍵值對，結合for…of可以遍歷obj

const obj = {
  foo: 'value1',
  bar: 'value2'
}

// Object.values -----------------------------------------------------------

console.log(Object.values(obj))

// Object.entries ----------------------------------------------------------

console.log(Object.entries(obj))
// 比iterator 更簡單，直接先將obj轉換成陣列，再使用 for...of
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value)
}

console.log(new Map(Object.entries(obj)))
登入後複製

Object.getOwnPropertyDescriptors —— 獲取物件屬性的完整資訊，主要配合ES5的get、set使用
Object.assign 獲取不到set、get資訊

const p1 = {
  firstName: 'Lei',
  lastName: 'Wang',
  get fullName () {
    return this.firstName + ' ' + this.lastName
  }
}

// console.log(p1.fullName)

// const p2 = Object.assign({}, p1)
// p2.firstName = 'zce'
// console.log(p2)

const descriptors = Object.getOwnPropertyDescriptors(p1)
// console.log(descriptors)
const p2 = Object.defineProperties({}, descriptors)
p2.firstName = 'zce'
console.log(p2.fullName)
登入後複製

String新增方法

String.prototype.padStart / String.prototype.padEnd

const books = {
  html: 5,
  css: 16,
  javascript: 128
}

// for (const [name, count] of Object.entries(books)) {
//   console.log(name, count)
// }

for (const [name, count] of Object.entries(books)) {
  console.log(`${name.padEnd(16, '-')}|${count.toString().padStart(3, '0')}`)
}
登入後複製

在函數引數中新增尾逗號

const arr = [
  100,
  200,
  300,
  400,
]
const arr = [
  100,
  200,
  300
]
登入後複製

新增Async/Await非同步程式設計語法糖

來自於ES2017標準；async、await能夠更方便的進行非同步程式設計，且通常需要成對使用；

1、async、await相對於generate函數升級提升的地方：

（1）內建執行器
（2）更好的語意
（3）更好的擴充套件器
（4）返回值是promise

2、async、await的返回值

（1）async的返回值是promise物件；但是需要注意：

1、async函數返回一個 Promise 物件。
2、async函數內部return語句返回的值，會成為then方法回撥函數的引數。

async function f() {
  return 'hello world';
}

f().then(v => console.log(v))
// "hello world"
登入後複製

（2）await返回值根據後面的引數不同而不同，有兩種；

3、await 後面的引數

（1）await後面跟一個promise物件；=> 返回promise物件的結果；
（2）await後面跟一個值；=> 直接返回該值；

4、錯誤處理方法

如果await後面的promise非同步操作出錯，那麼等同於async函數返回的 Promise 物件被reject。最好把await命令放在try…catch程式碼塊中

async function f() {
  await new Promise(function (resolve, reject) {
    throw new Error('出錯了');
  });
}

f()
.then(v => console.log(v))
.catch(e => console.log(e))
async function myFunction() {
  try {
    await somethingThatReturnsAPromise();
  } catch (err) {
    console.log(err);
  }
}

// 另一種寫法

async function myFunction() {
  await somethingThatReturnsAPromise()
  .catch(function (err) {
    console.log(err);
  });
}
登入後複製

5、並行/迴圈非同步請求的處理

（1）如果是序列執行非同步請求，需要同步等待，會比較耗時；

let foo = await getFoo();
let bar = await getBar();

// 1、迴圈裡面的序列執行：
async function dbFuc(db) {
  let docs = [{}, {}, {}];

  for (let doc of docs) {
    await db.post(doc);
  }
}

// 2、錯誤的序列執行：？why？思考？forEach裡面的async應該是非同步同時執行的，沒有await？
function dbFuc(db) { //這裡不需要 async
  let docs = [{}, {}, {}];

  // 可能得到錯誤結果
  docs.forEach(async function (doc) {
    await db.post(doc);
  });
}
登入後複製

（2）並行執行——等待所有響應，再執行下一個步驟；

async function dbFuc(db) {
  let docs = [{}, {}, {}];
  let promises = docs.map((doc) => db.post(doc));

  let results = await Promise.all(promises);
  console.log(results);
}

// 或者使用下面的寫法

async function dbFuc(db) {
  let docs = [{}, {}, {}];
  let promises = docs.map((doc) => db.post(doc));

  let results = [];
  for (let promise of promises) {
    results.push(await promise);
  }
  console.log(results);
}
登入後複製

（3）並行執行——不等待所有響應，回來一個回撥一個；

// 可以不要在for裡面await；也不要寫成序列的回撥；
// 是在for裡面寫非同步方法的呼叫？例如：

  let docs = [{}, {}, {}];

  for (let doc of docs) {
    db.post(doc).then((res)=>{});
  }
登入後複製

6、async、await原理（利用generator實現async、await）

async、await底層封裝起來了看不見程式碼實現
可以利用iterator或者generator函數，進行封裝實現；參考程式碼：（未完待續）

ES2019 前定義的資料型別：8種

6+1 種原始資料型別 + bigInt（下個版本）

null
undefined
number
string
boolean
Symbol(ES2015)
BigInt(stage-4，下個版本出標準化)

【相關推薦：、】

以上就是es2015就是es6嗎的詳細內容，更多請關注TW511.COM其它相關文章！