ES6语法和新特性--面试题

2023-03-15  本文已影响0人  Moment929

1.箭头函数适用场景及需要注意的地方:

1.箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下,例如:用在 map、reduce、filter 的回调函数定义中
2.箭头函数的亮点是简洁,但在有多层函数嵌套的情况下,箭头函数反而影响了函数的作用范围的识别度,这种情况不建议使用箭头函数
3.箭头函数要实现类似纯函数的效果,必须剔除外部状态。所以箭头函数不具备普通函数里常见的 this、arguments 等,当然也就不能用 call()、apply()、bind() 去改变 this 的指向
4.箭头函数不适合定义对象的方法(对象字面量方法、对象原型方法、构造器方法),因为箭头函数本身没有this,其内部的 this 指向的是外层作用域的 this
5.箭头函数不适合定义结合动态上下文的回调函数(事件绑定函数),因为箭头函数在声明的时候会绑定静态上下文

button.addEventListener('click', () => {  
    this.textContent = 'Loading...';
});
// this 并不是指向预期的 button 元素,而是 window

2.let和const的异同点

1、let和const的相同点:
① 只在声明所在的块级作用域内有效。
② 不提升,同时存在暂时性死区,只能在声明的位置后面使用。
③ 不可重复声明。
2、let和const的不同点:
① let声明的变量可以改变,值和类型都可以改变;const声明的常量不可以改变,这意味着,const一旦声明,就必须立即初始化,不能以后再赋值
② 数组和对象等复合类型的变量,变量名不指向数据,而是指向数据所在的地址。const只保证变量名指向的地址不变,并不保证该地址的数据不变,所以将一个复合类型的变量声明为常量必须非常小心。

3.Set和Map数据结构以及常用方法

set数据结构类似于数组,成员都是唯一的,没有重复的值;

Set 结构的实例有以下属性。

Set.prototype.constructor:构造函数,默认就是Set函数。
Set.prototype.size:返回Set实例的成员总数。

Set 实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。

&&&下面先介绍四个操作方法。
add(value):添加某个值,返回 Set 结构本身。
delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
has(value):返回一个布尔值,表示该值是否为Set的成员。
clear():清除所有成员,没有返回值。
&&&Set 结构的实例有四个遍历方法,可以用于遍历成员。
keys():返回键名的遍历器
values():返回键值的遍历器
entries():返回键值对的遍历器
forEach():使用回调函数遍历每个成员
需要特别指出的是,Set的遍历顺序就是插入顺序。这个特性有时非常有用,比如使用 Set 保存一个回调函数列表,调用时就能保证按照添加顺序调用。

 for (let item of set.keys()) {
   console.log(item);
  }
  // red
  // green
  // blue

遍历的应用:扩展运算符(...)内部使用for...of循环,所以也可以用于 Set 结构。

 let unique = [...new Set(arr)];
 // [3, 5, 2]

ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
(1)size 属性:size属性返回 Map 结构的成员总数。
(2)set(key, value):set方法设置键名key对应的键值为value,然后返回整个 Map 结构。如果key已经有值,则键值会被更新,否则就新生成该键。
(3)get(key):get方法读取key对应的键值,如果找不到key,返回undefined。
(4)has(key)
(5)delete(key)
(6)clear()
遍历方法
Map 结构原生提供三个遍历器生成函数和一个遍历方法。

keys():返回键名的遍历器。
values():返回键值的遍历器。
entries():返回所有成员的遍历器。
forEach():遍历 Map 的所有成员。

const items = [
 ['name', '张三'],
 ['title', 'Author']
];
const map = new Map();
items.forEach(
 ([key, value]) => map.set(key, value)
);

for (let item of map.entries()) {
 console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value); }
// "F" "no"
// "T" "yes"

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"
Map 结构转为数组结构,比较快速的方法是使用扩展运算符(...)。
const map = new Map([
    [1, 'one'],
    [2, 'two'],
    [3, 'three'],
  ]);
  
  [...map.keys()]
  // [1, 2, 3]
  
 [...map.values()]
 // ['one', 'two', 'three']
 
 [...map.entries()]
 // [[1,'one'], [2, 'two'], [3, 'three']]
 
 [...map]
 // [[1,'one'], [2, 'two'], [3, 'three']]

4.类的理解

上一篇下一篇

猜你喜欢

热点阅读