前端面试题
JavaScript相关
1、请介绍一下对VUE生命周期的理解，created和mounted有什么区别？
2、介绍一下VUE的数据双向绑定原理？在使用中有那些注意事项，如何避免
3、VUE中组件传值的常用方法
4、 前端路由的实现原理
5、前端性能优化有那些方法
6、移动端页面调试有那些技巧
7、 介绍下Promise，主要解决了什么问题？如果有多个Promise 该如何优化？
8、 什么是跨域？跨域的常用解决方案有哪些？（如果说到jsonp，jsonp的原理是什么？）
9、 什么是闭包？闭包可以用来解决什么问题？
10、JavaScript的作用域和作用域链
11、 防抖和节流的区别
12、 什么是JavaScript原型，原型链 ? 有什么特点？
13、Javascript如何实现继承？
14、编码取出以下数组中的最大值？
[1,654,32,54,126,545,16,52,66,10]
15、给定以下两个数组，请编码取出ID相同的项？
let a = [
{ id: 2, name: 'bbb'},
{ id: 3, name: 'ccc'},
{ id: 5, name: 'eee'},
{ id: 6, name: 'fff'},
{ id: 8, name: 'hhh'},
]
let b = [
{ id: 1, name: 'aaa'},
{ id: 3, name: 'ccc'},
{ id: 4, name: 'ddd'},
{ id: 6, name: 'fff'},
{ id: 7, name: 'ggg'},
]16、写一个方法将以下类型数据处理成树形结构？
[
{ "id": 1013, "parentId": 0 },
{ "id": 1014, "parentId": 0 },
{ "id": 1061, "parentId": 1013 },
{ "id": 1063, "parentId": 1014 },
{ "id": 1066, "parentId": 1014 },
{ "id": 1067, "parentId": 1066 }
]17、请说明以下代码中各个console.log打印的值，以及原因：
(function () {
console.log(this)
console.log(a)
var a = {
b: function () {
console.log(this)
}
}
a.b()
})()for (var i = 1; i < 10; i++) {
setTimeout(() => {
console.log(i)
}, 0);
}
console.log(i) var arr1 = [1, 2, 3]
var arr2 = arr1
arr2[0] = 4
console.log(arr1)
console.log(arr2) console.log(1)
setTimeout(console.log, 0, 2)
new Promise(resolve => {
console.log(3)
setTimeout(resolve, 0, 4)
}).then(console.log)
console.log(5)18、优化以下代码：
var str = "我和我最后的倔强"；
str = str + "握紧双手绝对不放";
str = str + "下一站是不是天堂";
str = str + "就算失望不能绝望";
console.log(str);19、请编写一个函数对以下数组进行随机排序：
[1,2,3,4,5,6,7,8,9,10]
20、请写出以下代码执行的结果
let arr = [2, 4, 6, 8, 10];
arr.reduce((x, y) => {
return 10 * x + y
})CSS相关
1、如何理解CSS的盒子模型？
2、如何使用纯CSS实现一个三角形？它的原理是什么？
3、如何实现0.5px的细线？
4、移动端自适应布局的实现方式？
5、如何实现页面元素的左右垂直居中？
6、什么是CSS中的重绘和回流？
7、css3中新增了那些属性，具体有什么用处？
8、css中都有那些选择器？他们的优先级是怎么样的？
HTML相关
1、html5新增的存储类型有那些？都有什么区别？
2、谈谈你对html5语义化的理解？
3、html5中新增了那些标签，它们具体有什么作用？
4、HTML5 Canvas 元素有什么用？
5、页面的行内元素有那些？块级元素有那些？
答案：
1、请介绍一下对VUE生命周期的理解，created和mounted有什么区别？
答案：VUE的生命周期是指一个vue组件从创建到销毁的一些执行钩子，主要包括：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed；created是在组件实例创建成功以后执行，mounted是在组件渲染到DOM中后执行；
2、介绍一下VUE的数据双向绑定原理？在使用中有那些注意事项，如何避免
答案：主要使用了ES5中的 Object.defineProperty 将组件中的数据转换成getter/setter。
注意点：VUE中无法检测到对象属性的添加或删除。可以使用vue.set方法向对象添加响应式属性
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是响应式的
vm.b = 2 // `vm.b` 是非响应式的3、 前端路由的实现原理
https://blog.csdn.net/faremax/article/details/78788725
4、前端性能优化有那些方法
- 使用css sprites，可以有效的减少http请求数
- 使用缓存
- 压缩js，css文件，减小文件体积
- 使用cdn，减小服务器负担
- 懒加载图片
- 预加载css，js文件
- 避免dom结构的深层次嵌套
- 给DOM元素添加样式时，把样式放到类中，直接给元素添加类，减少重构，回流
4、 介绍下Promise，主要解决了什么问题？如果有多个Promise 该如何优化？
http://uunote.mit.cn/uunote/#/home?doc_id=676&pid=191
5、 什么是跨域？跨域的常用解决方案有哪些？（如果说到jsonp，jsonp的原理是什么？）
答案：略
6、 什么是闭包？闭包可以用来解决什么问题？
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。 闭包的特性： 1.函数内再嵌套函数 2.内部函数可以引用外层的参数和变量 3.参数和变量不会被垃圾回收机制回收
7、JavaScript的作用域和作用域链
JavaScript的作用域指的是变量的作用范围，内部作用域由函数的形参，实参，局部变量，函数构成，内部作用域和外部的作用域一层层的链接起来形成作用域链，当在在函数内部要访问一个变量的时候，首先查找自己的内部作用域有没有这个变量，如果没有就到这个对象的原型对象中去查找，还是没有的话，就到该作用域所在的作用域中找，直到到window所在的作用域，每个函数在声明的时候就默认有一个外部作用域的存在了
8、 防抖和节流的区别
- 防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。
- 节流：指定时间间隔内只会执行一次任务。
9、 什么是JavaScript原型，原型链 ? 有什么特点？
答案： 每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时， 如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype， 于是就这样一直找下去，也就是我们平时所说的原型链的概念。
特点： JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。 当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话， 就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。
10、Javascript如何实现继承？
答案：构造函数继承、原型继承、实例继承、拷贝继承
14、编码取出以下数组中的最大值？
Math.max.apply(null, [1,654,32,54,126,545,16,52,66,10])15、给定以下两个数组，请编码取出ID相同的项？
result = a.filter(item => b.some(val => val.id === item.id))16、写一个方法将以下类型数据处理成树形结构？
方法一：
// 通过两次遍历，将树形结构数据处理完成
// 第一次遍历将所有数据添加到map对象里面 对应的key为对象的id，
// 并给对象添加初始化的children空数组。
// 第二次遍历，判断map对象是否存在数组遍历对象的pid为key的数据，
// 如果存在，将数据插入到map中对应pid对象的children数组里面。
// 难点：灵活运用js中引用类型的数据的引用特性。
// 优点：只需要两次循环就能把树形结构处理完成，性能比较好。
function listToTree(list) {
var map = {},
node, tree = [],
i;
for (i = 0; i < list.length; i++) {
map[list[i].id] = list[i];
list[i].children = [];
}
for (i = 0; i < list.length; i += 1) {
node = list[i];
if (node.parentId !== 0) {
map[node.parentId].children.push(node);
} else {
tree.push(node);
}
}
return tree;
}方法二：
// 根据pid找到对应的子集集合并返回，然后把子集的ID作为递归调用，最后得到需要的树形结构
toTree (arr, pid) {
return arr.filter(item => {
if (item.pid === pid) {
item.children = toTree(arr, item.id);
return true;
}
})
}17、请说明以下代码中各个console.log打印的值，以及原因：
(function () {
console.log(this) // window
console.log(a) // undefined 变量提升
var a = {
b: function () {
console.log(this) // a对象
}
}
a.b()
})()for (var i = 1; i < 10; i++) {
setTimeout(() => {
console.log(i)
}, 0);
}
console.log(i)
// 全都是10var arr1 = [1, 2, 3]
var arr2 = arr1
arr2[0] = 4
console.log(arr1) // 4,2,3
console.log(arr2) // 4,2,3console.log(1)
setTimeout(console.log, 0, 2)
new Promise(resolve => {
console.log(3)
setTimeout(resolve, 0, 4)
}).then(console.log)
console.log(5)
// 1 3 5 2 418、优化以下代码：
var str = "我和我最后的倔强"；
str = str + "握紧双手绝对不放";
str = str + "下一站是不是天堂";
str = str + "就算失望不能绝望";
console.log(str);
var temp = [];
temp.push("我和我最后的倔强")
temp.push("握紧双手绝对不放")
temp.push("下一站是不是天堂")
temp.push("就算失望不能绝望")
console.log(temp.join(''));19、请编写一个函数对以下数组进行随机排序：
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
for (let i = arr.length - 1; i >=0; i--) {
let randomIndex = Math.floor(Math.random() * (i + 1));
[arr[randomIndex], arr[i]] = [arr[i], arr[randomIndex]]
}20、请写出以下代码执行的结果
let arr = [2, 4, 6, 8, 10];
arr.reduce((x, y) => {
return 10 * x + y
})
// 24690