盘ES6、ES7、ES8、ES9、ES10

ES6、ES7、ES8、ES9、ES10.png

看最近这么多人看这个，大致更新下，不太全，详细的自己可以去查

另外付一下自己大厂面试的简单记录，给需要小伙伴
大厂面试记录

ES6

ES6中的Map 和Object的区别

• 由于对象只接受字符串作为键名，所以element被自动转为字符串[object HTMLDivElement]

• ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
  也就是说，Object 结构提供了“字符串—值”的对应，
  Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。

image.png

最常遇到的就是箭头函数
面试的时候问的最多
箭头函数和this 指向

https://es6.ruanyifeng.com/
https://www.cnblogs.com/theblogs/p/10575845.html

ES6 兼容问题

ES7

ES7在ES6的基础上添加三项内容：求幂运算符（**）、Array.prototype.includes()方法、函数作用域中严格模式的变更。
幂运算：

 

3**2 // 9

includes:

 

[1, 2, 3].indexOf(3) > -1 // true
等同于：
[1, 2, 3].includes(3) // true

两者这都是通过===进行数据处理，但是对NaN数值的处理行为不同。includes对NaN的处理不会遵循严格模式去处理，所以返回true。indexOf会按照严格模式去处理，返回-1。

 

[1, 2, NaN].includes(NaN)     // true
[1, 2, NaN].indexOf(NaN)  // -1

如果仅仅查找数据是否在数组中，建议使用includes，如果是查找数据的索引位置，建议使用indexOf更好一些

ES8

async、await异步解决方案

在ES6中为了解决回调的书写方式，引入了Promise的then函数，业务逻辑很多的时候，需要链式多个then函数，语义会变得很不清楚。

 

new Promise((resolve, reject) => {this.login(resolve)})
.then(() => this.getInfo())
.then(() => {// do something})
.catch(() => { console.log("Error") })

ES8中把async和await变得更加方便，它其实就是Generator的语法糖。async/await是写异步代码的新方式，以前的方法有回调函数和Promise。相比于Promise，它更加简洁，并且处理错误、条件语句、获取中间值都更加方便。
ruanyifeng async

Object.entries():

该方法会将某个对象的可枚举属性与值按照二维数组的方式返回。（如果目标对象是数组，则会将数组的下标作为键值返回）

Object.values():

它的工作原理和Object.entries()方法很像，但是它只返回键值对中的值，结果是一维数组

 

Object.values({one: 1, two: 2})    // [1, 2]
Object.values({3: 'a', 1: 'b', 2: 'c'}) // ['b', 'c', 'a'] 
Object.extries([1, 3])     //[1, 3]

字符串填充padStart()、padEnd():

ES8提供了新的字符串填充方法，该方法可以使得字符串达到固定长度。它有两个参数，字符串目标长度和填充内容。

 

'react'.padStart(10, 'm')      //'mmmmmreact'
'react'.padEnd(10, 'm')       //' reactmmmmm'
'react'.padStart(3, 'm')    // "react"

ES10

Array的flat()方法和flatMap()

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

• flat()方法最基本的作用就是数组降维;
• 还可以利用flat()方法的特性来去除数组的空项

扁平化多维数组：

image.png

image.png

 

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]

//去除空项
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。 它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。 这里我们拿map方法与flatMap方法做一个比较

 

var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

String的trimStart()方法和trimEnd()方法
Object.fromEntries()
Symbol.prototype.description
String.prototype.matchAll
Function.prototype.toString()现在返回精确字符，包括空格和注释
简化try {} catch {},修改 catch 绑定
新的基本数据类型BigInt
globalThis
import()
Legacy RegEx
私有的实例方法和访问器

 

扫码体验