Is es2015 the same as es6?

es2015 is es6. The full name of es is "ECMAScript", which is a universal scripting language implemented according to the ECMA-262 standard. The version officially released in June 2015 is officially called ECMAScript2015 (ES2015). Because it is the 6th version of ECMAScript, it can Referred to as es6.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

"es" introduction

es full name is "ECMAScript", which is a universal scripting language implemented according to the ECMA-262 standard, ECMA-262 standard It mainly stipulates the syntax, types, statements, keywords, reserved words, operators, objects and other parts of the language. Every time you see ES followed by a number, it's a different version of ECMAScript.

es6/ ES2015

es6 stands for ECMAScript6 (the 6th version of ECMAScript). It is a standard for the JavaScript language officially released in June 2015. It is officially called ECMAScript 2015 (ES2015). Its goal is to enable the JavaScript language to be used to write complex large-scale applications and become an enterprise-level development language.

ECMAScript 6 has basically become the industry standard, and its popularity is much faster than ES5. The main reason is that modern browsers support ES6 very quickly, especially Chrome and Firefox browsers, which already support ES6. most features.

Since then, ECMA Script has released a major version every year to add some important features, which we call ES6.

This article mainly summarizes the main features of ES2015-ES2019. A child's shoes for learning front-end should be commonly used and understand some features.

The main function of ES2015:

• Solve some shortcomings of the original grammar
• Enhance the original grammar
• New objects, new methods, new functions

Promise, Proxy, Object.assign, etc.

• New data types and data Structure

Symbol, Set, Map, etc.

ES2015 commonly used environment support

• nodejs Query: https://node.green/
• Browser query: http://kangax.github.io/compat-table/es6/

PC browsing Chrome's support for ES2015

• Chrome: Starting from version 51, it can support 97% of ES6 new features.
• Firefox: Supports 97% of ES6 new features starting from version 53.
• Safari: Supports 99% of ES6 new features starting from version 10.
• Edge: Edge 15 can support 96% of ES6 new features. Edge 14 can support 93% of the new ES6 features.
• IE: IE7 ~ 11 basically does not support ES6

Mobile browser support for ES2015

• iOS: Starting from version 10.0, it can support 99% of the new features of ES6.
• Android: Basically does not support ES6 new features (5.1 only supports 25%)

For the server’s support for ES2015, please check: https://node.green /

• Node.js: Starting from version 6.5, it can support 97% of the new features of ES6. (6.0 supports 92%)

var (compared to let, const)

• There are only global scope and function scope, there is no strict Block-level scope
• There is variable promotion
• The declaration and definition of variables can be done separately
• Variables can be declared repeatedly

let (Block-level scope)

• There is a block-level scope
• Variable promotion is not allowed
• The declaration and definition of variables can be done separately
• Variables cannot be declared repeatedly

const constants

• Exists in block-level scope
• Cannot promote variables
• The declaration and definition of variables must be in the same statement
• Variables cannot be declared repeatedly
• The declared variable value cannot be modified (for example: the attribute value of the object can be modified, but the object address cannot be modified )
• Best practice: do not use var, mainly use const, and cooperate with let

Array destructuring

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)

Object destructuring

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

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

Template string

• Supports newlines
• Supports embedded variables and expressions

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

String extension methods

• includes contains strings
• startsWith Whether it starts with a certain string
• endsWith Whether it ends with a certain string

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

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

Parameter default value of method

• Use = after the function parameter to set the default value
• Only when the formal parameter is undefined or no value is passed, the default value will be set (false will not)
• If there are only some default values, the code for setting the default values ​​needs to be placed later; otherwise, the remaining parameters of the

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

foo(false)

method cannot be used normally

• can only appear The last digit of the formal parameter
• can only be used once
• args is an array, which is different from arguments which is a pseudo array

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

foo(1, 2, 3, 4)

Expand the array

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

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

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

console.log(...arr)

Arrow function

Plug-in: Fira Code font makes arrows look better

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

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

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

Abbreviation for arrow function

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

This of the arrow function points to

• 普通函数的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视频教程、编程视频】

The above is the detailed content of Is es2015 the same as es6?. For more information, please follow other related articles on the PHP Chinese website!