前端面试记录2018-09-15

1. js 基本数据类型（6种）

• 5种简单1种复杂
• null
• undefined
• boolean
• number
• string
• object

2. 数组各个位置的添加 / 删除操作

数组开头：unshift / shift
数组末尾：push / pop
给定位置：splice(位置, 0, 参数, ...) / splice(位置, 删除个数)

3. 防抖（Debounce） / 节流（Throttle）的异同与简单实现

同：都是为了优化一定时间内高频率执行 js 代码的一种技巧
防抖：只在最后一次触发事件后才执行一次函数
节流：不管事件触发的多频繁，都会保证在规定的时间内一定会执行一次真正的事件处理函数

• 防抖（延迟执行直到不在触发）

function debounce (fn, delay) {
  let timer = null
  return function () {
    let self = this,
        args = arguments
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(self, args)
    }, delay)
  }
}

• 节流 （记录时间比对时间差）

function throttle (fn, delay) {
  let timer = null
  return function () {
    let now = Date.now(),
        self = this,
        args = arguments
    if (now - timer > delay || !timer) {
      fn.apply(self, args)
      timer = now
    }
  }
}

4. promise 实现

• promise简介：
  主要是为了解决异步回调的问题
  有3种状态，等待 / 执行成功 / 执行失败 (pending、fulfilled、rejected)

  function fn (resolve, reject) {
    let number = Math.random()
    if (number >= 0.5) {
      resolve('success')
    } else {
      reject('fail')
    }
  }
  return new Promise(fn)

5. 数组去重（多种方法）

• 创建新数组，依次判断添加 ( 利用indexOf )

function uniq (array) {
  let list = []
  for (let i = 0; i < array.length; i ++) {
    if (list.indexOf(array[i]) == -1) {
      list.push(array[i])
    }
  }
  return list
}

• 双重循环依次比对，去掉重复值

function uniq (array) {
  let list = array
  for (let i = 0; i < list.length - 1; i ++) {
    for (let t = i + 1; t < list.length; t ++) {
      if (list[i] == list[t]) {
        list.splice(t, 1)
        t --
      }
    }
  }
  return list
}

• 利用空对象属性是否存在判断

function uniq (array) {
  let list = [],
      obj = {}
  for (let i in array) {
    let val = array[i]
    if (!obj[val]) {
      list.push(val)
      obj[val] = true
    }
  }
  return list
}

6. js 将图片转换成base64

• 将在线图片转换成 base64

function getBase64 (url) {
  // 通过地址获取图片
  let img = document.createElement('img')
      img.crossOrigin = "anonymous"
      img.src = url
  // 创建画布
  let canvas = document.createElement('canvas')
  // 设定画布大小
  canvas.width = img.width
  canvas.height = img.height
  // 指定绘图环境
  let ctx = canvas.getContext('2d')
  // 开始绘画
  ctx.drawImage(img, 0, 0, img.width, img.height)
  // 获取文件后缀类型
  // substring 获取指定位置之间的字符串
  // lastIndexOf 获取最后一次出现的位置
  // toLowerCase 转化为小写
  let ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
  // toDataURL 方法获取 base64 (传入文件类型)
  let dataURL = canvas.toDataURL("image/" + ext)
  return dataURL
}

7. css3 实现瀑布流

  .waterfall {
    width: 90%;
    column-gap: 10px;
    column-count: 4;
    margin: 0 auto;
  }
  .item {
    break-inside: avoid;
  }

8. 简述 Vue 双向绑定的实现原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。