Adakah es2015 sama dengan es6?

es2015 ialah es6. Nama penuh es ialah "ECMAScript", iaitu bahasa skrip universal yang dilaksanakan mengikut piawaian ECMA-262 Versi yang dikeluarkan secara rasmi pada Jun 2015 secara rasmi dipanggil ECMAScript2015 (ES2015, kerana ia adalah versi ke-6 ECMAScript boleh Dirujuk sebagai es6.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Pengenalan kepada "es"

Nama penuh es ialah "ECMAScript", iaitu bahasa skrip universal yang dilaksanakan mengikut ECMA- 262 standard, ECMA-262 standard Ia terutamanya menetapkan sintaks, jenis, pernyataan, kata kunci, perkataan terpelihara, operator, objek dan bahagian lain bahasa. Setiap kali anda melihat ES diikuti dengan nombor, ia adalah versi ECMAScript yang berbeza.

es6/ ES2015

Nama penuh es6 ialah ECMAScript6 (versi ke-6 ECMAScript Ia adalah standard bahasa JavaScript yang dikeluarkan secara rasmi pada Jun 2015. Ia adalah secara rasmi dipanggil ECMAScript 2015 (ES2015). Matlamatnya adalah untuk membolehkan bahasa JavaScript digunakan untuk menulis aplikasi berskala besar yang kompleks dan menjadi bahasa pembangunan peringkat perusahaan.

ECMAScript 6 pada asasnya telah menjadi standard industri, dan popularitinya jauh lebih pantas daripada ES5 Sebab utama ialah penyemak imbas moden menyokong ES6 dengan cepat, terutamanya pelayar Chrome dan Firefox, yang sudah menyokong kebanyakan ciri.

Selepas itu, Skrip ECMA mengeluarkan versi utama setiap tahun untuk menambah beberapa ciri penting, yang kami panggil ES6.

Artikel ini meringkaskan terutamanya ciri utama ES2015-ES2019 Kasut kanak-kanak untuk pembelajaran bahagian hadapan haruslah beberapa ciri yang biasa digunakan dan difahami.

Fungsi utama ES2015:

• Menyelesaikan beberapa kekurangan tatabahasa asal
• Meningkatkan tatabahasa asal
• Objek baharu, kaedah baharu, fungsi baharu

Promise, Proxy, Object.assign, dll.

• Jenis data dan Struktur data baharu

Simbol, Set, Peta, dll.

Sokongan persekitaran yang biasa digunakan ES2015

• Pertanyaan nodejs: https://node.green/
• Pertanyaan penyemak imbas: http://kangax.github.io/compat-table/es6/

Sokongan pelayan menyemak imbas PC untuk ES2015

• Chrome: Bermula dari versi 51, ia boleh menyokong 97% ciri baharu ES6.
• Firefox: Menyokong 97% ciri baharu ES6 bermula daripada versi 53.
• Safari: Menyokong 99% ciri baharu ES6 bermula dari versi 10.
• Edge: Edge 15 boleh menyokong 96% ciri baharu ES6. Edge 14 boleh menyokong 93% ciri ES6 baharu.
• IE: IE7 ~ 11 pada dasarnya tidak menyokong ES6

Sokongan penyemak imbas mudah alih untuk ES2015

• iOS: Bermula dari versi 10.0, ia boleh menyokong 99% ciri baharu ES6.
• Android: Pada asasnya tidak menyokong ciri baharu ES6 (5.1 hanya menyokong 25%)

Untuk sokongan pelayan untuk ES2015, sila semak: https://node. hijau /

• Node.js: Bermula dari versi 6.5, ia boleh menyokong 97% ciri baharu ES6. (6.0 menyokong 92%)

var (berbanding let, const)

• Hanya ada skop global dan skop fungsi, tidak ada skop peringkat Blok yang ketat
• Promosi boleh ubah wujud
• Pengisytiharan dan takrifan pembolehubah boleh dilakukan secara berasingan
• Pembolehubah boleh diisytiharkan berulang kali

biar (Skop peringkat blok)

• Terdapat skop peringkat blok
• Promosi boleh ubah tidak boleh dilakukan
• Pengisytiharan dan takrifan pembolehubah boleh dilakukan secara berasingan
• Pembolehubah tidak boleh diisytiharkan berulang kali

pemalar const

• Skop peringkat blok wujud
• Promosi pembolehubah tidak boleh dilakukan
• Pengisytiharan dan definisi pembolehubah mestilah dalam pernyataan yang sama
• Pembolehubah tidak boleh diisytiharkan berulang kali
• Nilai pembolehubah yang diisytiharkan tidak boleh diubah suai (contohnya: nilai atribut objek boleh diubah suai, tetapi alamat objek tidak boleh diubah suai )
• Amalan terbaik: jangan gunakan var, terutamanya gunakan const dan bekerjasama dengan let

Pemusnahan tatasusunan

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)

Pemusnahan objek

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

// 变量名重复时，可以重命名和设置默认值
const name = 'tom'
const { name: objName = 'jack' } = obj
console.log(objName)

Rentetan templat

• Menyokong baris baharu
• Menyokong pembolehubah dan ungkapan terbenam

const name = 'tom'
// 可以通过 ${} 插入表达式，表达式的执行结果将会输出到对应位置
const msg = `hey, ${name} --- ${1 + 2} ---- ${Math.random()}`
console.log(msg)

Kaedah pengembangan rentetan

• termasuk mengandungi rentetan
• bermula Dengan Sama ada ia bermula dengan rentetan tertentu
• berakhirDengan Sama ada ia berakhir dengan rentetan tertentu

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

console.log(
  // message.startsWith('Error')
  // message.endsWith('.')
  message.includes('foo')
)

Nilai lalai parameter kaedah

• Gunakan = selepas parameter fungsi untuk menetapkan nilai lalai
• Nilai lalai hanya akan ditetapkan apabila parameter rasmi diluluskan tidak ditentukan atau tiada nilai diluluskan ( Palsu tidak akan berlaku)
• Jika terdapat hanya beberapa nilai lalai, kod untuk menetapkan nilai lalai diperlukan untuk diletakkan kemudian; jika tidak, baki parameter kaedah

// 默认参数一定是在形参列表的最后
function foo (bar，enable = true) {
  console.log('foo invoked - enable: ')
  console.log(enable)
}

foo(false)

tidak boleh digunakan secara normal

• hanya boleh muncul dalam digit terakhir parameter formal
• hanya boleh digunakan sekali
• args ialah array, tidak seperti argumen yang merupakan pseudo-array

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

foo(1, 2, 3, 4)

Kembangkan tatasusunan

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

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

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

console.log(...arr)

Fungsi anak panah

Pemalam: Fon Kod Fira menjadikan anak panah kelihatan lebih baik

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

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

// 常用场景，回调函数
arr.filter(i => i % 2)

Singkatan fungsi anak panah

function(value){return value} 等价于 value=>value

Fungsi anak panah ini menghala ke

• 普通函数的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，下个版本出标准化)

【相关推荐：javascript视频教程、编程视频】

Atas ialah kandungan terperinci Adakah es2015 sama dengan es6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!