14.（ECMAScript）es8完全解读

2023-11-28 11:40
文章标签 解读 14 完全 ecmascript es8

本文主要是介绍14.（ECMAScript）es8完全解读，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 1. 重点提炼
  • 2. 异步编程解决方案Async Await
  • 3. 对象扩展：Object.values()，Object.entries()
    • 3.1 Object.values()
    • 3.2 Object.entries()
  • 4. 对象属性描述： Object.getOwnPropertyDescriptors()
  • 5. 字符串扩展：String.prototype.padStart()，String.prototype.padEnd()
    • 5.1 String.prototype.padStart()
    • 5.2 String.prototype.padEnd()
    • 5.3 应用场景
      • 5.3.1 日期格式化
      • 5.3.2 数字替换
      • 5.3.3 时间戳统一长度
  • 6. 尾逗号Trailing commas

1. 重点提炼

  • async/await
  • 对象扩展和对象属性描述
  • 字符串扩展
  • 尾都会

2. 异步编程解决方案Async Await

async和 await是一种更加优雅的异步编程解决方案，是Promise的拓展，如果对 Promise还不了解的话，看一下小迪的 Promise 小结进行学习。

虽然promise可以更好的处理异步的状态，但是有很多请求和异步操作，每个异步操作互相的依赖关系很强的话，其实写起来也非常地繁琐。Async / Await写起来更加语义化并且更加优雅，实际它们是Generator函数的语法糖。

async function foo(){return 'hello' // Promise.resolve('hello')
}
console.log(foo())

async函数返回了一个promise对象，状态是resolveed。

return 'hello' 类似执行 => Promise.resolve('hello')

image-20201127150149779

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.47
Branch： branch02

commit description：a3.47（异步编程解决方案Async Await——async 函数返回值）

tag：a3.47


await后面需要跟异步操作，不然就没有意义，而且await后面的Promise对象不必写then，因为await的作用之一就是获取后面Promise对象成功状态传递出来的参数。

async function foo() {let result = await 'hello'console.log(result)
}
foo()

正常情况下，await后加异步操作，这里的这种写法是不可取的。

hello

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.48
Branch： branch02

commit description：a3.48（异步编程解决方案Async Await——await后跟字符串）

tag：a3.48


经典面试题 =>

function timeout() {return new Promise(resolve => {setTimeout(()=>{console.log(1)resolve()}, 1000)})
}async function foo(){timeout()console.log(2)
}
foo()

timeout里是异步操作，因此先去执行主线程的内容。

2

1

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.49
Branch： branch02

commit description：a3.49（异步编程解决方案Async Await——经典面试题）

tag：a3.49


需求：等异步操作执行完成后再执行同步操作 =>

function timeout() {return new Promise(resolve => {setTimeout(()=>{console.log(1)resolve()}, 1000)})
}async function foo(){await timeout()console.log(2)
}
foo()

await=> 等待后面的异步操作代码执行完毕，再执行其下面的代码。

虽然Async Await是异步操作，但写法是同步的。

1

2

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.50
Branch： branch02

commit description：a3.50（异步编程解决方案Async Await——等异步操作执行完成后再执行同步操作）

tag：a3.50


Promise操作，可以利用resolve传递成功的返回值给await前的变量。

await执行的时候，下面两行代码都不会执行，必须等到其异步代码执行完毕才行。

function timeout() {return new Promise(resolve => {setTimeout(()=>{resolve(1)}, 1000)})
}async function foo(){const res = await timeout()console.log(res)console.log(2)
}
foo()

1

2

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.51
Branch： branch02

commit description：a3.51（异步编程解决方案Async Await——Promise操作，可以利用resolve传递成功的返回值给await前的变量）

tag：a3.51


异步操作失败的情况下，如何通过Async Await去处理？

timeout返回的是promise对象，因此可以直接利用then，如果是错误则用catch捕获。

在async函数中使用await，那么await这里的代码就会变成同步的了，意思就是说只有等await后面的Promise执行完成得到结果才会继续下去，await就是等待。

function timeout() {return new Promise((resolve, reject) => {setTimeout(() => {reject('fail')}, 1000)})
}
async function foo() {return await timeout()
}
foo().then(res => {console.log(res);
}).catch(err => {console.log(err)
})

fail

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.52
Branch： branch02

commit description：a3.52（异步编程解决方案Async Await——利用then和catch获取结果）

tag：a3.52


发送ajax请求，使用async和await更为优雅！

es-demo\src\ajax.js

function ajax(url, callback) {// 1、创建XMLHttpRequest对象var xmlhttpif (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest()} else { // 兼容早期浏览器xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')}// 2、发送请求xmlhttp.open('GET', url, true)xmlhttp.send()// 3、服务端响应xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {var obj = JSON.parse(xmlhttp.responseText)// console.log(obj)callback(obj)}}
}
export default ajax

es-demo\src\3-1.js

import ajax from './ajax'function request(url) {return new Promise(resolve => {ajax(url, res => {resolve(res)})})
}
async function getData(){const res1 = await request('static/a.json')console.log(res1)const res2 = await request('static/b.json')console.log(res2)const res3 = await request('static/c.json')console.log(res3)
}
getData()

image-20201127220553687

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.53
Branch： branch02

commit description：a3.53（异步编程解决方案Async Await——发送ajax请求，使用async和await）

tag：a3.53


注意

await只能在 async标记的函数内部使用，单独使用会触发 Syntax error。


3. 对象扩展：Object.values()，Object.entries()

  • Object.values()
  • Object.entries()

之前的语法如何获取对象的每一个属性值

获取对象中的value，Object.keys获取所有的key（数组类型），利用map遍历，map返回一个新的数组。

const obj = {name: 'baidu',web: 'www.baidu.com',target: 'es'
}
console.log(Object.keys(obj))
const res = Object.keys(obj).map(key => obj[key])
console.log(res)

image-20201127225314787

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.54
Branch： branch02

commit description：a3.54（对象扩展：Object.values()，Object.entries()——之前获取对象中的value的方式）

tag：a3.54


ES8中对象扩展补充了两个静态方法，用于遍历对象：Object.values()，Object.entries()

3.1 Object.values()

Object.values() 返回一个数组，其元素是在对象上找到的可枚举属性值。属性的顺序与通过手动循环对象的属性值所给出的顺序相同(for...in，但是for...in还会遍历原型上的属性值)。

Object.values => 返回对象对应的value数组

const obj = {name: 'ls',web: 'www.ls.com',course: 'es'
}console.log(Object.values(obj))
// ["ls", "www.ls.com", "es"]

note

Object.values 是在对象上找到可枚举的属性的值，所以只要这个对象是可枚举的就可以，不只是 {} 这种形式。


3.2 Object.entries()

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in循环遍历该对象时返回的顺序一致。（区别在于 for-in循环也枚举原型链中的属性）

let grade = {'lilei': 98,'hanmei': 87
}for (let [key, value] of grade) {console.log(key, value) // Uncaught TypeError: grade is not iterable
}

我们知道 Object 是不可直接遍历的，上述代码足以说明直接遍历触发了错误。如果使用 Object.entries()则可以完成遍历任务。

let grade = {'lilei': 98,'hanmei': 87
}for (let [k, v] of Object.entries(grade)) {console.log(k, v)// lilei 98// hanmei 87
}

img

Object.entries => 返回二维数组，它的每一项又是一个数组，数组的第一项代表key，第二项代表value

for…of 搭配 Object.entries => 遍历key与 value

const obj = {name: 'baidu',web: 'www.baidu.com',target: 'es'
}console.log(Object.values(obj))
console.log(Object.entries(obj))
for(let [key, val] of Object.entries(obj)){console.log(`${key}: ${val}`)
}

image-20201127232146367

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.55
Branch： branch02

commit description：a3.55（对象扩展：Object.values()，Object.entries()——基本使用）

tag：a3.55


Object.entries参数是数组，也返回一个二维数组，第一个对应索引，第二个对应value。但一般都是传对象，没必要传数组。

console.log(Object.entries(['a', 'b', 'c']))

image-20201127232331346

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.56
Branch： branch02

commit description：a3.56（对象扩展：Object.values()，Object.entries()——Object.entries传数组）

tag：a3.56


4. 对象属性描述： Object.getOwnPropertyDescriptors()

  • Object.getOwnPropertyDescriptors() => 获取对象自身所有的描述符
    • value
    • writable
    • configurable
    • enumerable

const data = {Portland: '78/50',Dublin: '88/52',Lima: '58/40'
}

这里有 key和 value，上边的代码把所有的 key、value遍历出来，如果我们不想让 Lima这个属性和值被枚举怎么办？

Object.defineProperty(data, 'Lima', {enumerable: false
})Object.entries(data).map(([city, temp]) => {console.log( `City: ${city.padEnd(16)} Weather: ${temp}` )// City: Portland         Weather: 78/50// City: Dublin           Weather: 88/52
})

补充 => String.prototype.padEnd()

方法会用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。

const str1 = 'Breaded Mushrooms';console.log(str1.padEnd(25, '.'));
// expected output: "Breaded Mushrooms........"const str2 = '200';console.log(str2.padEnd(5));
// expected output: "200  "

很成功，Lima没有被遍历出来，那么 defineProperty 的第三个参数就是描述符(descriptor)。这个描述符包括几个属性：

  • value[属性的值（默认值）]
  • writable[属性的值是否可被改变]
  • enumerable[属性的值是否可被枚举，是否能通过for…in进行遍历]
  • configurable[描述符本身是否可被修改，属性是否可被删除，能否用delete运算符删除该属性]

这个是获取对象指定属性的描述符，如果想获取对象的所有属性的描述符： => Object.getOwnPropertyDescriptors

const obj = {name: 'baidu',target: 'es'
}const desc = Object.getOwnPropertyDescriptors(obj)
console.log(desc)

image-20201128103930948

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.57
Branch： branch02

commit description：a3.57（对象属性描述： Object.getOwnPropertyDescriptors()——基本使用）

tag：a3.57


这四个属性如何设置上去，可通过defineProperty。

const obj = {}
Reflect.defineProperty(obj, 'name', {value: 'lisi',writable: false,configurable: false,enumerable: false
})console.log(obj)
obj.name = 'zhangsan'
console.log(obj)

writable为false，则不可写。

image-20201128105517444

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.58
Branch： branch02

commit description：a3.58（对象属性描述： Object.getOwnPropertyDescriptors()——writable 为false，则不可写。）

tag：a3.58


const obj = {}
Reflect.defineProperty(obj, 'name', {value: 'lisi',writable: true,configurable: false,enumerable: false
})console.log(obj)
obj.name = 'zhangsan'
console.log(obj)

writable为true，则可写。

image-20201128105654219

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.59
Branch： branch02

commit description：a3.59（对象属性描述： Object.getOwnPropertyDescriptors()——writable 为true，则可写。）

tag：a3.59


const obj = {}
Reflect.defineProperty(obj, 'name', {value: 'lisi',writable: true,configurable: false,enumerable: false
})console.log(obj)
obj.name = 'zhangsan'
console.log(obj)
delete obj.name
console.log(obj)

configurable为false，则属性不可被delete。

image-20201128110514091

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.60
Branch： branch02

commit description：a3.60（对象属性描述： Object.getOwnPropertyDescriptors()——configurable为false，则属性不可被delete。）

tag：a3.60


const obj = {}
Reflect.defineProperty(obj, 'name', {value: 'lisi',writable: true,configurable: true,enumerable: false
})console.log(obj)
obj.name = 'zhangsan'
console.log(obj)
delete obj.name
console.log(obj)

configurable为true，则属性可被delete。

image-20201128110658121

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.61
Branch： branch02

commit description：a3.61（对象属性描述： Object.getOwnPropertyDescriptors()——configurable为true，则属性可被delete。）

tag：a3.61


const obj = {}
Reflect.defineProperty(obj, 'name', {value: 'lisi',writable: true,configurable: true,enumerable: false
})
Reflect.defineProperty(obj, 'age', {value: 34,writable: true,configurable: true,enumerable: true
})
for(let key in obj){console.log(key)
}

enumerable为true才可遍历。

age

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.62
Branch： branch02

commit description：a3.62（对象属性描述： Object.getOwnPropertyDescriptors()——enumerable为true才可遍历。）

tag：a3.62


const obj = {}
Reflect.defineProperty(obj, 'name', {value: 'lisi',writable: true,configurable: true,enumerable: false
})
Reflect.defineProperty(obj, 'age', {value: 34,writable: true,configurable: true,enumerable: true
})
for(let key in obj){console.log(key)
}
console.log(Object.getOwnPropertyDescriptors(obj))
console.log(getOwnPropertyDescriptor(obj, 'age'))

getOwnPropertyDescriptor=> 获取单个属性的描述。

image-20201128111215117

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.63
Branch： branch02

commit description：a3.63（对象属性描述： Object.getOwnPropertyDescriptors()——getOwnPropertyDescriptor => 获取单个属性的描述。）

tag：a3.63


5. 字符串扩展：String.prototype.padStart()，String.prototype.padEnd()

在 ES8中 String新增了两个实例函数 String.prototype.padStart 和 String.prototype.padEnd，允许将空字符串或其他字符串添加到原始字符串的开头或结尾。

  • String.prototype.padStart()
  • String.prototype.padEnd()

5.1 String.prototype.padStart()

把指定字符串填充到字符串头部，返回新字符串。

str.padStart(targetLength [, padString])

参数含义必选
targetLength目标字符要保持的长度值Y
padString如果目标字符的长度不够需要的补白字符，默认为空N

str.padStart 对应两个参数 => 在开始的位置填充字符串

第1个参数是需要填充的目标长度，即填充之后字符串的长度

第2个参数是可选的，即填充的字符串，如果省略，则用空格填充。

padEnd 则与之相反，是末尾填充

const str = 'baidu'
console.log(str.padStart(8, 'x'))
console.log(str.padEnd(8, 'y'))
console.log(str.padStart(8))

image-20201128114650076

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.64
Branch： branch02

commit description：a3.64（字符串扩展：String.prototype.padStart()，String.prototype.padEnd()——基本使用）

tag：a3.64


5.2 String.prototype.padEnd()

方法会用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。

str.padEnd(targetLength [, padString])

参数含义必选
targetLength目标字符要保持的长度值Y
padString如果目标字符的长度不够需要的补白字符，默认为空N
const str1 = 'I am learning es in csdn'
console.log(str1.padEnd(30, '.'))
// I am learning es in csdn.....const str2 = '200'
console.log(str2.padEnd(5))
// "200  "

5.3 应用场景

5.3.1 日期格式化

输出日期 => yyyy-mm-dd 2020-04-01

Date.getMonth 返回的是月份，0~11，因此需要加1，并且个位数需要补0

Date.getDate

const now = new Date()
const year = now.getFullYear()
const month = (now.getMonth() + 1).toString().padStart(2, '0') // 0~11
const day = (now.getDate()).toString().padStart(2, '0')
console.log(`${year}-${month}-${day}`)

2020-11-01

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.65
Branch： branch02

commit description：a3.65（字符串扩展：String.prototype.padStart()，String.prototype.padEnd()——应用场景-拼接日期）

tag：a3.65


5.3.2 数字替换

如平时经常需要仅显示手机号或者身份证号的后四位，前面全部用星号代替。

const tel = '13012345678'
const newTel = tel.slice(-4).padStart(tel.length, '*')
console.log(newTel)

image-20201128120918071

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.66
Branch： branch02

commit description：a3.66（字符串扩展：String.prototype.padStart()，String.prototype.padEnd()——应用场景-仅显示手机号或者身份证号的后四位，前面全部用星号代替）

tag：a3.66


5.3.3 时间戳统一长度

时间戳是13位的，固定单位是毫秒ms

有的时候时间戳是后端生成的，后端把时间戳返回过来，它返回的是以秒为单位的，即10位，这个时候需要补000。

console.log(new Date().getTime()) // 13位 ms
timestamp.padEnd(13, '0') // 伪代码

6. 尾逗号Trailing commas

ES8 允许函数的最后一个参数有尾逗号（Trailing comma）。

此前，函数定义和调用时，都不允许最后一个参数后面出现逗号。

  • 允许函数参数列表使用尾逗号

定义函数时候，但最后一个参数定义完以后，再最后多写一个逗号。

开发时可能使用代码格式化工具格式化如下，实际作用就是多人开发使用git代码管理工具，追加一个参数，只需要修改一行即可，否则得添加逗号改两行。

function foo(a,b,c,
) {console.log(a, b, c)
}foo(4, 5, 6, )

4 5 6

这样的规定也使得，函数参数与数组和对象的尾逗号规则，保持一致了。

参考：https://github.com/6xiaoDi/blog-ECMScript-Series/tree/a3.67
Branch： branch02

commit description：a3.67（尾逗号Trailing commas）

tag：a3.67




（后续待补充）

这篇关于14.（ECMAScript）es8完全解读的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/429635。

相关文章

MySQL中的MVCC底层原理解读

MySQL中的MVCC底层原理解读

《MySQL中的MVCC底层原理解读》本文详细介绍了MySQL中的多版本并发控制（MVCC）机制,包括版本链、ReadView以及在不同事务隔离级别下MVCC的工作原理,通过一个具体的示例演示了在可重... 目录简介ReadView版本链演示过程总结简介MVCC（Multi-Version Concurr
阅读更多...
关于Gateway路由匹配规则解读

关于Gateway路由匹配规则解读

《关于Gateway路由匹配规则解读》本文详细介绍了SpringCloudGateway的路由匹配规则,包括基本概念、常用属性、实际应用以及注意事项,路由匹配规则决定了请求如何被转发到目标服务,是Ga... 目录Gateway路由匹配规则一、基本概念二、常用属性三、实际应用四、注意事项总结Gateway路由
阅读更多...
解读Redis秒杀优化方案(阻塞队列+基于Stream流的消息队列)

解读Redis秒杀优化方案(阻塞队列+基于Stream流的消息队列)

《解读Redis秒杀优化方案(阻塞队列+基于Stream流的消息队列)》该文章介绍了使用Redis的阻塞队列和Stream流的消息队列来优化秒杀系统的方案,通过将秒杀流程拆分为两条流水线,使用Redi... 目录Redis秒杀优化方案(阻塞队列+Stream流的消息队列)什么是消息队列？消费者组的工作方式每
阅读更多...
解读静态资源访问static-locations和static-path-pattern

解读静态资源访问static-locations和static-path-pattern

《解读静态资源访问static-locations和static-path-pattern》本文主要介绍了SpringBoot中静态资源的配置和访问方式,包括静态资源的默认前缀、默认地址、目录结构、访... 目录静态资源访问static-locations和static-path-pattern静态资源配置
阅读更多...
MySQL中时区参数time_zone解读

MySQL中时区参数time_zone解读

《MySQL中时区参数time_zone解读》MySQL时区参数time_zone用于控制系统函数和字段的DEFAULTCURRENT_TIMESTAMP属性,修改时区可能会影响timestamp类型... 目录前言1.时区参数影响2.如何设置3.字段类型选择总结前言mysql 时区参数 time_zon
阅读更多...
MySQL中的锁和MVCC机制解读

MySQL中的锁和MVCC机制解读

《MySQL中的锁和MVCC机制解读》MySQL事务、锁和MVCC机制是确保数据库操作原子性、一致性和隔离性的关键,事务必须遵循ACID原则,锁的类型包括表级锁、行级锁和意向锁,MVCC通过非锁定读和... 目录mysql的锁和MVCC机制事务的概念与ACID特性锁的类型及其工作机制锁的粒度与性能影响多版本
阅读更多...
Redis过期键删除策略解读

Redis过期键删除策略解读

《Redis过期键删除策略解读》Redis通过惰性删除策略和定期删除策略来管理过期键,惰性删除策略在键被访问时检查是否过期并删除,节省CPU开销但可能导致过期键滞留,定期删除策略定期扫描并删除过期键,... 目录1.Redis使用两种不同的策略来删除过期键，分别是惰性删除策略和定期删除策略1.1惰性删除策略
阅读更多...
Redis与缓存解读

Redis与缓存解读

《Redis与缓存解读》文章介绍了Redis作为缓存层的优势和缺点,并分析了六种缓存更新策略,包括超时剔除、先删缓存再更新数据库、旁路缓存、先更新数据库再删缓存、先更新数据库再更新缓存、读写穿透和异步... 目录缓存缓存优缺点缓存更新策略超时剔除先删缓存再更新数据库旁路缓存(先更新数据库，再删缓存）先更新数
阅读更多...
C#反射编程之GetConstructor()方法解读

C#反射编程之GetConstructor()方法解读

《C#反射编程之GetConstructor()方法解读》C#中Type类的GetConstructor()方法用于获取指定类型的构造函数,该方法有多个重载版本,可以根据不同的参数获取不同特性的构造函... 目录C# GetConstructor()方法有4个重载以GetConstructor(Type[]
阅读更多...
业务中14个需要进行A/B测试的时刻[信息图]

业务中14个需要进行A/B测试的时刻[信息图]

在本指南中，我们将全面了解有关 A/B测试 的所有内容。 我们将介绍不同类型的A/B测试，如何有效地规划和启动测试，如何评估测试是否成功，您应该关注哪些指标，多年来我们发现的常见错误等等。 什么是A/B测试？ A/B测试（有时称为“分割测试”）是一种实验类型，其中您创建两种或多种内容变体——如登录页面、电子邮件或广告——并将它们显示给不同的受众群体，以查看哪一种效果最好。 本质上，A/B测
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2