前端面试题之ES6相关

243 阅读3分钟

var let const

// 代码1
console.log(num); // undefined
var num = 111;
//等同于


console.log(num); // 报错
let num = 111;// 或 const num = 111;

// 代码2
var num = 111;
var num = 222;
console.log(num); // 222

// 代码3
function func () {
  for(var i = 0; i < 3; i++){
    console.log(i) // 0 1 2
  }
  console.log(i) // 3
}

以上代码分别展示了var定义变量会出现的几个问题。

  • 代码1: var会定义的变量会在执行时自动提升到顶层(声明提升),所以此时并没有报错。而是输出了undefined,却没有赋值提升。代码等同于:
var num 
console.log(num); // undefined
num = 111;
  • 代码2: var允许重新定义已有的变量名
  • 代码3: 其实和代码1差不多,就是var声明提升,导致for循环结束时,i变量依旧存在。因此引出了块级作用域的需要。

解决方案即为ES6的新语法letconst

  • let 不存在声明提升、不允许在同一作用域声明已声明过的变量名、具有块级作用域且向下覆盖。其实也就是解决了以上的三个问题
  • constlet一样,但const不允许修改,一般只用于定义常量。但存在一种场景为:当const声明的变量为Object类型时
const obj={}
obj.a='a'
const arr=[1,2,3]
arr.push(4)
console.log(obj.a) // a
console.log(arr.join('')) // 1234

不使用第三个变量的情况下,调换两个变量的值

const a = 1
const b = 2
[b, a]=[a, b]

考解构赋值的,比较简单。

数组去重方案

Set

const arr = [1, 2, 3, 4, 3, 2, 1]
const newArr = Array.from(new Set(arr))
// const newArr = [...new Set(arr)] 效果一样

Set自带去重效果,即塞入已存在元素时,会自动删除

Map

const arr = [1, 2, 3, 4, 3, 2, 1]
const map = new Map();
const newArr = new [];
for (let i = 0; i < arr.length; i++) {
  if(map.has(arr[i])) {  
    // 记录重复项
    map.set(arr[i], true); 
  } else {
    map.set(arr[i], false);
    newArr.push(arr[i]);
  }
} 

这里是运用了Map对象的特性,突破了传统Object的限制(只能用字符串做键名),可以用任何数据类型做键名。

includes

const arr = [1, 2, 3, 4, 3, 2, 1]
const newArr =[];
for(let i = 0; i < arr.length; i++) {
  if(!newArr.includes(arr[i])) {
    //includes 检测数组是否有某个值
    newArr.push(arr[i]);
  }
}

此处也可以拓展成使用reduce方法去做

以上都是ES6的一些方案,以下是一些老古董方案:

双层for循环+splice

const arr = [1, 2, 3, 4, 3, 2, 1]
for(var i=0; i<arr.length; i++){
  for(var j=i+1; j<arr.length; j++){
    //第一个等同于第二个,splice方法删除第二个
    if(arr[i]===arr[j]){         
      arr.splice(j,1);
      j--;
    }
  }
}

虽然我最不喜欢这样的方法,但他可以通过修改对比方式,实现对两个拥有相同属性的不同对象去重。

indexOf

const arr = [1, 2, 3, 4, 3, 2, 1]
const newArr = []
for (var i = 0; i < arr.length; i++) {
  if (newArr.indexOf(arr[i]) === -1) {
    newArr.push(arr[i])
  }
}

总结:以上并非是所有的数组去重方法,只是差不多这些也就够了。业务使用上基本可以直接照搬;但要注意的是,实际使用时,是否存在要对对象类型做去重的情况,如果需要的话,以上方案都需要一定程度的拓展甚至放弃(有些方法不好拓展)。

Event Loop 事件循环机制及Promise相关

【建议星星】要就来45道Promise面试题一次爽到底(1.1w字用心整理) - 掘金 (juejin.cn)

这是我以前看过关于Promise的博客,写得最好的一篇。我直接甩出链接。

未完待续,也可能没有待续,hhhhhhhhh