ES6~ES12面试题,背就完事了!

1. ES6

新增symbol类型 表示独一无二的值,用来定义独一无二的对象属性名;
const/let  都是用来声明变量,不可重复声明,具有块级作用域。存在暂时性死区,也就是不存在变量提升。(const一般用于声明常量);
变量的解构赋值(包含数组、对象、字符串、数字及布尔值,函数参数),剩余运算符(...rest);
模板字符串(${data});
扩展运算符(数组、对象);;
箭头函数;
Set和Map数据结构;
Proxy/Reflect;
Promise;
async函数;
Class;
Module语法(import/export)

2. 声明

let & const
letconstvar 之间的区别:

var 声明的变量存在变量提升,而 letconst 不存在变量提升的问题。变量提升:变量是否可在声明前调用
var 不存在块级作用域,letconst 存在块级作用域
var 可以重复声明变量,letconst 在一个作用域内不允许重复声明,并且 const 声明的是一个 只读 的变量,并且一定要赋值

另外,当const声明了一个对象,对象能的属性可以改变,因为:const声明的obj只保存着其对象的引用地址,只要地址不变,便不会出错

3. 解构赋值

数组的解构(按次序排列)
可以从数组中提取值,按照对应位置,对变量赋值,这种写法属于模式匹配
可以使用 ...进行解构,代表剩余全部
如果原数组没有,则在对应值上可设置默认值,如果不设置,则为undefined

对象的结构(无次序行,只需变量与属性名同名即可)
如果变量和对象的属性名没有重复,则会导致变量的值为undefined
注意:,他相当于别名

对字符串的解构
字符串也可以进行解构,它相当于转化为类似数组的对象
自带一个 length 属性,代表个数

对数字和布尔值的解构
解构的只要不死对象或数组,都会先将其转化为对象,所以数字类型和布尔类型也换转化为对象

对函数参数的解构
函数的参数可以进行解构,也可以带有默认值
undefined 可以触发默认值
注意两种指定默认值的方法,一种是对变量指定,一种是对参数指定,会得到不同的答案

4. 字符串扩展

Unicode: 大括号包含表示Unicode字符
codePointAt(): 返回字符对应码点,与fromCharCode()对应
String.fromCharCode(): 将对对应的码点返回为字符,与codePointAt()对应
String.raw():返回把字符串所有变量替换且对斜杠进行转义的结果
startsWith(): 返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
repeat():方法返回一个新字符串,表示将原字符串重复n次
遍历:for-of
includes():返回布尔值,表示是否找到了参数字符串。
trimStart()方法从字符串的开头删除空格。trimLeft() 是此方法的别名。
trimEnd()方法从一个字符串的末端移除空白字符。trimRight() 是这个方法的别名。

5. 字符串模板

 可单行可多行插入,使用 `${}`

6. 数组扩展

Array.of(): 将一组值转化为数组,返回一个新数组,并且不考虑参数的数量或类型。
copyWithin():把指定位置的成员复制到其他位置,返回原数组
find(): 返回第一个符合条件的值
findIndex(): 返回第一个符合条件的索引
keys():对键名的遍历,返回一个遍历器对象,可用for-of循环,
values():与 keys() 用法一样,不过是对 键值 的遍历
entries():与 keys() 用法一样,不过是对 键值对 的遍历
Array.from(): 从一个类似数组或可迭代对象中创建一个新的数组实例。
fill(): 使用制定的元素填充数组,返回原数组
includes():判断是否包含某一元素,返回布尔值,对 NaN 也有效,但不能进行定位

7. 扩展运算符:…

ES9中增加了许多额外的功能,如合并、转义字符串等操作
Rest参数(扩展运算符 ...)

8. 对象扩展

Object.getPrototypeOf():返回对象的原型对象
Object.setPrototypeOf():设置对象的原型对象
proto:返回或设置对象的原型对象
Object.getOwnPropertyNames(): 返回对象自身非Symbol属性键组成的数组
Object.getOwnPropertySymbols(): 返回对象自身非Symbol属性键组成的数组
Reflect.ownKeys(): 返回对象自身全部属性键组成的数组
Object.is():判断两个对象是否相等,数组指向的地址不同,所以只要是数组比较,必定为 false
遍历:for-in
Object.keys():返回属性名
Object.assign(): 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,返回目标对象,此时的目标对象也会改变

9. 箭头函数与普通函数的区别

箭头函数和普通函数的样式不同,箭头函数语法更加简洁、清晰,箭头函数是 =>定义函数,普通函数是 function定义函数。
箭头函数其实是没有 this 的,箭头函数中的 this 只取决包裹箭头函数的第一个普通函数的 this。
箭头函数没有自己的arguments。在箭头函数中访问arguments实际上获得的是外层局部(函数)执行环境中的值。
call、apply、bind 并不会影响其 this 的指向。
箭头函数的this指向上下文 ,而 普通函数的this并非指向上下文,需要时加入 bind(this)

10. Set

Set 是ES6中新的数据结构,是类似数组,但成员的值是唯一的,没有重复的值
声明:const set = new Set()

属性:
size:返回 Set 对象中值的个数

方法:
add(): 在Set对象尾部添加一个元素。返回该Set对象
delete(): 移除Set的中与这个值相等的元素,有则返回true,无则返回false
clear(): 清楚Set的所有元素
has(): 是否存在这个值,如果存在为 true,否则为false
keys():以属性值遍历器的对象
values():以属性值遍历器的对象
entries():以属性值和属性值遍历器的对象
forEach():遍历每个元素

特别注意:
遍历器的为iterator对象,按插入顺序,为 [Key, Value] 形式
加入 Set 的值不会发生类型转化,所以1和”1“是两个不同的值
在Set内部是通过 === 来判断,也就是说,两个对象永远不可能相同,原因是地址不同
唯一的区别是 NaN

应用:
数组去重
	需要注意一点的是 new Set 无法去除对象
	console.log([...new Set(arr)]) 
 	//或 
 	console.log(Array.from(new Set(arr)))
可求并集,交集和差集
 let a = new Set([1, 2, 3])
 let b = new Set([2, 3, 4])
 
 //并集
 console.log(new Set([...a, ...b])) // Set(4) {1, 2, 3, 4}
 
 //交集
 console.log(new Set([...a].filter(v => b.has(v)))) // Set(2) {2, 3}
 
 //差集
 new Set([...a].filter(v => !b.has(v))) //  Set(1) {1}

11. Map

Map 是ES6中新的数据结构,是类似对象,成员键是任何类型的值
声明:const map = new Map()

属性:
constructor: 构造函数,返回Map
size:返回 Map 实例中值的个数

方法:
set(): 添加Map后的一个键值对,返回实例
get(): 返回键值对
delete(): 移除Map的中与这个值相等的元素,有则返回true,无则返回false
clear(): 清楚Map的所有元素
has(): 是否存在这个值,如果存在为 true,否则为false
keys():以属性键遍历器的对象
values():以属性值遍历器的对象
entries():以属性键和属性值遍历器的对象
forEach():遍历每个元素

特别注意
对同一个对象的引用,被视为一个键
相同的键,会进行覆盖

12. Symbol(原始类型)

Symbol 是ES6中引入的原始数据类型,代表着独一无二的
声明:const sy = Stmbol()
参数: string(可选)
方法:

Symbol.for():  创建以参数作为描述的Symbol值,如存在此参数则返回原有的Symbol值(先搜索后创建,登记在全局环境)
Symbol.keyFor():返回已登记的Symbol值的描述(只能返回Symbol.for()的key)
Object.getOwnPropertySymbols() :返回对象中所有用作属性名的Symbol值的数组

13. Proxy

Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程
可以这样理解,Proxy就是在目标对象之前设置的一层拦截,外界想要访问都要经过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。
Proxy 在这里可以理解为代理器
声明: const proxy = new Proxy(target, handler)

target: 拦截的对象
handler: 定义拦截的方法

方法:
get(): 拦截对象属性的读取
set(): 拦截对象设置属性,返回一个布尔值
has(): 拦截 propKey in proxy 的操作,返回一个布尔值
ownKeys(): 拦截对象属性遍历,返回一个数组
deleteProperty():拦截 delete proxy[propKey] 的操作,返回一个布尔值()
apply():拦截函数的调用,call 和 apply 操作
construct():拦截 new 命令,返回一个对象: 拦截 new 命令,返回一个对象

14. Class

Class: 对一类具有共同特征的事物的抽象(构造函数语法糖)
	constructor() 基本定义和生成实例
	extends 继承
	getter setter
		这个两个方法比较重要,常常用来封装API
		getset 是属性,而不是方法
	static 静态方法
		静态方法,不能在类的实例上调用静态方法,而应该通过类本身调用
	静态属性

15. Promise

Promise 就是为了解决“回调地狱”问题的,它可以将异步操作的处理变得很优雅。
Promise 可以支持多个并发的请求,获取并发请求中的数据这个 Promise 可以解决异步的问题,本身不能说 Promise 是异步的
定义: 包含异步操作结果的对象
状态:
pending:[待定]初始状态
fulfilled:[实现]操作成功
rejected: [被否决]操作失败

注意:
Promise 会根据状态来确定执行哪个方法
Promise 实例化时状态默认为 pending 的,如异步状态异常rejected,反之fulfilled
状态转化是单向的,不可逆转,已经确定的状态(fulfilled/rejected)无法转回初始状态(pending),而且只能是从 pending 到 fulfilled 或者 rejected

16. Promise.all() 批量操作

Promise.all(arr)用于将多个promise实例,包装成一个新的Promise实例,返回的实例就是普通的promise
它接收一个数组作为参数
数组里可以是Promise对象,也可以是别的值,只有Promise会等待状态改变
当所有的子Promise都完成,该Promise完成,返回值是全部值得数组
有任何一个失败,该Promise失败,返回值是第一个失败的子Promise结果

17. Promise.race()

race 与 all相似,只不过只要有一个执行完就会执行

18. Promise的问题

一旦执行,无法中途取消,链式调用多个then中间不能随便跳出来
错误无法在外部被捕捉到,只能在内部进行预判处理,如果不设置回调函数,Promise内部抛出的错误,不会反应到外部
Promise内部如何执行,监测起来很难,当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)

19. 数组扩展

includes():ES6 的基础上增加了一个索引,代表是从哪寻找ES7
flatMap(): 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。(注:它与 map 连着深度值为1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。)
flat: 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。默认为1.(应用:数组扁平化(当输入 Infinity 自动解到最底层))

20. 数值扩展

幂运算符:用 ** 代表 Math.pow()
toString()改造:返回函数原始代码(与编码一致)

21. 字符串扩展

padStart():用于头部补全
padEnd():用于尾部补全。
JSON.stringify(): 可返回不符合UTF-8标准的字符串(直接输入U+2028U+2029可输入)
replaceAll()
	replace() 方法仅替换一个字符串中某模式(pattern)的首个实例
	replaceAll() 会返回一个新字符串,该字符串中用一个替换项替换了原字符串中所有匹配了某模式的部分。
	模式可以是一个字符串或一个正则表达式,而替换项可以是一个字符串或一个应用于每个匹配项的函数。
	replaceAll() 相当于增强了 replace() 的特性,全量替换

22. async await

作用: 将异步函数改为同步函数,(Generator的语法糖)
特别注意:
	Async 函数 返回 Promise对象,因此可以使用 then
	awit 命令, 只能用在 async 函数下,否则会报错
	数组的 forEach() 执行 async/await会失效,可以使用 for-of 和 Promise.all()代替
	无法处理 promise 返回的 reject 对象,需要使用 try catch 来捕捉

23. await 等到了之后做了什么?

这里分为两种情况: 是否为 promise 对象
如果不是promise , await会阻塞后面的代码,先执行async外面的同步代码,同步代码执行完,再回到async内部,把这个非promise的东西,作为 await表达式的结果。
如果它等到的是一个 promise 对象,await 也会暂停async后面的代码,先执行async外面的同步代码,等着 Promise 对象 fulfilled,然后把 resolve 的参数作为 await 表达式的运算结果。

24. async await 与 promise 的优缺点

优点:
	它做到了真正的串行的同步写法,代码阅读相对容易
	对于条件语句和其他流程语句比较友好,可以直接写到判断条件里面
	处理复杂流程时,在代码清晰度方面有优势

缺点:
	用 await 可能会导致性能问题,因为 await 会阻塞代码,也许之后的异步代码并不依赖于前者,但仍然需要等待前者完成,导致代码失去了并发性。

25. Promise.finally()

不管最后状态如何都会执行的回调函数

26. for-await-of

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

27. 对象扩展

Object.fromEntries()
	返回键和值组成的对象,相当于Object.entries()的逆操作
	可以做一些数据类型的转化
Map 转化为 Object
Array 转化为 Object
对象转换
	let res = Object.fromEntries(
    	Object.entries(obj).filter(([key, val]) => value !== 3)
 	)

28. 可选的Catch参数

ES10 中,try catch 可忽略 catch的参数

29. BigInt(原始类型)

新的原始数据类型:BigInt,表示一个任意精度的整数,可以表示超长数据,可以超出253次方
js 中 Number类型只能安全的表示-(2^53-1)2^53-1 范的值

特别注意:

Number类型的数字有精度限制,数值的精度只能到 53 个二进制位(相当于 16 个十进制位, 正负9007199254740992),大于这个范围的整数,就无法精确表示了。
Bigint没有位数的限制,任何位数的整数都可以精确表示。但是其只能用于表示整数,且为了与Number进行区分,BigInt 类型的数据必须添加后缀n。
BigInt 可以使用负号,但是不能使用正号
number类型的数字和Bigint类型的数字不能混合计算

30. 基本数据类型

ES6中一共有7种,分别是:srting、number、boolean、object、nullundefined、symbol
其中 object 包含: Array、Function、Date、RegExp
而在ES11后新增一中,为 8中 分别是:srting、number、boolean、object、nullundefined、symbol、BigInt

31. Promise.allSettled():

将多个实例包装成一个新实例,返回全部实例状态变更后的状态数组(齐变更再返回)
无论结果是 fulfilled 还是 rejected, 无需 catch
相当于增强了 Promise.all()

32. import(): 动态导入

按需获取的动态 import. 该类函数格式(并非继承 Function.prototype)返回 promise 函数
与require的区别是:require()是同步加载,import()是异步加载

33. globalThis

全局this,无论是什么环境(浏览器,node等),始终指向全局对象

34. 可选链

符号 ?代表是否存在
TypeScript 在 3.7 版本已实现了此功能

35. 空值合并运算符

处理默认值的便捷运算符
与 || 相比,空值合并运算符 ?? 只会在左边的值严格等于 nullundefined 时起作用。

36. Promise.any()

其区别于 Promise.race(), 尽管某个 promise 的 reject 早于另一个 promise 的 resolve,Promise.any() 仍将返回那个首先 resolve 的 promise。

37. 数值分隔符

const num3 = 10.12_34_56
console.log(num3); // 10.123456
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值