搜索
首页web前端前端问答es2017是es6还是es8

es2017是es6还是es8

Oct 27, 2022 pm 05:37 PM
javascriptecmascript

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

es2017是es6还是es8

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

“es”简介

es全称“ECMAScript”,是根据 ECMA-262 标准实现的通用脚本语言,ECMA-262 标准主要规定了这门语言的语法、类型、语句、关键字、保留字、操作符、对象等几个部分。每次看到 ES 后面跟着数字,是 ECMAScript 的不同版本。

es8/ ES2017

es8全称ECMAScript8(ECMAScript的第8个版本),是于2017年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2017(ES2017)。

与 ES6 相比,ES8 是 JavaScript 的一个小版本,但它仍然引入了非常有用的功能:

  • 字符串填充(padStart 和 padEnd)

  • Object.values

  • Object.entries

  • Object.getOwnPropertyDescriptors()

  • 函数参数列表和调用中的尾随逗号

  • Async Functions (异步函数)

  • 共享内存 和 Atomics

字符串填充(padStart 和 padEnd)

字符串填充的目的是 向字符串添加字符,使字符串达到指定的长度。

ES2017引入了两个 String 方法:padStart()padEnd()

JavaScript 代码:
padStart(targetLength [, padString])
padEnd(targetLength [, padString])

简单的使用:

1.png

Object.values()

这个方法返回一个包含所有对象自身属性值的数组。

使用:

JavaScript 代码:
const person = { name: 'Fred', age: 87 }
Object.values(person) // ['Fred', 87]

Object.values() 也适用于数组:

JavaScript 代码:
const people = ['Fred', 'Tony']
Object.values(people) // ['Fred', 'Tony']

Object.entries()

这个方法返回一个包含所有对象自身属性的数组,作为 [key,value] 对的数组。

使用:

JavaScript 代码:
const person = { name: 'Fred', age: 87 }
Object.entries(person) // [['name', 'Fred'], ['age', 87]]

Object.entries() 也适用于数组:

JavaScript 代码:
const people = ['Fred', 'Tony']
Object.entries(people) // [['0', 'Fred'], ['1', 'Tony']]

Object.getOwnPropertyDescriptors()

此方法返回对象的所有自有(非继承的)属性描述符。

JavaScript 中的任何对象都有一组属性,每个属性都有一个描述符。

描述符是属性(property) 的一组特性(attributes),它由以下的子集组成:

  • value:属性的值
  • writabletrue 表示改属性可以被修改
  • get:属性的 getter 函数,在读取属性时调用
  • set:属性的 setter 函数,在属性设置值时调用
  • configurable:如果为 false ,则不能删除属性,也不能更改任何属性,但值除外
  • enumerable:如果属性是可枚举的,则为 true

Object.getOwnPropertyDescriptors(obj) 接受一个对象,并返回一个带有描述符集的对象。

这个方法有什么用?

ES2015 给我们带来了 Object.assign() 方法,它从一个或多个对象复制所有可枚举的属性,并返回一个新对象。

但是存在问题,它无法正确复制具有非默认特性(attribute) 的属性 (property)(getter,setter,不可写属性,等)。

如果一个对象只有一个 setter ,则无法使用 Object.assign() 正确地复制到一个新对象。

例如:

JavaScript 代码:
const person1 = {
    set name(newName) {
        console.log(newName)
    }
}

以下代码将不起作用:

JavaScript 代码:
const person2 = {}
Object.assign(person2, person1)

但下面的代码就会奏效:

JavaScript 代码:
const person3 = {}
Object.defineProperties(person3,
  Object.getOwnPropertyDescriptors(person1))

您可以通过简单的控制台测试,将会看到:

JavaScript 代码:
person1.name = 'x'
"x"
 
person2.name = 'x'
 
person3.name = 'x'
"x"

person2 丢失了 setter ,因为它没有复制过来。

使用 Object.create() 对浅拷贝对象也有同样的限制。

函数参数列表和调用中的尾随逗号

此功能允许在函数声明和函数调用中使用尾随逗号:

JavaScript 代码:
const doSomething = (var1, var2,) => {
  //...
}
doSomething('test2', 'test2',)

这一变化将鼓励开发人员停止丑陋的“行以逗号开头”的习惯。

Async Functions (异步函数)

ES2017 引入了 Async Functions (异步函数) 的概念,这是 ECMAScript 版本中引入的最重要的变化。

Async Functions (异步函数) 是 promises 和 generators(生成器) 的组合,以简化 promises 调用,提过代码的可读性,但是不打破 promises 链式调用的限制。

为什么有用

这是对 promises 更高层次的抽象。

当 Promise 在 ES2015 中引入时,它们的目的是解决异步代码的问题,并且他们做到了。但在 ES2015 和 ES2017 相间隔的两年时间里,很明显, Promise 并不是最终的解决方案。

引入 Promise 是为了解决著名的 回调地狱 问题,但它们引入了自己的复杂性和语法复杂性。它们是良好的原语,可以向开发人员公开更好的语法:那就是Async Functions (异步函数)。

一个简单的例子

使用异步函数的代码可以写成:

JavaScript 代码:
function doSomethingAsync() {
    return new Promise((resolve) => {
        setTimeout(() => resolve('I did something'), 3000)
    })
}
async function doSomething() {
    console.log(await doSomethingAsync())
}
console.log('Before')
doSomething()
console.log('After')

上面的代码将在浏览器控制台中打印以下内容:

JavaScript 代码:
Before
After
I did something //after 3s

链式调用多个异步函数

异步函数可以非常容易地链式调用,并且语法比简单的 Promise 更具可读性:

JavaScript 代码:
function promiseToDoSomething() {
    return new Promise((resolve)=>{
        setTimeout(() => resolve('I did something'), 10000)
    })
}
async function watchOverSomeoneDoingSomething() {
    const something = await promiseToDoSomething()
    return something + ' and I watched'
}
async function watchOverSomeoneWatchingSomeoneDoingSomething() {
    const something = await watchOverSomeoneDoingSomething()
    return something + ' and I watched as well'
}
watchOverSomeoneWatchingSomeoneDoingSomething().then((res) => {
    console.log(res)
})

共享内存 和 Atomics

WebWorkers 用于在浏览器中创建多线程程序。

他们通过事件提供消息传递协议。 从ES2017开始,您可以使用 SharedArrayBuffer 在 Web worker 及其创建者之间创建共享内存数组。

由于我们不知道向共享内存部分写入要花费多少时间来传播,因此 Atomics 是一种在读取值时执行该操作的方法,并且完成了任何类型的写入操作。

【相关推荐:javascript视频教程编程视频

以上是es2017是es6还是es8的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
在React应用中使用USESTATE()优化性能在React应用中使用USESTATE()优化性能Apr 27, 2025 am 12:22 AM

USESTATE()ISCICIALFOROPTIMINECREACTAPPPERFORMACTACEUTOPACTONCACTONRE REDERSANDUPDATES.TOOPTIMIZE:1)USEUSECALLBACKTOMEMOEMOEIZEFUNCTIONSANDPREVENTUNNNNNNNNNNNNNNNNENESMARYRERER.2)limemememememoforcachingExpensiveComputations.3)

使用上下文和usestate()在组件之间共享状态使用上下文和usestate()在组件之间共享状态Apr 27, 2025 am 12:19 AM

使用Context和useState共享状态是因为它们可以简化大型React应用中的状态管理。1)减少propdrilling,2)代码更清晰,3)更易管理全局状态。但要注意性能开销和调试复杂性,合理使用Context和优化技术可以提升应用的效率和可维护性。

不正确键对React虚拟DOM更新的影响不正确键对React虚拟DOM更新的影响Apr 27, 2025 am 12:19 AM

使用不正确的键会导致React应用程序中的性能问题和意外行为。1)键是列表项的唯一标识符,帮助React高效地更新虚拟DOM。2)使用相同或不唯一的键会导致列表项重新排序和组件状态丢失。3)使用稳定且唯一的标识符作为键可以优化性能,避免全量重渲染。4)使用工具如ESLint来验证键的正确性。正确使用键可以确保React应用的高效和可靠性。

了解React中的键:优化列表渲染了解React中的键:优化列表渲染Apr 27, 2025 am 12:13 AM

抗反应,KeysareSentialForoPtimizingListrenderingPerformanceByHelpingReaCreActTrackChangesinListItems.1)KeySenableFiticeFficityDomupdatesbyDatesbyIdentifyingAddedAdded,Orremervedemss.2)使用UniqueNiqueIdentifiersLikeIdentifiersLikeDataBaseIdSaskeys,而不是预测

与React中使用Usestate()合作时,常见错误与React中使用Usestate()合作时,常见错误Apr 27, 2025 am 12:08 AM

useState在React中常被误用。1.误解useState的工作机制:setState后状态不会立即更新。2.错误更新状态:应使用函数形式的setState。3.过度使用useState:非必要时应使用props。4.忽略useEffect的依赖数组:状态变化时需更新依赖数组。5.性能考虑:批量更新状态和简化状态结构可提升性能。正确理解和使用useState能提高代码效率和可维护性。

React的SEO友好性:提高搜索引擎可见性React的SEO友好性:提高搜索引擎可见性Apr 26, 2025 am 12:27 AM

是的,ReactApplicationsCanbEseo-FrylylywithProperStratecies.1)用户 - 插图(SSR)withToolslikenext.jstogenate.jstogenate fullhtmlforindexing.2)enasleStaticsiteSitegeneration(ssg)

React的性能瓶颈:识别和优化缓慢的组件React的性能瓶颈:识别和优化缓慢的组件Apr 26, 2025 am 12:25 AM

React性能瓶颈主要由低效渲染、不必要的重渲染和组件内重的计算造成。 1)使用ReactDevTools定位慢组件并应用React.memo优化。 2)优化useEffect,确保仅在必要时运行。 3)使用useMemo和useCallback进行记忆化处理。 4)将大组件拆分为小组件。 5)对于大数据列表,使用虚拟滚动技术优化渲染。通过这些方法,可以显着提升React应用的性能。

反应的替代方案:探索其他JavaScript UI库和框架反应的替代方案:探索其他JavaScript UI库和框架Apr 26, 2025 am 12:24 AM

有人可能会寻找React的替代品,因为性能问题、学习曲线或探索不同的UI开发方法。1)Vue.js因其易于集成和温和的学习曲线而受到赞扬,适用于小型和大型应用。2)Angular由Google开发,适合大型应用,具有强大的类型系统和依赖注入。3)Svelte通过在构建时编译成高效的JavaScript,提供出色的性能和简洁性,但其生态系统仍在成长。选择替代品时,应根据项目需求、团队经验和项目规模来决定。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能