Heim > Artikel > Web-Frontend > Ist es2015 dasselbe wie es6?
Ist es2015 dasselbe wie es6?
- 青灯夜游Original
- 2022-10-25 18:51:231836Durchsuche
es2015 ist es6. Der vollständige Name von es ist „ECMAScript“, eine universelle Skriptsprache, die gemäß dem ECMA-262-Standard implementiert ist. Die im Juni 2015 offiziell veröffentlichte Version heißt offiziell ECMAScript2015 (ES2015). kann als es6 bezeichnet werden.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.
Einführung in „es“
es, der vollständige Name von „ECMAScript“, ist eine universelle Skriptsprache, die gemäß dem ECMA-262-Standard implementiert ist. Der ECMA-262-Standard legt hauptsächlich die Syntax, Typen und Anweisungen fest , Schlüsselwörter, Mehrere Teile wie reservierte Wörter, Operatoren und Objekte sind reserviert. Jedes Mal, wenn ES gefolgt von einer Zahl angezeigt wird, handelt es sich um eine andere Version von ECMAScript.
es6/ ES2015
es6 steht für ECMAScript6 (die 6. Version von ECMAScript). Es handelt sich um einen Standard für die JavaScript-Sprache, der im Juni 2015 offiziell veröffentlicht wurde. Er heißt offiziell ECMAScript 2015 (ES2015). Ziel ist es, die Verwendung der JavaScript-Sprache zum Schreiben komplexer Großanwendungen zu ermöglichen und sie zu einer Entwicklungssprache auf Unternehmensebene zu machen.
ECMAScript 6 hat sich im Grunde viel schneller als ES5 durchgesetzt. Der Hauptgrund dafür ist, dass moderne Browser ES6 sehr schnell unterstützen.
Seitdem hat ECMA Script jedes Jahr eine Hauptversion veröffentlicht, die einige wichtige neue Funktionen hinzufügt, die wir ES6+ nennen.
Dieser Artikel fasst hauptsächlich die Hauptfunktionen von ES2015-ES2019 zusammen. Ein Kinderschuh zum Lernen des Front-Ends sollte einige häufig verwendete und verstandene Funktionen umfassen.
Die Hauptfunktionen von ES2015:
- Beheben Sie einige Mängel der ursprünglichen Syntax.
- Verbessern Sie die ursprüngliche Syntax.
- Neue Objekte, neue Methoden, neue Funktionen.
Neue Datentypen und Datenstrukturen
- Symbol, Satz, Karte usw.
ES2015 häufig verwendeter Umgebungsunterstützungsstatus
nodejs-Abfrage: https://node.green/
Browser Abfrage: http://kangax.github.io/compat-table/es6/- PC-Browser-Unterstützung für ES2015
Chrome: 97 % der neuen ES6-Funktionen können ab Version 51 unterstützt werden.
Firefox: Ab Version 53 kann es 97 % der neuen ES6-Funktionen unterstützen.- Safari: Unterstützt 99 % der neuen ES6-Funktionen ab Version 10.
- Edge: Edge 15 kann 96 % der neuen ES6-Funktionen unterstützen. Edge 14 kann 93 % der neuen ES6-Funktionen unterstützen.
- IE: IE7 ~ 11 unterstützt ES6 grundsätzlich nicht.
- Unterstützung für mobile Browser für ES2015.
iOS: 99 % der neuen ES6-Funktionen können ab Version 10.0 unterstützt werden.
Android: unterstützt grundsätzlich keine neuen ES6-Funktionen (5.1 unterstützt nur 25 %).- Die Serverunterstützung für ES2015, bitte überprüfen: https://node.green/
Node.js: ab Version 6.5 Es kann 97 % der neuen Funktionen von ES6 unterstützen. (6.0 unterstützt 92%)
- var (im Vergleich zu let, const)
Nur globaler Bereich und Funktionsbereich, es gibt keinen strikten Bereich auf Blockebene
Es gibt eine Variablenförderung- Deklaration und Definition von Variablen Kann separat durchgeführt werden. Variablen können wiederholt deklariert werden. Let (Bereich auf Blockebene). separat ausgeführt
- Variablen können nicht wiederholt deklariert werden
- Konstantenkonstanten
Existieren im Gültigkeitsbereich auf Blockebene
Kann nicht als Variable angehoben werden- Deklaration und Definition von Variablen müssen in derselben Anweisung erfolgen
- Variablen können nicht deklariert werden wiederholt
- Der deklarierte Variablenwert kann nicht geändert werden (z. B.: Der Attributwert des Objekts kann geändert werden, aber die Objektadresse kann nicht geändert werden)
- Best Practice: Verwenden Sie nicht var, sondern hauptsächlich const mit let
Array-Destrukturierung
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)
- Objekt-Destrukturierung
const obj = { name: 'zce', age: 18 } // 变量名重复时，可以重命名和设置默认值 const name = 'tom' const { name: objName = 'jack' } = obj console.log(objName)Vorlagenzeichenfolge- Unterstützung für Zeilenumbruchzeichen
- unterstützt eingebettete Variablen und Ausdrücke
const name = 'tom' // 可以通过 ${} 插入表达式，表达式的执行结果将会输出到对应位置 const msg = `hey, ${name} --- ${1 + 2} ---- ${Math.random()}` console.log(msg)String-Erweiterungsmethode
startsWith gibt an, ob es mit einer bestimmten Zeichenfolge beginnt
endsWith, ob es mit einer bestimmten Zeichenfolge endetconst message = 'Error: foo is not defined.' console.log( // message.startsWith('Error') // message.endsWith('.') message.includes('foo') )
Methode Parameter-Standardwert
- Verwenden Sie = nach dem Funktionsparameter, um den Standardwert festzulegen
- Der Standardwert wird nur festgelegt, wenn der formale Parameter undefiniert ist oder keinen Wert hat wird übergeben (falsch nicht)
// 默认参数一定是在形参列表的最后 function foo (bar，enable = true) { console.log('foo invoked - enable: ') console.log(enable) } foo(false)Array erweiternfunction foo (first, ...args) { console.log(args) } foo(1, 2, 3, 4)Pfeilfunktion: Die Fira-Code-Schriftart zeichnet die Pfeile besser- 普通函数的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视频教程、编程视频】
Das obige ist der detaillierte Inhalt vonIst es2015 dasselbe wie es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!