34个JS 6-12新特性，面试必看！！！！！本人在面试时经常会被问到前端JS中的系新特性，如果了解的比较多，不仅会提升

本人在面试时经常会被问到前端JS中的系新特性，如果了解的比较多，不仅会提升面试成功率，而且会让面试管认为您是一位追求前沿技术的前端开发人员，下面就是ES6-12重要的新特性。

ES6

1. let 和 const

与var的区别：

Var 有变量提升，有初始化提升，值可变

Let 有变量提升，没有初始化提升，值可变

Const 有变量提升，没有初始化提升，值不可变，但如果是定义对象，则属性可变

2. 默认参数

const getName(x = 1,y = 2){
    console.log("x："+x ,"y："+ y);
}

3. 扩展运算符 ...

const numbers = [1,2,3,4,5]
console.log(...numbers);

4. 剩余参数

一个函数，传入参数的个数是不确定的，就可使用剩余参数 fn(name,...params)

5. 模板字符串 ``

①.无变量模式，``可以当作普通字符串来使用

let hello = `hell0`
console.log(hello); // hello

②.需要变量拼接情况

let hello = `hello`
console.log(`${hello} world`); // hello world

③.我们可以在vue 中使用模板字符串实现变量与字符串的拼接

<li :class="`${newsData.class}-more`">
 <a style="color:#ffffff;" target=" Blank":href="newsData.router">更多>></a>
</li>

6. Object.keys

可以用来获取对象的key的集合，进而可以获得对应key的value

7. 箭头函数 fn = () => {}

普通函数和箭头函数的区别：

箭头函数不可作为构造函数，不能使用new

箭头函数没有自己的this

箭头函数没有arguments对象

箭头函数没有原型对象

8. Array.prototype.forEach 数组遍历方法

9. Array.prototype.map 常用于返回一个处理过后的新数组

10. Array.prototype.filter 用来过滤的方法

11. Array.prototype.some 只要有一个为真，返回真

12. Array.prototype.every 所有为真才返回真

13. Array.prototype.reduce

第一个参数callback函数：pre为上次return的值，next为数组的本次遍历的项

第二个参数为初始值，也是第一个pre

14. 对象属性同名简写

15. Promise 异步处理方式三种状态 pending resolve reject 状态一旦改变就无法更改

All方法：

接收一个promise数组，数组中如有非promise项，则此项当作成功

如果所有promise都成功，则返回成功结果数组

如果有一个promise失败，则返回这个失败结果

Race方法：

接收一个promise数组，数组中如有非promise，则此项当作成功

哪个promise最快得到结果，就返回那个结果，无论成功失败

16. class 使用构造函数对象可以使用extend 继承

17. 解构赋值：可以提取出对象中某个属性，也可以对数组进行解构

18. Find和findIndex

Find：找到返回被找元素，找不到返回undefined

findIndex：找到返回被找元素索引，找不到返回-1

19. for of 和 for in

For in:遍历方法，可遍历对象和数组

For of:遍历方法，只能遍历数组，不能遍历非iterable对象

20. set和map

Set：不重复

Map：（key，value） key的类型不受限制

ES7

21. includes：传入元素，如果数组中能找出此元素，则返回true，否则返回false

和index很像，但还是有区别的

const arr =[1,2,NaN]
console.log(arr.index0f(NaN))//-1 indexOf找不到NaN
NaNconsole.log(arr.includes(NaN))//true includes能找到NaN

22. 求幂运算符 Math.pow **

ES8

1. Object.values 获取对象的value对象

2. Object.entries 获取对象的键值对集合

3. Async/await 以同步方式执行异步操作

await只能在async函数里使用

await 后面最好接promise，如果后面接的是普通函数则会直接执行

Async 函数返回一个promise

ES9

23. For await of

function fn(time){
return new Promise((resolve, reject)=>{setTimeout(()=>{
resolve(`${time}毫秒后我成功啦!!!`)
}, time)
async function asyncFn(){const arr =[fn(3000)，fn(1080)，fn(1000)，fn(2000)，fn(500)]for await(let x of arr){
console.log(x)
asyncFn()
3000毫秒后我成功啦!!!
1008毫秒后我成功啦!!!
1008毫秒后我成功啦!!!
2008毫秒后我成功啦!!
500毫秒后我成功啦:!!

24. Promise.finally 新增Promise方法，无论失败或者成功状态，都会执行这个函数

ES10

25. Array.flat 将多维数组降为少维数组

26. Array.flatMap 相当于 flat + map

27. BigInt 是ES10之前，js所能表示最大的数字

28. Object.fromEntries

Object.entries把对象转成键值对数组Object.fromEntries则相反，是把键值对数组转为对象

29. String.trimStart 和 String.trimEnd

用来单独去除字符串的首和尾的空格

ES11

30. Promise.allSettled

接收一个promise数组，数组中如有非promise项，则此项当作成功

把每一个promise的结果集成数组，返回

31. ?. ??

?. 可选链

?? 空位合并运算符，使用 || 运算符，只要左边是undefined和null，就会返回右边的数据

consta=0||'林三心’ // 林三心
const b='·||'林三心'// 林三心
const c= false ||'林三心’// 林三心
const d= undefined ||'林三心’// 林三心
const e= null ||'林三心’// 林三心

而 ?? 和||最大的区别是，在 ??这，只有 undefined和nu11 才算假值

const a=0??'林三心’//0
const b='"??"林三心'//2
constc=false ??'林三心'// false
const d = undefined ??'林三心’// 林三心
conste= nu1l ??"林三心’// 林三心

ES12

32. Promise.any

接收一个Promsie数组，数组中如有非Promise项，则此项当作成功

如果有一个Promise成功，则返回这个成功结果

如果所有Promise失败，则报错

33. 数字分隔符 _

数字分隔符可以让你在定义长数字时，更加地一目了然

const num= 1000000000
// 使用数字外隔符
const num=1 000_000 000

34.||= 和 &&=

或等于(Il=)a||= b 等同于 a ||(a = b);
且等于(&&=)a &&=b 等同于 a &&(a= b);

完结，撒花，希望对一些刚入职的同学们有帮助，后续会继续更新，我们共同加油！！！！

34个JS 6-12新特性，面试必看！！！！！

ES6