前端面试题汇总

JavaScript 部分

1. 下面哪些会返回false？
   A. null
   B. undefined
   C. 0
   D. ‘0’

解析： ABC

数据类型	转换为true的值	转换为false的值
Boolean	true	false
String	任何非空字符串	空字符串
Number	任何非零数字值（包括无穷大）	0 和 Null
Object	任何对象	null
Undefined		Undefined

2. 下列说法正确的是（）
   A. 每个JS对象一定对应一个原型对象，并从原型对象继承属性和方法
   B. 对象的__proto__指向自己构造的函数的prototype
   C. Object.prototype.proto=== null,说明原型链到Object.prototype终止
   D. 表达式Function.prototype.proto.proto === null 的运行结果为true

解析： BCD
参考文章：【帮你彻底搞懂JS中的prototype、__proto__与constructor】

3. 有a.js 和 b.js 两个文件，请选择b文件中代码的输出

// a.js
let a = 1
let b = {}
setTimeout(() => {
  a = 2
  b.b = 2
},100)
module.exports = {a,b}

// b.js
const a = require('./a')
console.log(a.a)
console.log(a.b)
setTimeout(() => {
  console.log(a.a)
  console.log(a.b)
},500)

A. 1 { } 1 { }
B. 1 { } 2 {b:2}
C. 1 { } 1 {b:2}
D. 1 { } 2 { }

解析：C
涉及浅拷贝和深拷贝问题，a 是值得拷贝，所以一直是1；
b 是对象的拷贝，拷贝的是对象的引用，所以a.js 的b改变，b.js的a.b也改变

4. 以下表达式，正确的是
   A. Number(‘a’) == Number(‘a’)
   B. -1 == true
   C. 3 + ‘2’ === 5
   D. ![ ] == ’ ’

解析：D
对于相等和不相等操作符（=、=），基本转换规则
① 如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值----false转换为0，true转换为1
-1 == true true转换为1 -1 == 1 明显错误，为false
② 如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前先将字符串转换为数值
3 + '2' === 5; 3 + '2' = '32' 转换为数值32, ‘32‘ === 5 为false’’
③ 如果一个操作数是对象，另一个操作数不是，则调动对象的valueOf() 方法，用得到的基本类型按照前面的规则进行比较
注意：
null == undefined 为true，null === undefined 为false
Number(‘a’) == Number(‘a’)， 皆为NaN ， NaN ==NaN 为false

5. 下列说法正确的是
   A. setTimeout(foo,0) 这行代码可以等价替换成 foo（）
   B. 使用Object.assign(obj1,obj2) 可以实现对象的浅拷贝
   C. for…in 循环可以遍历对象自身及其原型链上的可枚举属性
   D. Object.keys() 可以遍历出对象原型链上的属性

解析： BC

HTML5 部分

1. 在HTML5<video>标签不支持下列那种格式的视频文件
   A. MP4
   B. Ogg
   C. Rmvb
   D. WebM

解析： C
目前<video>元素支持的三种视频格式： MP4、WebM、Ogg

编程题

1. 删除数组arr的第一个元素，不要直接修改数组arr，结果返回新的数组

解析： 首先想到的可能是shift()方法，但是shift()方法会删除第一个元素并返回该元素，会改变原数组；
然后应该是slice()方法，截取数组中部分元素以数组形式返回且不会改变原数组；
最简便的方法可以利用ES6的数组解构实现，如下

function curtail(arr) {
  let newArr = [...arr]
  newArr.shift()
  return newArr
}

function curtail2(arr) {
  let newArr = arr.slice(1)
  return newArr
}

function curtail3(arr) {
 let [, ...newArr] = arr
 return newArr
}

2. 为 Array 对象添加一个去除重复项的方法
输入：
[false, true, undefined, null, NaN, 0, 1, {}, {}, ‘a’, ‘a’, NaN]
输出：
[false, true, undefined, null, NaN, 0, 1, {}, {}, ‘a’]

解析：
看到Array 对象去重第一个想到的就是利用filter方法根据数组下标去重(如方法一），但是仔细看题目，是为Array对象添加一个去重方法，且输入中有NaN 因为NaN ！= NaN，所以此方法不能解决问题；
可以利用ES6的Set方法进行去重

// 方法一： 利用filter方法进行筛选
var Arr = [false,true,undefined,null,NaN,0,1,{},{},'a','a',NaN]
var newArr = Arr.filter((value,index,arr) => 
    arr.indexOf(value) === index
);

// 方法二：  利用Set去重
Array.prototype.uniq = function() {
  return Array.from(new Set(this))
}

3. 给定一个时间格式，将输入时间按指定时间格式输出
示例：
输入：
formatDate(new Date(1409894060000), ‘yyyy-MM-dd HH:mm:ss 星期w’)
输出：
2014-09-05 13:14:20 星期五

解析： 一看这种题目会觉得自己能够解决这类题，但是一开始上手就懵，这是缺什么？缺的是思维

function formatData(date, format) {
    // 自动补零
    let addZero = function (data) {
      if(data < 10) {
        return '0' + data
      }
      return data
    }

    let obj = {
       // 年
      'yyyy': date.getFullYear(),
      // 月
      'MM': addZero(date.getMonth() + 1),
      // 日
      'dd': addZero(date.getDate()),
      // 24小时制
      'HH': addZero(date.getHours()),
      // 12小时制
      'hh': addZero(date.getMinutes() % 12) ,
      // 分
      'mm': addZero(date.getMinutes()),
      // 秒
      'ss': addZero(date.getSeconds()),
      // 星期几
      'w': function() {
        let arr = ['日','一','二','三','四','五','六']
        return arr[date.getDay()]
      }()
    }

    for(let i in obj){
      format = format.replace(i, obj[i])
    }
    return format
  }

4. 交换a、b的值，不能使用临时变量

解析：巧妙利用两数之和、差，进行两数的交换

 a = a + b
 b = a - b
 a = a - b