ホームページ > 記事 > ウェブフロントエンド > es2015はes6と同じですか?

es2015はes6と同じですか?

青灯夜游オリジナル: 2022-10-25 18:51:231837ブラウズ

es2015はes6です。 es の正式名称は「ECMAScript」で、ECMA-262 標準に従って実装されたユニバーサルスクリプト言語です。2015 年 6 月に正式にリリースされたバージョンは、正式には ECMAScript2015 (ES2015) と呼ばれます。ECMAScript の 6 番目のバージョンであるため、 es6 と呼ばれます。

es2015はes6と同じですか?

このチュートリアルの動作環境: Windows 7 システム、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 よりもはるかに速いです。主な理由は、最新のブラウザ、特に Chrome ブラウザと Firefox ブラウザはすでに ES6 のほとんどの機能をサポートしているためです。

それ以来、ECMA Script は重要な機能を追加するメジャーバージョン (ES6 と呼ばれます) を毎年リリースしてきました。

この記事では主にES2015～ES2019の主な特徴をまとめており、フロントエンド学習用の子供用シューズとして一般的に使用され、いくつかの特徴を理解されているはずです。

#ES2015 の主な機能:

元の文法を強化します
#新しいオブジェクト、新しいメソッド、新しい関数

Promise、Proxy、Object.assign など

新しいデータ型とデータ構造

シンボル、セット、マップなど

ES2015 でよく使用される環境のサポート

nodejs クエリ: https://node.green/

ブラウザクエリ: http://kangax.github.io/compat-table/es6/

PC ブラウジング Chrome のサポートES2015

Chrome: バージョン 51 以降、ES6 の新機能の 97% をサポートできます。

Firefox: バージョン 53 以降の ES6 の新機能の 97% をサポートします。
Safari: バージョン 10 以降の ES6 の新機能の 99% をサポートします。
Edge: Edge 15 は ES6 の新機能の 96% をサポートできます。 Edge 14 は、ES6 の新しい機能の 93% をサポートできます。
IE: IE7 ～ 11 は基本的に ES6 をサポートしません

ES2015 のモバイルブラウザのサポート

iOS: バージョンから開始10.0 では、ES6 の新機能の 99% をサポートできます。

Android: 基本的に ES6 の新機能はサポートされていません (5.1 は 25% のみサポートします)

サーバーの ES2015 サポートについては、https://node.js を確認してください。 green /

Node.js: バージョン 6.5 以降、ES6 の新機能の 97% をサポートできます。 (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 = &#39;default value&#39;] = arr
console.log(bar, more)

オブジェクトの構造化const obj = { name: 'zce', age: 18 } // 变量名重复时，可以重命名和设置默认值 const name = 'tom' const { name: objName = 'jack' } = obj console.log(objName)
テンプレート文字列

改行のサポート

埋め込み変数のサポートおよび式

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

includes には文字列が含まれます

startsWith 特定の文字列で始まるかどうか

endsWith かどうか特定の文字列で終わる

const message = &#39;Error: foo is not defined.&#39;

console.log(
  // message.startsWith(&#39;Error&#39;)
  // message.endsWith(&#39;.&#39;)
  message.includes(&#39;foo&#39;)
)

関数パラメータの後に = を使用してデフォルト値を設定します

形式的な場合のみパラメーターが未定義であるか、値が渡されない場合、デフォルト値が設定されます (false は設定されません)

デフォルト値がいくつかしかない場合は、デフォルト値を設定するコードを後で配置する必要があります。それ以外の場合は、デフォルト値を設定するコードを後で配置する必要があります。、

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

foo(false)

のみ使用できます仮パラメータ

の最後の桁はのみ使用できます

args が配列である場合、疑似配列である引数とは異なります。

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

foo(1, 2, 3, 4)

const arr = [&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;]

// 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 指向

const person = {
  name: &#39;tom&#39;,
  // 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视频教程、编程视频】

以上がes2015はes6と同じですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：リアクションはスパですか？次の記事：リアクションはスパですか？

続きを見る

es2015はes6と同じですか?

es6/ ES2015

#ES2015 の主な機能:

ブロックレベルのスコープがあります

ブロックレベルのスコープ内に存在します

オブジェクトの構造化const obj = { name: &#39;zce&#39;, age: 18 } // 变量名重复时，可以重命名和设置默认值 const name = &#39;tom&#39; const { name: objName = &#39;jack&#39; } = obj console.log(objName) テンプレート文字列

对象字面量

Object.assign

Object.is

Proxy 和 Object.defineProperty

Reflect（统一的操作Object对象方法）

Promise

Class 类的基本语法

Class 中的静态方法static

Class 的继承

Set、Map

Symbol

for…of 统一遍历方法

可迭代接口 iterator（主要给for…of使用）

迭代器模式（设计模式之一）

ES2016 新增特性

ES2017 新增特性

Object新增方法

String新增方法

在函数参数中添加尾逗号

新增Async/Await异步编程语法糖

ES2019 前定义的数据类型：8种

関連記事

オブジェクトの構造化const obj = { name: 'zce', age: 18 } // 变量名重复时，可以重命名和设置默认值 const name = 'tom' const { name: objName = 'jack' } = obj console.log(objName)
テンプレート文字列