前端面试刷题

# es6及es6+能力集最常用哪些？

ES6 的特性是使用最多的，包括类、模块化、箭头函数、函数参数默认值、模板字符串、解构赋值、延展操作符、Promise、let、const等，这些都是最基础的开发必备。

另外还有：

  • ES7 的 Array.prototype.includes()
  • ES8 的 async/await 、String padding、padStart()、padEnd() 、 Object.values()
  • ES9 的 Rest/Spread 属性、for await of、 Promise.finally()
  • ES10 的 Array.prototype.flat() 、 Array.prototype.flatMap() 、String的 trimStart() trimEnd()
  • ES11 的 Promise.allSettled 、空值处理及可选链
  • ES12 的逻辑赋值操作符、数字分隔符、 Promise.any()等

（1）ES6

  • 类
  • 模块化
  • 箭头函数
  • 函数参数默认值
  • 模板字符串
  • 解构赋值
  • 扩展操作符
  • 对象属性简写
  • Promise
  • let 与 const
  • ……

（2）ES7

  • Array.prototype.includes()
  • 指数操作符 2**5 // 32

（3）ES8

  • async/await
  • Object.values() // Object.values({a: 1, b: 2, c: 3}) // [1, 2, 3]
  • Object.entries() // Object.values({a: 1, b: 2, c: 3}) // [["a", 1], ["b", 2], ["c", 3]]
  • String padding: padStart()和padEnd()，填充字符串达到当前长度 // 'sister'.padStart(7, '0');'sister'.padEnd(7, '0')
  • Object.getOwnPropertyDescriptors()
  • 函数参数列表结尾允许逗号
  • SharedArrayBuffer对象
  • Atomics对象

（4）ES9

  • 异步迭代（for await of）
// await 可以和 for…of 循环一起使用，以串行的方式运行异步操作
async function getInfos(arr) {
  for await (let i of arr) {
    getData(i)
  }
}
  • Promise.finally()
// 无论 Promise 运行成功还是失败，都会运行 finally
function getInfos() {
  getData1()
  .then(getData2)
  .catch(err => {
    console.log(err);
  })
  .finally(() => {
    // ...
  });
}
  • Rest/Spread 属性
const values = [1, 2, 3]
console.log( Math.min(...values) ) // 1
  • 新的正则表达式特性
    • 正则表达式反向断言（lookbehind）
    • 正则表达式dotAll模式
    • 正则表达式命名捕获组（Regular Expression Named Capture Groups）
    • 正则表达式 Unicode 转义
    • 非转义序列的模板字符串

（5）ES10

  • 新增了Array的 flat() 方法和 flatMap() 方法
[1, 2, [3, 4]].flat(Infinity); // [1, 2, 3, 4]
[1, 2, 3, 4].flatMap(a => [a**2]); // [1, 4, 9, 16]
  • 新增了String的 trimStart() 方法和 trimEnd() 方法
  • Object.fromEntries()，是 Object.entries() 的反转
  • Symbol.prototype.description()
  • Function.prototype.toString() 现在返回精确字符，包括空格和注释
  • 简化 try {} catch {} ，修改 catch 绑定

（6）ES11

  • Promise.allSettled()
// 与 Promise.all 不同的是，它会返回所有的 promise 结果
const promise1 = Promise.resolve('hello')
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 200, 'problem'))

Promise.allSettled([promise1, promise2])
  .then((values) => {
    console.log(values)
  })

// [
//   { status: 'fulfilled', value: 'hello' },
//   { status: 'rejected', reason: 'problem' }
// ]
  • 可选链（Optional chaining）
const name = user?.info?.name;
const age = user?.info?.getAge?.();
  • 空值合并运算符（Nullish coalescing Operator）
const level = user.level ?? '暂无等级'; // 等价于 var level =  user.data.level || '暂无等级';
  • import() 按需加载
  • globalThis 目的就是提供一种标准化方式访问全局对象，有了 globalThis 后，你可以在任意上下文，任意时刻都能获取到全局对象
  • BigInt 内置对象
  • String.prototype.matchAll 返回一个包含所有匹配正则表达式及分组捕获结果的迭代器

（7）ES12

  • String.prototype.replaceAll()
  • Promise.any() 只要其中的一个 promise 成功就返回那个已经成功的 promise，如果可迭代对象中没有一个 promise 成功就返回一个失败的 promise
  • WeakRef 使用WeakRefs的Class类创建对对象的弱引用(对对象的弱引用是指当该对象应该被GC回收时不会阻止GC的回收行为)
  • 逻辑赋值操作符（Logical Assignment Operators）
  • 数字分隔符（Numeric separators） // const money = 1_000_000_000 // 1000000000

← typeof和instanceof →