【摘要】 学习前端的小伙伴们，Web前端面试题即将来袭！环球网校为大家整理了Web前端的JS面试题及答案，快来试一试你能不能答出来吧！如果你有更好的想法欢迎提出来。让我们一同进步吧！
一、判断 js 类型的方式
typeof
可以判断出'string','number','boolean','undefined','symbol'
但判断 typeof(null) 时值为 'object'; 判断数组和对象时值均为 'object'
1、instanceof
原理是 构造函数的 prototype 属性是否出现在对象的原型链中的任何位置
function A() {}
let a = new A();
a instanceof A //true,因为 Object.getPrototypeOf(a) === A.prototype;
2、Object.prototype.toString.call()
常用于判断浏览器内置对象,对于所有基本的数据类型都能进行判断，即使是 null 和 undefined
3、Array.isArray()
用于判断是否为数组
二、浅拷贝和深拷贝
浅拷贝
Object.assign()
Array.prototype.slice()
扩展运算符 ...
深拷贝
JSON.parse(JSON.stringify())
递归函数
function cloneObject (obj) {
var newObj = {} //如果不是引用类型，直接返回
if (typeof (obj) !== 'object') {
return obj
}
//如果是引用类型，遍历属性
else{
for (var attr in obj) {
//如果某个属性还是引用类型，递归调用
newObj[attr] = cloneObject(obj[attr])
}
}
return newObj
}
三、数组去重的方法
1.ES6 的 Set
let arr = [1,1,2,3,4,5,5,6]
let arr2 = [...new Set(arr)]
2.reduce()
let arr = [1,1,2,3,4,5,5,6]
let arr2 = arr.reduce(function(ar,cur) {
if(!ar.includes(cur)) {
ar.push(cur)
}
return ar
},[])
3.filter()
// 这种方法会有一个问题：[1,'1']会被当做相同元素，最终输入[1]
let arr = [1,1,2,3,4,5,5,6]
let arr2 = arr.filter(function(item,index) {
// indexOf() 方法可返回某个指定的 字符串值 在字符串中首次出现的位置
return arr.indexOf(item) === index
})
四、DOM 事件有哪些阶段?谈谈对事件代理的理解
分为三大阶段：捕获阶段--目标阶段--冒泡阶段
事件代理简单说就是：事件不直接绑定到某元素上，而是绑定到该元素的父元素上，进行触发事件操作时(例如'click')，再通过条件判断，执行事件触发后的语句(例如'alert(e.target.innerHTML)')
好处：(1)使代码更简洁;(2)节省内存开销
以上就是本期的Web前端JS面试题及答案，其中涉及的知识点你都掌握了吗？前端是一个重在实践的课程，多去尝试和实践对你的技能提升会有非常大的帮助。如果大家在学习的过程中遇到困难可以戳这里>>>环球网校