您的位置：首页 > 数码常识数码常识
es7与es10（es6到es11）
2025-05-10人已围观
es7与es10（es6到es11）
Array.prototype.includes()includes() 方法用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回 false。
es6到es11Array.prototype.includes()
语法
valueToFind，需要查找的元素值。
fromIndex 可选 从fromIndex 索引处开始查找 valueToFind。如果为负值（即从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。
示例
注意点
使用 includes()查找字符串是区分大小写的。
使用 includes()只能判断简单类型的数据，对于复杂类型的数据，比如对象类型的数组，二维数组，这些是无法判断的.
能识别NaN，indexOf是不能识别NaN的
最后，如果只想知道某个值是否在数组中存在，而并不关心它的索引位置，建议使用includes(),如果想获取一个值在数组中的位置，那么使用indexOf方法。
幂运算符 **
比如我们想求2的10次方。
自己写函数实现
Math.pow()
幂运算符 **
基本求幂
注意
幂运算符的两个*号之间不能出现空格，否则语法会报错。
ES2017(ES8)Object.values()
Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。
Object.entries()
Object.entries() 方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值对数组。
Object.getOwnPropertyDescriptors()
Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符。
上面打印结果中的
value表示当前对象的默认值writable表示对象属性是否可以修改enumerable表示当前这个属性是否可以出现在对象的枚举属性中configurable表示当前对象的属性能否用delete删除
那这些对象的属性我们怎么设置和修改他们呢，我们可以使用es5的 Object.defineProperty()
接下来我们演示下，一些属性设置为false的情况
我们可以看到设置 writable: false和configurable: false,为false时，对象的name对象的值不能改变和不能被删除，打印出来还是原来的对象。
设置enumerable为false时
当设置enumerable: false时，表示对象的属性不可被枚举，这时打印对象为空，遍历对象的键也为空。
String.prototype.padStart
把指定字符串填充到字符串头部，返回新字符串。
语法
str.padStart(targetLength [, padString])
targetLength
当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
padString 可选
填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的默认值为 " "
示例
应用场景
日期格式化：yyyy-mm-dd的格式：
数字替换(手机号，银行卡号等）
String.prototype.padEnd
把指定字符串填充到字符串尾部，返回新字符串。
语法同上
示例
应用场景
在JS前端我们处理时间戳的时候单位是ms毫秒，但是，后端同学返回的时间戳则不一样是毫秒，可能只有10位，以s秒为单位。所以，我们在前端处理这个时间戳的时候，保险起见，要先做一个13位的补全，保证单位是毫秒。
尾逗号 Trailing commas
ES8 允许函数的最后一个参数有尾逗号（Trailing comma）。此前，函数定义和调用时，都不允许最后一个参数后面出现逗号。
上面代码中，如果在param2或bar后面加一个逗号，就会报错。
如果像上面这样，将参数写成多行（即每个参数占据一行），以后修改代码的时候，想为函数clownsEverywhere添加第三个参数，或者调整参数的次序，就势必要在原来最后一个参数后面添加一个逗号。这对于版本管理系统来说，就会显示添加逗号的那一行也发生了变动。这看上去有点冗余，因此新的语法允许定义和调用时，尾部直接可以加上一个逗号。
这样的规定也使得，函数参数与数组和对象的尾逗号规则，保持一致了。
async/await介绍
我们都知道使用 Promise 能很好地解决回调地狱的问题，但如果处理流程比较复杂的话，那么整段代码将充斥着 then，语义化不明显，代码不能很好地表示执行流程，那有没有比 Promise 更优雅的异步方式呢？那就是async/await！我们一起来揭开它神秘的面撒吧！
前面添加了async的函数在执行后都会自动返回一个Promise对象:
添加async后
async函数中使用await，那么await这里的代码就会变成同步的了，意思就是说只有等await后面的Promise执行完成得到结果才会继续下去，await就是等待。请看下面的示例：
使用场景
假如有这样一个使用场景：需要先请求 a 链接，等返回信息之后，再请求 b 链接的另外一个资源。下面代码展示的是使用 fetch 来实现这样的需求，fetch 被定义在 window 对象中，它返回的是一个 Promise 对象。
虽然上述代码可以实现这个需求，但语义化不明显，代码不能很好地表示执行流程。基于这个原因，ES8 引入了 async/await，这是 JavaScript 异步编程的一个重大改进，提供了在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力，并且使得代码逻辑更加清晰。
通过上面代码，你会发现整个异步处理的逻辑都是使用同步代码的方式来实现的，而且还支持 try catch 来捕获异常，这感觉就在写同步代码，所以是非常符合人的线性思维的。
注意点await 只能在 async 标记的函数内部使用，单独使用会触发 Syntax error。await后面需要跟异步操作，不然就没有意义，而且await后面的Promise对象不必写then，因为await的作用之一就是获取后面Promise对象成功状态传递出来的参数。async/await的缺陷
了解Async/await是非常有用的，但还有一些缺点需要考虑。
Async/await 让你的代码看起来是同步的，在某种程度上，也使得它的行为更加地同步。 await 关键字会阻塞其后的代码，直到promise完成，就像执行同步操作一样。它确实可以允许其他任务在此期间继续运行，但您自己的代码被阻塞。
这意味着您的代码可能会因为大量await的promises相继发生而变慢。每个await都会等待前一个完成，而你实际想要的是所有的这些promises同时开始处理（就像我们没有使用async/await时那样）。
有一种模式可以缓解这个问题——通过将 Promise 对象存储在变量中来同时开始它们，然后等待它们全部执行完毕。如果想更加深入的了解，请参考 MDN[1]
ES2018(ES9)Object Rest & Spread
在 ES9 新增 Object 的 Rest & Spread 方法，直接看下示例：
这块代码展示了 spread 语法，可以把 input 对象的数据都拓展到 output 对象，这个功能很实用。需要注意的是，如果存在相同的属性名，只有最后一个会生效。
注意点
如果属性的值是一个对象的话，该对象的引用会被拷贝，而不是生成一个新的对象。
我们再来看下 Object rest 的示例：
当对象 key-value 不确定的时候，把必选的 key 赋值给变量，用一个变量收敛其他可选的 key 数据，这在之前是做不到的。注意，rest 属性必须始终出现在对象的末尾，否则将抛出错误。
for await of
异步迭代器(for-await-of)：循环等待每个Promise对象变为resolved状态才进入下一步。
我们知道 for...of 是同步运行的，看如下代码
上面打印结果如下图
1640436987(1).png
上述代码证实了 for of 方法不能遍历异步迭代器，得到的结果并不是我们所期待的，于是 for await of 就粉墨登场啦！
ES9 中可以用 for...await...of 的语法来操作
for await of 环等待每个Promise对象变为resolved状态才进入下一步。所有打印的结果为 2000，1000，3000
Promise.prototype.finally()
Promise.prototype.finally() 方法返回一个Promise，在promise执行结束时，无论结果是fulfilled或者是rejected，在执行then()和catch()后，都会执行finally指定的回调函数。这为指定执行完promise后，无论结果是fulfilled还是rejected都需要执行的代码提供了一种方式，避免同样的语句需要在then()和catch()中各写一次的情况。
示例
使用场景
loading关闭
需要每次发送请求，都会有loading提示，请求发送完毕，就需要关闭loading提示框，不然界面就无法被点击。不管请求成功或是失败，这个loading都需要关闭掉，这时把关闭loading的代码写在finally里再合适不过了
String 扩展
放松对标签模板里字符串转义的限制, 遇到不合法的字符串转义会返回undefined，并且从raw上可获取原字符串。
下面是一个es6 的标签模板 如果对这个语法感到陌生，请参考 标签模板[2]
参数打印如下：
ES9开始，模板字符串允许嵌套支持常见转义序列，移除对ECMAScript在带标签的模版字符串中转义序列的语法限制。
1640441321(1).png
注意点
在模板字符串中，如果输入无效的unicode字符，还是会报错。只有在便签模板中 从es9开始才不会报错。
ES2019(ES10)Object.fromEntries()
方法 Object.fromEntries() 把键值对列表转换为一个对象，这个方法是和 Object.entries() 相对的。
案例1：Object 转换操作
案例2：Map 转 Object
案例3：过滤
course表示所有课程，想请求课程分数大于80的课程组成的对象：
案例4：url的search参数转换
Array.prototype.flat()语法
depth 可选
指定要提取嵌套数组的结构深度，默认值为 1。
示例
flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
Array.prototype.flatMap()
flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。从方法的名字上也可以看出来它包含两部分功能一个是 map，一个是 flat（深度为1）。
语法
callback
可以生成一个新数组中的元素的函数，可以传入三个参数：
currentValue
当前正在数组中处理的元素
index
可选 数组中正在处理的当前元素的索引。
array
可选 被调用的 map 数组
thisArg可选
执行 callback 函数时 使用的this 值。
示例
这个示例可以简单对比下 map 和 flatMap 的区别。当然还可以看下下面的示例：
flatMap 方法与 map 方法和深度depth为1的 flat 几乎相同.
String.prototype.trimStart()
trimStart() 方法从字符串的开头删除空格，trimLeft()是此方法的别名。
String.prototype.trimEnd()
trimEnd() 方法从一个字符串的右端移除空白字符，trimRight 是 trimEnd 的别名。
可选的Catch Binding
在 ES10 之前我们都是这样捕获异常的：
在这里 err 是必须的参数，在 ES10 可以省略这个参数：
应用
验证参数是否为json格式
这个需求我们只需要返回true或false，并不关心catch的参数。
Symbol.prototype.description
我们知道，Symbol 的描述只被存储在内部的 Description ，没有直接对外暴露，我们只有调用 Symbol 的 toString() 时才可以读取这个属性：
现在可以通过 description 方法获取 Symbol 的描述:
JSON.stringify() 增强能力
JSON.stringify 在 ES10 修复了对于一些超出范围的 Unicode 展示错误的问题。因为 JSON 都是被编码成 UTF-8，所以遇到 0xD800–0xDFFF 之内的字符会因为无法编码成 UTF-8 进而导致显示错误。在 ES10 它会用转义字符的方式来处理这部分字符而非编码的方式，这样就会正常显示了。
//
上面就是小居数码小编今天给大家介绍的关于（es6到es11）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
CAD中快速修改线宽与字体大小方法（cad看图王怎么改字体大小）
adobepr和ae的区别（影视后期ae与pr的区别）
企业微信影响个人微信吗（企业微信与个人微信有啥区别）
ps选择性粘贴贴入怎么用（PS粘贴与选择性粘贴教程）
152750
Array.prototype.includes()includes() 方法用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回 false。
es6到es11Array.prototype.includes()
语法
valueToFind，需要查找的元素值。
fromIndex 可选 从fromIndex 索引处开始查找 valueToFind。如果为负值（即从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。
示例
注意点
使用 includes()查找字符串是区分大小写的。
使用 includes()只能判断简单类型的数据，对于复杂类型的数据，比如对象类型的数组，二维数组，这些是无法判断的.
能识别NaN，indexOf是不能识别NaN的
最后，如果只想知道某个值是否在数组中存在，而并不关心它的索引位置，建议使用includes(),如果想获取一个值在数组中的位置，那么使用indexOf方法。
幂运算符 **
比如我们想求2的10次方。
自己写函数实现
Math.pow()
幂运算符 **
基本求幂
注意
幂运算符的两个*号之间不能出现空格，否则语法会报错。
ES2017(ES8)Object.values()
Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。
Object.entries()
Object.entries() 方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值对数组。
Object.getOwnPropertyDescriptors()
Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符。
上面打印结果中的
value表示当前对象的默认值writable表示对象属性是否可以修改enumerable表示当前这个属性是否可以出现在对象的枚举属性中configurable表示当前对象的属性能否用delete删除
那这些对象的属性我们怎么设置和修改他们呢，我们可以使用es5的 Object.defineProperty()
接下来我们演示下，一些属性设置为false的情况
我们可以看到设置 writable: false和configurable: false,为false时，对象的name对象的值不能改变和不能被删除，打印出来还是原来的对象。
设置enumerable为false时
当设置enumerable: false时，表示对象的属性不可被枚举，这时打印对象为空，遍历对象的键也为空。
String.prototype.padStart
把指定字符串填充到字符串头部，返回新字符串。
语法
str.padStart(targetLength [, padString])
targetLength
当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
padString 可选
填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的默认值为 " "
示例
应用场景
日期格式化：yyyy-mm-dd的格式：
数字替换(手机号，银行卡号等）
String.prototype.padEnd
把指定字符串填充到字符串尾部，返回新字符串。
语法同上
示例
应用场景
在JS前端我们处理时间戳的时候单位是ms毫秒，但是，后端同学返回的时间戳则不一样是毫秒，可能只有10位，以s秒为单位。所以，我们在前端处理这个时间戳的时候，保险起见，要先做一个13位的补全，保证单位是毫秒。
尾逗号 Trailing commas
ES8 允许函数的最后一个参数有尾逗号（Trailing comma）。此前，函数定义和调用时，都不允许最后一个参数后面出现逗号。
上面代码中，如果在param2或bar后面加一个逗号，就会报错。
如果像上面这样，将参数写成多行（即每个参数占据一行），以后修改代码的时候，想为函数clownsEverywhere添加第三个参数，或者调整参数的次序，就势必要在原来最后一个参数后面添加一个逗号。这对于版本管理系统来说，就会显示添加逗号的那一行也发生了变动。这看上去有点冗余，因此新的语法允许定义和调用时，尾部直接可以加上一个逗号。
这样的规定也使得，函数参数与数组和对象的尾逗号规则，保持一致了。
async/await介绍
我们都知道使用 Promise 能很好地解决回调地狱的问题，但如果处理流程比较复杂的话，那么整段代码将充斥着 then，语义化不明显，代码不能很好地表示执行流程，那有没有比 Promise 更优雅的异步方式呢？那就是async/await！我们一起来揭开它神秘的面撒吧！
前面添加了async的函数在执行后都会自动返回一个Promise对象:
添加async后
async函数中使用await，那么await这里的代码就会变成同步的了，意思就是说只有等await后面的Promise执行完成得到结果才会继续下去，await就是等待。请看下面的示例：
使用场景
假如有这样一个使用场景：需要先请求 a 链接，等返回信息之后，再请求 b 链接的另外一个资源。下面代码展示的是使用 fetch 来实现这样的需求，fetch 被定义在 window 对象中，它返回的是一个 Promise 对象。
虽然上述代码可以实现这个需求，但语义化不明显，代码不能很好地表示执行流程。基于这个原因，ES8 引入了 async/await，这是 JavaScript 异步编程的一个重大改进，提供了在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力，并且使得代码逻辑更加清晰。
通过上面代码，你会发现整个异步处理的逻辑都是使用同步代码的方式来实现的，而且还支持 try catch 来捕获异常，这感觉就在写同步代码，所以是非常符合人的线性思维的。
注意点await 只能在 async 标记的函数内部使用，单独使用会触发 Syntax error。await后面需要跟异步操作，不然就没有意义，而且await后面的Promise对象不必写then，因为await的作用之一就是获取后面Promise对象成功状态传递出来的参数。async/await的缺陷
了解Async/await是非常有用的，但还有一些缺点需要考虑。
Async/await 让你的代码看起来是同步的，在某种程度上，也使得它的行为更加地同步。 await 关键字会阻塞其后的代码，直到promise完成，就像执行同步操作一样。它确实可以允许其他任务在此期间继续运行，但您自己的代码被阻塞。
这意味着您的代码可能会因为大量await的promises相继发生而变慢。每个await都会等待前一个完成，而你实际想要的是所有的这些promises同时开始处理（就像我们没有使用async/await时那样）。
有一种模式可以缓解这个问题——通过将 Promise 对象存储在变量中来同时开始它们，然后等待它们全部执行完毕。如果想更加深入的了解，请参考 MDN[1]
ES2018(ES9)Object Rest & Spread
在 ES9 新增 Object 的 Rest & Spread 方法，直接看下示例：
这块代码展示了 spread 语法，可以把 input 对象的数据都拓展到 output 对象，这个功能很实用。需要注意的是，如果存在相同的属性名，只有最后一个会生效。
注意点
如果属性的值是一个对象的话，该对象的引用会被拷贝，而不是生成一个新的对象。
我们再来看下 Object rest 的示例：
当对象 key-value 不确定的时候，把必选的 key 赋值给变量，用一个变量收敛其他可选的 key 数据，这在之前是做不到的。注意，rest 属性必须始终出现在对象的末尾，否则将抛出错误。
for await of
异步迭代器(for-await-of)：循环等待每个Promise对象变为resolved状态才进入下一步。
我们知道 for...of 是同步运行的，看如下代码
上面打印结果如下图
1640436987(1).png
上述代码证实了 for of 方法不能遍历异步迭代器，得到的结果并不是我们所期待的，于是 for await of 就粉墨登场啦！
ES9 中可以用 for...await...of 的语法来操作
for await of 环等待每个Promise对象变为resolved状态才进入下一步。所有打印的结果为 2000，1000，3000
Promise.prototype.finally()
Promise.prototype.finally() 方法返回一个Promise，在promise执行结束时，无论结果是fulfilled或者是rejected，在执行then()和catch()后，都会执行finally指定的回调函数。这为指定执行完promise后，无论结果是fulfilled还是rejected都需要执行的代码提供了一种方式，避免同样的语句需要在then()和catch()中各写一次的情况。
示例
使用场景
loading关闭
需要每次发送请求，都会有loading提示，请求发送完毕，就需要关闭loading提示框，不然界面就无法被点击。不管请求成功或是失败，这个loading都需要关闭掉，这时把关闭loading的代码写在finally里再合适不过了
String 扩展
放松对标签模板里字符串转义的限制, 遇到不合法的字符串转义会返回undefined，并且从raw上可获取原字符串。
下面是一个es6 的标签模板 如果对这个语法感到陌生，请参考 标签模板[2]
参数打印如下：
ES9开始，模板字符串允许嵌套支持常见转义序列，移除对ECMAScript在带标签的模版字符串中转义序列的语法限制。
1640441321(1).png
注意点
在模板字符串中，如果输入无效的unicode字符，还是会报错。只有在便签模板中 从es9开始才不会报错。
ES2019(ES10)Object.fromEntries()
方法 Object.fromEntries() 把键值对列表转换为一个对象，这个方法是和 Object.entries() 相对的。
案例1：Object 转换操作
案例2：Map 转 Object
案例3：过滤
course表示所有课程，想请求课程分数大于80的课程组成的对象：
案例4：url的search参数转换
Array.prototype.flat()语法
depth 可选
指定要提取嵌套数组的结构深度，默认值为 1。
示例
flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
Array.prototype.flatMap()
flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。从方法的名字上也可以看出来它包含两部分功能一个是 map，一个是 flat（深度为1）。
语法
callback
可以生成一个新数组中的元素的函数，可以传入三个参数：
currentValue
当前正在数组中处理的元素
index
可选 数组中正在处理的当前元素的索引。
array
可选 被调用的 map 数组
thisArg可选
执行 callback 函数时 使用的this 值。
示例
这个示例可以简单对比下 map 和 flatMap 的区别。当然还可以看下下面的示例：
flatMap 方法与 map 方法和深度depth为1的 flat 几乎相同.
String.prototype.trimStart()
trimStart() 方法从字符串的开头删除空格，trimLeft()是此方法的别名。
String.prototype.trimEnd()
trimEnd() 方法从一个字符串的右端移除空白字符，trimRight 是 trimEnd 的别名。
可选的Catch Binding
在 ES10 之前我们都是这样捕获异常的：
在这里 err 是必须的参数，在 ES10 可以省略这个参数：
应用
验证参数是否为json格式
这个需求我们只需要返回true或false，并不关心catch的参数。
Symbol.prototype.description
我们知道，Symbol 的描述只被存储在内部的 Description ，没有直接对外暴露，我们只有调用 Symbol 的 toString() 时才可以读取这个属性：
现在可以通过 description 方法获取 Symbol 的描述:
JSON.stringify() 增强能力
JSON.stringify 在 ES10 修复了对于一些超出范围的 Unicode 展示错误的问题。因为 JSON 都是被编码成 UTF-8，所以遇到 0xD800–0xDFFF 之内的字符会因为无法编码成 UTF-8 进而导致显示错误。在 ES10 它会用转义字符的方式来处理这部分字符而非编码的方式，这样就会正常显示了。
//
上面就是小居数码小编今天给大家介绍的关于（es6到es11）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
CAD中快速修改线宽与字体大小方法（cad看图王怎么改字体大小）
adobepr和ae的区别（影视后期ae与pr的区别）
企业微信影响个人微信吗（企业微信与个人微信有啥区别）
ps选择性粘贴贴入怎么用（PS粘贴与选择性粘贴教程）
152750
很赞哦！ ()
上一篇：手机信号差的原因及解决办法（手机显示网络不给力是什么原因）
下一篇：返回列表