前端面试整理(自用)

• 判断变量的数据类型

  • 基本数据类型(Sring,Number,Undefined,Null,Boolean)使用 typeof进行判断，console.log(typeof '123') => String，这之中 null 不能使用 typeof 判断数据类型，因为typeof 的判断依据是将数据转为二进制，如果前三位为 000 则判为 Object 类型，null 表示的是空，二进制 000000 会被判断为 Object。
  • data insanceof type，通过 instanceof 来判断变量是不是某一类型的数据，判断的根据是通过变量的构造原型。限制比较多，需要是通过构造原型方式声明的变量才可以 let a = new String()，还要求在同一个全局window下。
  • 最准确的判断方式 Object.prototype.toString.call，通过查找原型链来检索变量的数据类型。

• 数组的常用方法(abc默认为字符串类型)

  • [a,b,c].join(',')，将数组转为字符串使用，元素之间使用 , 隔开。 'a,b,c'
  • 'a,b,c'.split(',')，将字符串通过字符分割为数组。 [a,b,c]
  • [a,b].push('c')，将元素添加在数组的最后一个。 [a,b,c]
  • [a,b].unshift('c')，将元素添加到数组的最前面。[c,a,b]
  • [a,b,c].pop()，将数组的最后一个元素移除。移除后数组的结果[a,b]，该方法会返回被移除的元素 'c'
  • [a,b,c].shift()，将数组的第一个元素删除。移除后数组的结果[b,c]，该方法会返回被移除的元素 'a'
  • [a,b,c].reverse()，将数组中元素的顺序反转。反转后 [c,b,a]
  • [b,a,c].sort()，给数组中的元素进行排序，排序结束的结果，[a,b,c]
  • [a].concat([b,c])，将两个数组进行链接，结果为 [a,b,c]
  • [a,b,c].splice(2,1)，用于添加或者删除数组中的元素，这个方法会改变原数组，参数的原则是包头不包尾，原数组操作后[a,b]。该方法可以有第三个参数，可以在删除的位置插入新的元素，[a,b,c].splice(2,1,250),操作结束后原数组会变成 [a,b,250]
  • [a,b,c].slice(1,3)，用于提取数组中对应的元素，方法执行完毕之后会返回 [b,c]，该方法不会改变原数组

• 数组的常用遍历方式(abc默认为字符串类型)

  • forEach在遍历的时候可以直接操作原数组，但是要谨慎操作原数组可能会引起无限循环，该方法无返回值。
  • map在遍历数组的时候不可以直接对数组本身进行操作，map在执行结束会有返回值。
  • filter在遍历数组的时候会根据条件对数组的元素进行筛选，返回符合条件的元素。
  • find遍历数组的时候会返回代码块中符合条件为true的元素，只会返回符合条件的第一个。
  • findIndex同find，会返回符合条件的第一个元素的下标。
  • some遍历数组，根据判断条件进行模糊判断，有真则真，返回布尔值。(可用于优化性能)
  • every遍历数组，根据判断条件进行模糊判断，有假则假，返回布尔值。(可用于优化性能)

  • reduce遍历数组进行累加计算

    • array.reduce((temp,元素,下标,原数组) => {}, 记录值)

      • temp 是用于循环记录数据变化的值，每次循环都会变化，每次遍历的时候会先访问记录值将记录值赋值给temp，然后进行代码块的运行；如果参数中没有记录值，reduce在遍历的时候会从数组的第二个元素开始遍历，将数组的第一个元素作为记录值使用。
      • 记录值，会在数组首次遍历的时候赋值给temp

• 对象的深拷贝和浅拷贝

  • 浅拷贝：引用类型直接使用 = 进行赋值操作的时候，会将数据的内存地址赋值给目标，被赋值之后，数据会随着该内存地址的源头数据的改变而改变，这就是浅拷贝，浅拷贝就是拷贝内存地址
  • 深拷贝：深拷贝就是将引用类型的所有的数值拷贝到一个新的内存地址中，不会随着源头数据的改变而改变，深拷贝就是拷贝数据的值

  • 常用的深拷贝的方式：

    • JSON.parse(JSON.stringfy(Obj)): 将对象数据转为字符串，然后通过JSON.parse转为引用类型。【缺点：undefined和函数无法通过这种方式进行深拷贝】
    • 最安全的深拷贝使用递归的方式进行判断

• this的指向问题

  • this就是代码执行到'this'这条语句的时候所在的上下文环境【执行的时候绑定this指向】
  • es6的箭头函数代码块具有this穿透能力，指向声明时的上下文环境，并且不可改变【声明的时候绑定指向】 在window下直接声明 var obj = {obj1:{ obj2: { obj3:()=>{console.log('this', this)} } }} 输出的时候this指向window，箭头函数指向声明时的上下文环境

  • 改变 this 指向的三个方法详见：

    • apply:
    • call:
    • bind: