js面试题-代码实现

新 API

最新的 url 参数获取的 API？

URLSearchParams

// 有如下一个url: http://localhost?a=1&b=2

function getUrlParam(name) {
  let paramStr = location.search.substr(1)
  let params = new URLSearchParams(paramStr)
  return params.get(name)
}

console.log(getUrlParam('a')) // 1

数组

实现数组去重？

现在有如下一个数组：

let arr = [1, 1, 'true', 'true', true, true, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}]

• 使用 ES6 的 Set 方法

利用 Set 数据类型的特性，集合内部不会有重复的元素 不能过滤对象

Array.from(new Set(arr));

// 等于

[...new Set(arr)];

• 使用对象键值唯一的特性

不能过滤对象

function unique(arr) {
  let obj = {}
  return arr.filter((item) => {
    let key = typeof item + item
    return obj.hasOwnProperty(key) ? false : (obj[key] = true)
  })
}

因为对象的 key 是 string 类型，无论你传入什么他都会解析成字符串，所以就导致了数字 1 和字符串 1，在对象中的 key 是相同的。 所以会把它们当成相同的数据过滤掉，所以可以使用 typeof 简单判断下数据类型

• 使用 Map

function unique(arr) {
  let map = new Map()
  return arr.filter((item) => {
    return map.has(item) ? false : map.set(item, true)
  })
}

• indexOf 或 includes

不能过滤对象、NaN

function unique(arr) {
  let list = []
  if (!Array.isArray(arr)) {
    throw new Error('type error')
  }
  for (let i = 0, l = arr.length; i < l; i++) {
    let item = arr[i]
    if (list.indexOf(item) === -1) {
      list.push(item)
    }
  }
  return list
}

• 双层 for 循环

不能过滤对象、NaN

function unique(arr) {
  // let l = arr.length
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1)
        j--
      }
    }
  }
  return arr
}

实现扁平数组（降维数组）

• 重写 concat 方法

只能处理二维数组

let arr = [[1, 2], [3, 4]]

Array.prototype.concat.apply([], arr) // [1, 2, 3, 4]

• 使用 flat 方法

可以处理多维数组

let arr = [[1, 2], [3, 4]]

arr.flat(Infinity) // [1, 2, 3, 4]

• 使用 toString + split

这种方法有些局限性，扁平化后的数组的每一项会变成字符串

let arr = [[1, 2], [3, 4]]

arr.toString().split(',') // [1, 2, 3, 4]

• 递归

let source = [[1, 2], [3, 4]]
let arr = []

function flatFn(source) {
  source.forEach(v => {
    if(Array.isArray(v)){
        flatFn(v)
    } else {
        arr.push(v)
    }
  })
}
flatFn(source)
console.log(arr) // [1,2,3,4]

实现取数组的最大值？

• Math.max.apply(null, [4, 1, 2, 3])
• Math.max(...[4, 1, 2, 3])

实现一个Flat？

let source = [[1, 2], [3, 4, [5, 6]]]

function flatFn(source, depth=1){
  return source.reduce((pre,cur) => {
      return Array.isArray(cur) && depth > 0 ? [...pre, ...flatFn(cur, depth-1)] : [...pre, cur]
  }, [])
}

console.log(flatFn(source, 1)) // [1, 2, 3, 4, Array(2)] 
console.log(flatFn(source, 2)) // [1, 2, 3, 4, 5, 6]

工具类

实现深拷贝?

有如下的一个数据：

let obj = {
  a: undefined,
  b: 1.7976931348623157e10308,
  c: -1.7976931348623157e10308,
  d: new Date(),
  e: new RegExp('\\w+'),
  f: function () {
    console.log(1)
  }
}

• 使用 JSON.parse(JSON.stringify(obj))
  弊端如下：

  • 如果 obj 里面有时间对象，时间将只是字符串的形式。而不是时间对象
  • 如果 obj 里有 RegExp、Error 对象，则序列化的结果将只得到空对象
  • 如果 obj 里有函数，undefined，则序列化的结果会把函数或 undefined 丢失
  • 如果 obj 里有 NaN、Infinity(正无穷大)和-Infinity(负无穷大)，则序列化的结果会变成 null
  • 如果 obj 中的对象是有构造函数生成的，会丢弃对象的 constructor

• 手写迭代拷贝

function deepClone(source) {
  if (!source || typeof source !== 'object') {
    return source
  }
  if (source instanceof Date) {
    return new Date().setTime(source.getTime())
  }
  let newObj = Array.isArray(source) ? [] : {}
  for (let key in source) {
    if (source[key] && typeof source[key] === 'object') {
      newObj[key] = deepClone(source)
    } else {
      newObj[key] = source[key]
    }
  }
  return newObj
}

排序算法

手写冒泡

名字的由来： 越大（或越小）的元素经过交换慢慢浮到数列的顶端。就如同饮料中的气泡最终会上浮到顶端一样，故名叫“冒泡排序”

规则如下：

1. 外层循环和内层循环只需要循环 length - 1

两两比较，最后的两个数只需要比较一次就能确定两者的位置 比如 [2, 1, 3, 4, 5]，2 和 1 只需要比较一次就能确定位置了[1, 2, 3, 4, 5]

2. 内层循环在 length - 1 的基础上减去 i，也就是 length - 1 - i

每当外层 for 成功循环一次之后，内层 for 就可以少循环一次，这里注意是当外层 for 循环完毕之后

3. 内层循环：用当前的值 a（arr[j]）和下一个值 b（arr[j + 1]）比较大小，如果 a 大于 b，则交换两数的位置，最终的目的是将最大的数移到数组最后面

let arr = [5, 4, 3, 2, 1]

function bubbleSort(arr) {
  let len = arr.length
  for (let i = 0; i < len - 1; i++) {
    for (let j = 0; j < len - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        let temp = arr[j]
        arr[j] = arr[j + 1]
        arr[j + 1] = temp
      }
    }
  }
}

bubbleSort(arr)

快排

规则如下：

1. 在数组中，找到一个元素作为“基准”（pivot）
2. 小于基准的元素，就移到“基准”的左边；大于“基准”的元素，就移到“基准”的右边
3. 对“基准”左右两边的集合，进行递归，不断重复第一步和第二步，直到所有子元素只剩一个元素为止

function quickSort(arr) {
  if (arr.length === 0) return arr
  const pivotInx = Math.floor(arr.length / 2)
  const pivot = arr.splice(pivotInx, 1)[0]
  const left = []
  const right = []
  for (let i = 0; i < arr.length; i++) {
    const item = arr[i]
    if (item < pivot) {
      left.push(item)
    } else {
      right.push(item)
    }
  }
  return quickSort(left).concat([pivot]).concat(quickSort(right))
}

看代码

看以下代码会输出什么？

let a = { name: 'Jone' }
let b = a
a = { name: 'Sasa' }
console.log(b)

解答：
输出：{ name: 'Jone' }
这道题主要是考引用数据类型的特性 当 b = a 时，a 和 b 指向同一个堆地址。 当 a = {name: 'Sasa'} a 被重新赋值，所以 a 指向新的堆地址，b 仍然是原来的堆地址

看以下代码会输出什么？

let a = 1
b = a
b = 2
console.log(a)

解答：
这道题主要是考基本数据类型的特性

其他

let a = null 有什么作用？

let a = null 一般用作手动释放该变量的内存，而不是等到离开作用域后被自动回收

如何阻止冒泡事件

function stopBubble(e) {
  if (e && e.stopPropagation) {
    // 非IE浏览器
    e.stopPropagation()
  } else {
    //IE浏览器
    window.event.cancelBubble = true
  }
}

如何阻止浏览器默认事件

function stopDefault(e) {
  //标准浏览器
  if (e && e.preventDefault) {
    e.preventDefault()
  }
  //个别IE
  else {
    window.event.returnValue = fale
    return false
  }
}

获取非行间样式

function getCss(curEle, attr) {
  var val = null
  try {
    val = window.getComputedStyle(curEle, null)[attr]
  } catch (e) {
    val = curEle.currentStyle[attr]
  }
  return val
}

getCss(div, 'width')