前端面试常见书面问题整理（持续更新）

题目

1.希望获取到页面中所有的checkbox怎么做？

const iptList = document.getElementsByTagName('input')
const checkList = []
let len = iptList.length
while (len--) {
  if (iptList[len].type === 'checkbox') {
    checkList.push(iptList[len])
  }
}
console.log(checkList)

2.已知有字符串 foo=”get-element-by-id” ,写一个 function 将其转化成驼峰表示法”getElementById” 。

//方法一:
const foo = 'get-element-by-id'

function format (str) {
  const newArr = str.split('-')
  let len = newArr.length
  while (len) {
    if (len > 1) {
      const arr = newArr[len - 1].split('')
      arr.splice(0, 1, arr[0].toUpperCase())
      newArr.splice(len - 1, 1, arr.join(''))
    }
    len--
  }
  const newStr = newArr.join('')
  return newStr
}
format(foo)

//方法二:
const foo = 'get-element-by-id'

function translate (res) {
  const arr = res.split('-') // 以-为分隔符截取字符串，返回数组
  for (let i = 1; i < arr.length; i++) {
    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1)
  }
  res = arr.join('') // 返回字符串
  return res
}
translate(foo)

3.对给定数组实现倒排

// 方法一
const numberArray = [ 3, 6, 2, 4, 1, 5 ]
numberArray.reverse()

//方法二
const numberArray = [ 3, 6, 2, 4, 1, 5 ]
const newArr = []
for (let i = 0; i < numberArray.length; i++) {
  newArr.unshift(numberArray[i])
}

4.对给定数组实现降序和升序

//实现降序
const numberArray = [ 3, 6, 2, 4, 1, 5 ]
numberArray.sort((a, b) => {
  return b - a
})

//实现降升序
// 方法一
const numberArray = [ 3, 6, 2, 4, 1, 5 ]
numberArray.sort((a, b) => {
  return a - b
})

// 方法二 通过冒泡排序实现数组升序
const numberArray = [ 3, 6, 2, 4, 1, 5 ]
function BubbleSort (arr) {
  for (let i = 0; i < arr.length - 1; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] > arr[j]) {
        const tmp = arr[j]
        arr[j] = arr[i]
        current = tmp
      }
    }
  }
  return arr
}
BubbleSort(numberArray)

// 方法三 通过插入排序实现数组排序
const numberArray = [ 3, 6, 2, 4, 1, 5 ]

function insertSort (arr) {
  for (let i = 1; i < arr.length; i++) {
    for (let j = i - 1; j >= 0; j--) {
      if (arr[j + 1] < arr[j]) {
        const temp = arr[j]
        arr[j] = arr[j + 1]
        arr[j + 1] = temp
      } else if (arr[j + 1] >= arr[j]) {
        break
      }
    }
  }
  return arr
}
insertSort(numberArray)

// 方法四 通过计数排序实现数组排序
const numberArray = [ 3, 6, 2, 4, 1, 5 ]
function CountSort (arr) {
  const obj = {}
  for (let i = 0; i < arr.length; i++) {
    if (!obj[arr[i]]) {
      obj[arr[i]] = 1
    } else {
      obj[arr[i]]++
    }
  }
  let index = 0
  // 遍历对象属性名，按顺序放回覆盖原数组
  for (const key in obj) {
    while (obj[key] > 0) {
      arr[index] = Number(key)
      obj[key]--
      index++
    }
  }
  return arr
}
console.log(CountSort(numberArray))

[参考博客](数组排序多种方法汇总 - 一只看夕阳的猫 - 博客园 (cnblogs.com))

将数字 12345678 转化成 RMB 形式 如： 12,345,678

function format (num) {
  // 将数字转换为字符串模式
  const str = num.toString()
  // 封装一个字符串翻转函数
  function revStr (str) {
    return str.split('').reverse().join('')
  }
  // 保存翻转后的字符串
  const newStr = revStr(str)
  // 定义一个变量用来保存处理后的结果
  let res = ''
  // 循环中的i必须是1,否则if条件执行错误
  for (let i = 1; i <= newStr.length; i++) {
    res = res + newStr[i - 1]
    if (i % 3 === 0 && i !== newStr.length) {
      res = res + ','
    }
  }
  // 将循环后的结果翻转后返回
  return revStr(res)
}
format(12345678)

JavaScript 中如何对一个对象进行深度 clone？

方法一:

function clone (obj) {
  // 判断数据类型是不是对象
  if (typeof obj === 'object') {
    // 因为数组也属于对象,细分传入的值是不是数组
    if (obj instanceof Array) {
      const result = []
      for (let i = 0; i < obj.length; i++) {
        // 递归调用
        result[i] = clone(obj[i])
      }
      return result
    } else {
      const result = {}
      for (const i in obj) {
        // 递归调用
        result[i] = clone(obj[i])
      }
      return result
    }
  } else {
    return obj
  }
}
const obj1 = [ 12, { a: 11, b: 22 }, 5 ]
const obj2 = clone(obj1)
obj2[1].a += 5
console.log(obj1, obj2)

方法二:

function cloneObject (obj) {
  console.log(!obj)
  // 如果obj有值,就会去判断obj的类型是不是对象,不满足条件直接返回值
  if (!obj || typeof obj !== 'object') {
    return obj
  }
  // 判断obj是不是数组,从而定义一个初识变量用于保存值
  const o = obj.constructor === Array ? [] : {}
  // 循环obj中的每一个key
  for (const i in obj) {
    // 判断obj[i]的值是不是对象,如果是执行递归
    o[i] = typeof obj[i] === 'object' ? cloneObject(obj[i]) : obj[i]
  }
  return o
}
const obj1 = [ 12, { a: 11, b: 22 }, 5 ]
const obj2 = cloneObject(obj1)
obj2[1].a += 5
console.log(obj1, obj2)