es7与es10（es6到es11）

Array.prototype.includes()includes() 方法用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回 false。

es6到es11

Array.prototype.includes()

语法

arr.includes(valueToFind[, fromIndex])

valueToFind，需要查找的元素值。

fromIndex 可选 从fromIndex 索引处开始查找 valueToFind。如果为负值（即从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。

示例

const arr = ['es6', 'es7', 'es8']console.log(arr.includes('es7')) // trueconsole.log(arr.includes('es7', 1)) // trueconsole.log(arr.includes('es7', 2)) // falseconsole.log(arr.includes("es7", -1)); // fsleconsole.log(arr.includes("es7", -2)); // true

注意点

使用 includes()查找字符串是区分大小写的。

const arr = ["es6", "es7", "es8", "a"];console.log(arr.includes("A")); // false

使用 includes()只能判断简单类型的数据，对于复杂类型的数据，比如对象类型的数组，二维数组，这些是无法判断的.

const arr = ['es6', ['es7', 'es8'], 'es9',{name:"jimmy"}]console.log(arr.includes(["es7", "es8"])); // falseconsole.log(arr.includes({name:"jimmy"})); // false

能识别NaN，indexOf是不能识别NaN的

const arr = ['es6', 'es7', NaN, 'es8']console.log(arr.includes(NaN)) // trueconsole.log(arr.indexOf(NaN)) // -1

最后，如果只想知道某个值是否在数组中存在，而并不关心它的索引位置，建议使用includes(),如果想获取一个值在数组中的位置，那么使用indexOf方法。

幂运算符 **

比如我们想求2的10次方。

自己写函数实现

function pow(x, y) {    let result = 1    for (let i = 0; i < y; i++) {        result *= x    }    return result}console.log(pow(2, 10)) // 1024

Math.pow()

console.log(Math.pow(2, 10)); // 1024

幂运算符 **

console.log(2 ** 10); // 1024

基本求幂

2 ** 3   // 83 ** 2   // 93 ** 2.5 // 15.58845726811989610 ** -1 // 0.1NaN ** 2 // NaN

注意

幂运算符的两个*号之间不能出现空格，否则语法会报错。

ES2017(ES8)

Object.values()

Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。

const obj = {  name: "jimmy",  age: 18,  height: 188,};console.log(Object.values(obj)); // [ 'jimmy', 18, 188 ]

Object.entries()

Object.entries() 方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值对数组。

const obj = {  name: "jimmy",  age: 18,  height: 188,};console.log(Object.entries(obj)); // [ [ 'name', 'jimmy' ], [ 'age', 18 ], [ 'height', 188 ] ]console.log(Object.entries([1, 2, 3])); // [ [ '0', 1 ], [ '1', 2 ], [ '2', 3 ] ]

Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符。

const obj = {  name: "jimmy",  age: 18,};const desc = Object.getOwnPropertyDescriptors(obj);console.log(desc);  // 打印结果{  name: {    value: 'jimmy',    writable: true,    enumerable: true,    configurable: true  },  age: {    value: 18,    writable: true,   enumerable: true,    configurable: true   }}

上面打印结果中的

那这些对象的属性我们怎么设置和修改他们呢，我们可以使用es5的 Object.defineProperty()

const obj = {};Object.defineProperty(obj, "name", {  value: "jimmy",  writable: true,  configurable: true,  enumerable: true,});Object.defineProperty(obj, "age", {  value: 34,  writable: true,  configurable: true,  enumerable: true,});console.log(obj); // { name: 'jimmy', age: 34 }

接下来我们演示下，一些属性设置为false的情况

const obj = {};Object.defineProperty(obj, "name", {  value: "jimmy",  writable: false,  configurable: false,  enumerable: true,});console.log(obj); // { name: 'jimmy' }obj.name = "chimmy";console.log(obj); // { name: 'jimmy' }delete obj.nameconsole.log(obj); // { name: 'jimmy' }

我们可以看到设置 writable: false和configurable: false,为false时，对象的name对象的值不能改变和不能被删除，打印出来还是原来的对象。

设置enumerable为false时

const obj = {};Object.defineProperty(obj, "name", {  value: "jimmy",  writable: true,  configurable: true,  enumerable: false,});console.log(obj); // { }for (let key in obj) {  console.log(key); // ""}

当设置enumerable: false时，表示对象的属性不可被枚举，这时打印对象为空，遍历对象的键也为空。

String.prototype.padStart

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

语法

str.padStart(targetLength [, padString])

当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。

填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的默认值为 " "

示例

'abc'.padStart(10);         // "       abc"'abc'.padStart(10, "foo");  // "foofoofabc"'abc'.padStart(6,"123465"); // "123abc"'abc'.padStart(8, "0");     // "00000abc"'abc'.padStart(1);          // "abc"

应用场景

日期格式化：yyyy-mm-dd的格式：

const now = new Date()const year = now.getFullYear()// 月份和日期 如果是一位前面给它填充一个0const month = (now.getMonth() + 1).toString().padStart(2, '0')const day = (now.getDate()).toString().padStart(2, '0')console.log(year, month, day)console.log( `${year}-${month}-${day}` ) //输入今天的日期 2021-12-31

数字替换(手机号，银行卡号等）

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

String.prototype.padEnd

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

语法同上

示例

'abc'.padEnd(10);          // "abc       "'abc'.padEnd(10, "foo");   // "abcfoofoof"'abc'.padEnd(6, "123456"); // "abc123"'abc'.padEnd(1);           // "abc"

应用场景

在JS前端我们处理时间戳的时候单位是ms毫秒，但是，后端同学返回的时间戳则不一样是毫秒，可能只有10位，以s秒为单位。所以，我们在前端处理这个时间戳的时候，保险起见，要先做一个13位的补全，保证单位是毫秒。

// 伪代码console.log(new Date().getTime()) // 时间戳 13位的timestamp = +String(timestamp).padEnd(13, '0')

尾逗号 Trailing commas

ES8 允许函数的最后一个参数有尾逗号（Trailing comma）。此前，函数定义和调用时，都不允许最后一个参数后面出现逗号。

function clownsEverywhere(    param1,    param2) {    /* ... */}clownsEverywhere(    'foo',    'bar')

上面代码中，如果在param2或bar后面加一个逗号，就会报错。

如果像上面这样，将参数写成多行（即每个参数占据一行），以后修改代码的时候，想为函数clownsEverywhere添加第三个参数，或者调整参数的次序，就势必要在原来最后一个参数后面添加一个逗号。这对于版本管理系统来说，就会显示添加逗号的那一行也发生了变动。这看上去有点冗余，因此新的语法允许定义和调用时，尾部直接可以加上一个逗号。

function clownsEverywhere(    param1,    param2,) {    /* ... */}clownsEverywhere(    'foo',    'bar',)

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

async/await

介绍

我们都知道使用 Promise 能很好地解决回调地狱的问题，但如果处理流程比较复杂的话，那么整段代码将充斥着 then，语义化不明显，代码不能很好地表示执行流程，那有没有比 Promise 更优雅的异步方式呢？那就是async/await！我们一起来揭开它神秘的面撒吧！

前面添加了async的函数在执行后都会自动返回一个Promise对象:

function foo() {    return 'jimmy'}console.log(foo()) // 'jimmy'

添加async后

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

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

function timeout() {    return new Promise(resolve => {        setTimeout(() => {            console.log(1)            resolve()        }, 1000)    })}// 不加async和await是2、1   加了是1、2async function foo() {    await timeout()     console.log(2)}foo()

使用场景

假如有这样一个使用场景：需要先请求 a 链接，等返回信息之后，再请求 b 链接的另外一个资源。下面代码展示的是使用 fetch 来实现这样的需求，fetch 被定义在 window 对象中，它返回的是一个 Promise 对象。

fetch('https://blog.csdn.net/')  .then(response => {    console.log(response)    return fetch('https://juejin.im/')  })  .then(response => {    console.log(response)  })  .catch(error => {    console.log(error)  })

虽然上述代码可以实现这个需求，但语义化不明显，代码不能很好地表示执行流程。基于这个原因，ES8 引入了 async/await，这是 JavaScript 异步编程的一个重大改进，提供了在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力，并且使得代码逻辑更加清晰。

async function foo () {  try {    let response1 = await fetch('https://blog.csdn.net/')    console.log(response1)    let response2 = await fetch('https://juejin.im/')    console.log(response2)  } catch (err) {    console.error(err)  }}foo()

通过上面代码，你会发现整个异步处理的逻辑都是使用同步代码的方式来实现的，而且还支持 try catch 来捕获异常，这感觉就在写同步代码，所以是非常符合人的线性思维的。

注意点

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 方法，直接看下示例：

const input = {  a: 1,  b: 2,  c: 3,}const output = {  ...input,  c: 4}console.log(output) // {a: 1, b: 2, c: 4}

这块代码展示了 spread 语法，可以把 input 对象的数据都拓展到 output 对象，这个功能很实用。需要注意的是，如果存在相同的属性名，只有最后一个会生效。

注意点

const obj = { x: { y: 10 } };const copy1 = { ...obj };const copy2 = { ...obj };obj.x.y = "jimmy";console.log(copy1, copy2); // x: {y: "jimmy"} x: {y: "jimmy"}console.log(copy1.x === copy2.x); // → true

如果属性的值是一个对象的话，该对象的引用会被拷贝，而不是生成一个新的对象。

我们再来看下 Object rest 的示例：

const input = {  a: 1,  b: 2,  c: 3}let { a, ...rest } = inputconsole.log(a, rest) // 1 {b: 2, c: 3}

当对象 key-value 不确定的时候，把必选的 key 赋值给变量，用一个变量收敛其他可选的 key 数据，这在之前是做不到的。注意，rest 属性必须始终出现在对象的末尾，否则将抛出错误。

for await of

异步迭代器(for-await-of)：循环等待每个Promise对象变为resolved状态才进入下一步。

我们知道 for...of 是同步运行的，看如下代码

function TimeOut(time){    return new Promise(function(resolve, reject) {        setTimeout(function() {            resolve(time)        }, time)    })}async function test() {    let arr = [TimeOut(2000), TimeOut(1000), TimeOut(3000)]    for (let item of arr) {       console.log(Date.now(),item.then(console.log))    }}test()

上面打印结果如下图

1640436987(1).png

上述代码证实了 for of 方法不能遍历异步迭代器，得到的结果并不是我们所期待的，于是 for await of 就粉墨登场啦！

ES9 中可以用 for...await...of 的语法来操作

function TimeOut(time) {    return new Promise(function(resolve, reject) {        setTimeout(function() {            resolve(time)        }, time)    })}async function test() {    let arr = [TimeOut(2000), TimeOut(1000), TimeOut(3000)]    for await (let item of arr) {        console.log(Date.now(), item)    }}test()// 1560092345730 2000// 1560092345730 1000// 1560092346336 3000

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()中各写一次的情况。

示例

new Promise((resolve, reject) => {    setTimeout(() => {        resolve('success')        // reject('fail')    }, 1000)}).then(res => {    console.log(res)}).catch(err => {    console.log(err)}).finally(() => {    console.log('finally')})

使用场景

loading关闭

需要每次发送请求，都会有loading提示，请求发送完毕，就需要关闭loading提示框，不然界面就无法被点击。不管请求成功或是失败，这个loading都需要关闭掉，这时把关闭loading的代码写在finally里再合适不过了

String 扩展

放松对标签模板里字符串转义的限制, 遇到不合法的字符串转义会返回undefined，并且从raw上可获取原字符串。

下面是一个es6 的标签模板 如果对这个语法感到陌生，请参考 标签模板[2]

const foo = (a, b, c) => {    console.log(a)    console.log(b)    console.log(c)}const name = 'jimmy'const age = 18foo `这是${name},他的年龄是${age}岁`

参数打印如下：

ES9开始，模板字符串允许嵌套支持常见转义序列，移除对ECMAScript在带标签的模版字符串中转义序列的语法限制。

function foo(a, b, c) {    console.log(a, b, c)}// 在标签函数中使用 // unicode字符u{61} 对应的值为 a// unicode字符u{62} 对应的值为 b// unicode 是一个无效的unicode字符foo `u{61} and u{62}` foo `u{61} and unicode`

1640441321(1).png

注意点

在模板字符串中，如果输入无效的unicode字符，还是会报错。只有在便签模板中 从es9开始才不会报错。

 let string = `u{61} and unicode`; console.log(string); // Uncaught SyntaxError: Invalid Unicode escape sequence

ES2019(ES10)

Object.fromEntries()

方法 Object.fromEntries() 把键值对列表转换为一个对象，这个方法是和 Object.entries() 相对的。

Object.fromEntries([    ['foo', 1],    ['bar', 2]])// {foo: 1, bar: 2}

案例1：Object 转换操作

const obj = {    name: 'jimmy',    age: 18}const entries = Object.entries(obj)console.log(entries)// [Array(2), Array(2)]// ES10const fromEntries = Object.fromEntries(entries)console.log(fromEntries)// {name: "jimmy", age: 18}

案例2：Map 转 Object

const map = new Map()map.set('name', 'jimmy')map.set('age', 18)console.log(map) // {'name' => 'jimmy', 'age' => 18}const obj = Object.fromEntries(map)console.log(obj)// {name: "jimmy", age: 18}

案例3：过滤

course表示所有课程，想请求课程分数大于80的课程组成的对象：

const course = {    math: 80,    english: 85,    chinese: 90}const res = Object.entries(course).filter(([key, val]) => val > 80)console.log(res) // [ [ 'english', 85 ], [ 'chinese', 90 ] ]console.log(Object.fromEntries(res)) // { english: 85, chinese: 90 }

案例4：url的search参数转换

// let url = "https://?name=jimmy&age=18&height=1.88"// queryString 为 window.location.searchconst queryString = "?name=jimmy&age=18&height=1.88";const queryParams = new URLSearchParams(queryString);const paramObj = Object.fromEntries(queryParams);console.log(paramObj); // { name: 'jimmy', age: '18', height: '1.88' }

Array.prototype.flat()

语法

let newArray = arr.flat([depth])

指定要提取嵌套数组的结构深度，默认值为 1。

示例

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

const arr1 = [0, 1, 2, [3, 4]];console.log(arr1.flat());  //  [0, 1, 2, 3, 4]const arr2 = [0, 1, 2, [[[3, 4]]]];console.log(arr2.flat(2));  //  [0, 1, 2, [3, 4]]//使用 Infinity，可展开任意深度的嵌套数组var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]// `flat()` 方法会移除数组中的空项:var arr5 = [1, 2, , 4, 5];arr5.flat(); // [1, 2, 4, 5]

Array.prototype.flatMap()

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。从方法的名字上也可以看出来它包含两部分功能一个是 map，一个是 flat（深度为1）。

语法

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {    // 返回新数组的元素}[, thisArg])

可以生成一个新数组中的元素的函数，可以传入三个参数：

currentValue

当前正在数组中处理的元素

index

可选 数组中正在处理的当前元素的索引。

array

可选 被调用的 map 数组

执行 callback 函数时 使用的this 值。

示例

const numbers = [1, 2, 3]numbers.map(x => [x * 2]) // [[2], [4], [6]]numbers.flatMap(x => [x * 2]) // [2, 4, 6]

这个示例可以简单对比下 map 和 flatMap 的区别。当然还可以看下下面的示例：

let arr = ['今天天气不错', '', '早上好']arr.map(s => s.split(''))// [["今", "天", "天", "气", "不", "错"],[""],["早", "上", "好"]]arr.flatMap(s => s.split(''))// ["今", "天", "天", "气", "不", "错", "", "早", "上", "好"]

flatMap 方法与 map 方法和深度depth为1的 flat 几乎相同.

String.prototype.trimStart()

trimStart() 方法从字符串的开头删除空格，trimLeft()是此方法的别名。

let str = '   foo  'console.log(str.length) // 8str = str.trimStart() // 或str.trimLeft()console.log(str.length) // 5

String.prototype.trimEnd()

trimEnd() 方法从一个字符串的右端移除空白字符，trimRight 是 trimEnd 的别名。

let str = '   foo  'console.log(str.length) // 8str = str.trimEnd() // 或str.trimRight()console.log(str.length) // 6

可选的Catch Binding

在 ES10 之前我们都是这样捕获异常的：

try {    // tryCode} catch (err) {    // catchCode}

在这里 err 是必须的参数，在 ES10 可以省略这个参数：

try {    console.log('Foobar')} catch {    console.error('Bar')}

应用

验证参数是否为json格式

这个需求我们只需要返回true或false，并不关心catch的参数。

const validJSON = json => {    try {        JSON.parse(json)        return true    } catch {        return false    }}

Symbol.prototype.description

我们知道，Symbol 的描述只被存储在内部的 Description ，没有直接对外暴露，我们只有调用 Symbol 的 toString() 时才可以读取这个属性：

const name = Symbol('es')console.log(name.toString()) // Symbol(es)console.log(name) // Symbol(es)console.log(name === 'Symbol(es)') // falseconsole.log(name.toString() === 'Symbol(es)') // true

现在可以通过 description 方法获取 Symbol 的描述:

const name = Symbol('es')console.log(name.description) // esname.description = "es2" // 只读属性 并不能修改描述符console.log(name.description === 'es') // true// 如果没有描述符 输入undefinedconst s2 = Symbol()console.log(s2.description) // undefined

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粘贴与选择性粘贴教程）

        
	
（347）个朋友认为回复得到帮助。