JavaScript 常见面试题分析（四）

Unsplash

01 强制类型转换和隐式类型转换

强制：parseInt、parseFloat、toString
隐式：if、逻辑运算、==、+拼接字符串

02 new Object() 和 Object.create() 区别

// Object.create(null) // 没有原型
// Object.create({}) // 可指定原型

const obj1 = {
  a: 1,
  b: 2
}
const obj2 = new Object(obj1)
const obj3 = Object.create(obj1)

obj2 === obj1 // true
obj3.__proto__ === obj1 // true

03 描述事件冒泡的流程

基于 DOM 树形结构，事件会顺着触发元素往上冒泡，应用场景：代理

04 xhr.status

2xx - 表示成功处理信息，如 200 - 成功处理请求，204 - 成功处理请求但没有返回内容
3xx - 需要重定向，浏览器直接跳转，如 301 - 永久重定向，302 - 临时重定向，304 - 网页未修改，不会返回内容
4xx - 客户端请求错误，如 403 - 拒绝请求， 404 - 找不到请求网页
5xx - 服务端错误

05 Promise加载图片

function loadImg(src) {
  return new Promise(
    (resolve, reject) => {
      const img = document.createElement('img')
      img.onload = () => {
        resolve(img)
      }
      img.onerror = () => {
        const err = new Error(`图片加载失败 ${src}`)
        reject(err)
      }
      img.src = src
    }
  )
}

loadImg(url1).then(img1 => {
  console.log(img1.width)
  return img1 // 普通对象
}).then(img1 => {
  console.log(img1.height)
  return loadImg(url2) // promise 实例
}).then(img2 => {
  console.log(img2.width)
  return img2
}).then(img2 => {
  console.log(img2.height)
}).catch(ex => console.error(ex))

06 如何减少DOM操作

const list = document.getElementById('list')

// 创建一个文档片段，此时还没有插入到DOM结构中
const frag = document.createDocumentFragment()
for (let i = 0; i < 20; i++) {
  const li = document.createElement('li')
  li.innerHTML = `List item ${i}`
  // 先插入文档片段中
  frag.appendChild(li)
}

list.appendChild(frag)

07 split() 和 join() 的区别

'1-2-3'.split('-') // [1, 2, 3]
[1, 2, 3].join('-') // '1-2-3'

08 函数 call 和 apply 的区别

fn.call(this, p1, p2, p3)
fn.apply(this, arguments)

09 window.onload 和 DOMContentLoaded 的区别

// 页面的全部资源加载完才会执行，包括图片、视频等
window.onload = function() {}
window.addEventListener('load', function() {})

// DOM 渲染完即可执行，此时图片、视频还可能没有加载完
document.addEventListener('DOMContentLoaded', function(){})
$(document).ready(function(){})

10 函数声明和函数表达式的区别

函数声明会在代码执行前预加载，而函数表达式不会

11 获取多个数字中的最大值

function max() {
  const nums = Array.prototype.slice.call(arguments)
  let max = 0
  nums.forEach(n => {
    if(n > max) {
      max = n
    }
  })
  return max
}

// 方法2
Math.max(10, 30, 20, 40)

12 解析 URL 参数

function query(name) {
    const search = location.search.substr(1) // 类似 array.slice(1)
    // search: 'a=10&b=20&c=30'
    const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i')
    const res = search.match(reg)
    if (res === null) {
        return null
    }
    return res[2]
}
query('d')

// URLSearchParams
function query(name) {
  const search = location.search
  const p = new URLSearchParams(search)
  return p.get(name)
}
console.log( query('b') )

13 手写字符串 trim 保证浏览器兼容性

String.prototype.trim = function() {
  return this.replace(/^\s+/, '').replace(/\s+$/, '')
}

14 数组去重

function unique(arr) {
  const res = []
  arr.forEach(item => {
    if (res.indexOf(item) < 0) {
      res.push(item)
    }
  })
  return res
}

// 方法2
Array.from(new Set(arr));

15 深度比较 isEqual

function isObject(obj) {
  return typeof obj === 'object' && obj !== null
}
function isEqual(obj1, obj2) {
  // 判断是否是对象或数组
  if (!isObject(obj1) || !isObject(obj2)) {
    // 值类型
    return obj1 === obj2
  }
  if (obj1 === obj2) return true
  
  // 两个都是对象或数组，且不相等
  // 1. 先取出 obj1 和 obj2 的 keys ，比较个数
  const obj1Keys = Object.keys(obj1)
  const obj2Keys = Object.keys(obj2)
  if (obj1Keys.length !== obj2Keys.length) {
    return false
  }
  // 2. 以 obj1 为基准，和 obj2 依次递归比较
  for (let key in obj1) {
    // 比较当前 key 的 val —— 递归！！！
    const res = isEqual(obj1[key], obj2[key])
    if (!res) return false
  }
  // 3. 全相等
  return true
}

16 数组降维 flat

function flat(arr) {
  // 验证 arr 中，还有没有深层数组 [1, 2, [3, 4]]
  const isDeep = arr.some(item => item instanceof Array)
  if (!isDeep) {
    return arr // 已经是 flatern [1, 2, 3, 4]
  }
  const res = Array.prototype.concat.apply([], arr)
  return flat(res) // 递归
}

17 单线程和异步

单线程：同一时间只能做一件事，两段 JS 不能同时执行
原因：避免 DOM 渲染的冲突，浏览器渲染 DOM，JS 可以修改 DOM，当 JS 执行的时候，浏览器 DOM 渲染会暂停

JS 实现异步的具体解决方案——Event-Loop 事件轮询
同步代码，直接执行；异步函数先放在异步队列中，待主进程的同步函数执行完毕，轮询执行异步队列的函数

$.ajax({
  url: './data.json',
  succcess: function() {
    console.log('a')
  }
})

setTimeout(function(){
  console.log('b')
}, 1000)

setTimeout(function(){
  console.log('c')
})

console.log('d')

// 输出结果取决于success所用的时间

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^