文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

es2015是不是es6

2023-07-04 11:01

关注

这篇文章主要介绍了es2015是不是es6的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇es2015是不是es6文章都会有所收获,下面我们一起来看看吧。

es2015是es6。es全称“ECMAScript”,是根据ECMA-262标准实现的通用脚本语言,而由2015年6月正式发布的版本,其正式名为ECMAScript2015(ES2015),因其是ECMAScript的第6个版本,因此可简称为es6。

“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 常用的环境支持情况

PC浏览器对ES2015的支持情况

移动端浏览器对ES2015的支持情况

服务器对ES2015的支持情况,具体查看:https://node.green/

var(对比let、const)

let(块级作用域)

const 常量

数组解构

const [foo, bar, baz] = arrconsole.log(foo, bar, baz)const [, , baz] = arrconsole.log(baz)// 解构剩余的数组元素// 只能在最后一个位置使用扩展运算符const [foo, ...rest] = arrconsole.log(rest)// 解构时元素较少,按照顺序取元素const [foo] = arrconsole.log(foo)// 解构时设置默认值const [foo, bar, baz = 123, more = 'default value'] = arrconsole.log(bar, more)

对象解构

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

模板字符串

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

字符串的扩展方法

const message = 'Error: foo is not defined.'console.log(  // message.startsWith('Error')  // message.endsWith('.')  message.includes('foo'))

方法的参数默认值

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

方法的剩余参数

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 指向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()

对象字面量

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              // => true0 === false             // => false+0 === -0               // => trueNaN === NaN             // => falseObject.is(+0, -0)       // => falseObject.is(NaN, NaN)     // => true

Proxy 和 Object.defineProperty

Proxy的作用
对Object属性变化进行监听

对比Object.defineProperty

Reflect(统一的操作Object对象方法)

const obj = {  foo: '123',  bar: '456'}const proxy = new Proxy(obj, {  get (target, property) {    console.log('watch logic~')    // Proxy中如果不写,默认调用了此方法    return Reflect.get(target, property)  }})

// 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 方法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 的继承

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 没有重复元素的数组集合

常用的成员方法

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中的itemm.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 // falses1.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 存在局限性

// 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使用)

具有 Symbol.iterator 属性的数据结构

Array、Map、Set、String、TypedArray、函数的 arguments 对象、NodeList 对象

iterator 的遍历过程是这样的。

使对象能够使用 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'))// 找不到返回 -1console.log(arr.indexOf('bar'))// 无法找到数组中的 NaNconsole.log(arr.indexOf(NaN))// 直接返回是否存在指定元素console.log(arr.includes('foo'))// 能够查找 NaNconsole.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...offor (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函数升级提升的地方:

2、async、await的返回值

async函数返回一个 Promise 对象。
2、async函数内部return语句返回的值,会成为then方法回调函数的参数。

async function f() {  return 'hello world';}f().then(v => console.log(v))// "hello world"

3、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(下个版本)

关于“es2015是不是es6”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“es2015是不是es6”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯