常见的js题目整理

184 阅读2分钟

js 中一些比较好的问题

var、let 和 const

对原型和原型链的理解

对this和箭头函数的理解

有哪些数据类型判断的方法,有什么区别

0 typeof运算符

// 直接上代码才是我的风格
typeof 'a' // 'string'
typeof 325 // 'number'
typeof true // 'boolean'
typeof [1,2,3] // 'object'
typeof { a: 3, b: 5 } // 'object'
typeof function(){console.log(1)} // 'function'
// 可以看的出来typeof在Array和Object上面是不准的,那接下来的两种就直接比较Array和Object

1 instanceof运算符

let arr = [1,1,3]
let obj = { a: 1 }
arr instanceof Array // true
arr instanceof Object // true
obj instanceof Object // true
obj instanceof Array // false
// instanceof 可以说也是分不出来的,当然提前已经知道是两种中的一种也是可以分出来的

2 Object.prototype.toString方法

Object.prototype.toString.call([]) // "[object Array]"
Object.prototype.toString.call([]) // "[object Object]"
// 所以通过利用Object原型链上面的tuString方法是可以分开的,我们可以封装得到准确的获取类型的方法
function getType (type) {
    return Object.prototype.toString.call(type).match(/\[object (.*?)\]/)[1].toLowerCase()
}

对象的深拷贝和浅拷贝

深拷贝

let clone = (value,deep) => {
  if (isPrimitive(value)) { // 如果是原始数据类型,直接返回
    return value
  }
  if (isArrayLike(value)) { // 如果是类数组
    value = [].slice.call(value)
    return value.map(item => deep ? clone(item,deep) : item)
  } else if (getRawType(value) === 'object' || getRawType(value) === 'array') {
    let target = {}
    for (let key in value) {
      value.hasOwnProperty(key) && ( target[key] = deep ? clone(value[key],deep) : value[key])
    }
    return target
  }
  let type = getRawType(value)
  switch (type) {
    case 'date' :
    case 'regexp' :
    case 'error' :
      return new window[type](value)
    break
  }
}

思想就是,如果是原始数据类型直接返回值,没有深浅之分,如果是数组和对象类的引用数据类型,遍历的方法返回是深拷贝,还是浅拷贝

浅拷贝

Object.assign = Object.assign || function (){
  if (arguments.length === 0) {
    throw new TypeError('Cannot convert undefined or null to object')
  }
  let target = arguments[0]
  let args = [].slice(arguments)
  args.forEach(item => {
    for(let [key,value] of Object.entries(item)){
      target[key] = value
    }
  })
  return target
}

闭包问题

闭包是指有权访问另一个函数作用域中的变量的函数。桥梁的概念

防抖和节流

  1. 防抖(debounce):在函数需要频繁触发时,只有当有足够空闲的时间时,才执行一次。就好像在百度搜索时,每次输入之后都有联想词弹出,这个控制联想词的方法就不可能是输入框内容一改变就触发的,他一定是当你结束输入一段时间之后才会触发。

  2. 节流(thorttle):预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时,你不断点刷新点购买,可是总有一段时间你点上是没有效果,这里就用到了节流,就是怕点的太快导致系统出现 bug。

区别:在发生持续触发事件时,防抖设置事件延迟并在空闲时间去触发事件,而节流则是隔一定的时间触发一次。