最近开始找工作了，有些常见的题目分享一下：
HTML
- 如何理解HTML语义化
第一种举例，段落用 p，边栏用 aside，主要内容用 main 标签
第二种
最开始是 PHP 后端写 HTML，不会 CSS，于是就用 table 来布局。table 使用展示表格的。严重违反了 HTML 语义化。
后来有了专门的写 CSS 的前端，他们会使用 DIV + CSS 布局，主要是用 float 和绝对定位布局。稍微符合了 HTML 语义化。
再后来，前端专业化，知道 HTML 的各个标签的用法，于是会使用恰当的标签来展示内容，而不是傻傻的全用 div，会尽量使用 h1、ul、p、main、header 等标签
- meta viewport 是做什么用的，怎么写？
死背：
控制页面在移动端不要缩小显示。
侃侃而谈
一开始，所有页面都是给PC准备的，乔布斯推出 iPhone 3GS，页面是不适应手机屏幕的，所以乔布斯的工程师想了一个办法，默认把手机模拟成 980px，页面缩小。
后来，智能手机普及，这个功能在部分网站不需要了，所以我们就用 meta:vp 让手机不要缩小我的网页。
- canvas元素是干什么的？
mdn canvas
CSS
- 说说盒模型
content-box: width == 内容区宽度
border-box: width == 内容区宽度 + padding 宽度（不管 IE *{box-sizing: border-box;}）
- css reset 和 normalize.css的区别
reset 重置，之前的样式我不要，a{color: red;}，抛弃默认样式
normalize 让所有浏览器的标签都跟标准规定的默认样式一致，各浏览器上的标签默认样式基本统一。
- 如何居中
水平居中：
内联：爸爸身上写 text-align:center;
块级：margin-left: auto; margin-right: auto;
垂直居中： [七种方式实现垂直居中](https://jscode.me/t/topic/1936)
- 选择器优先级如何确定
选择器越具体，优先级越高。 #xxx 大于 .yyy
同样优先级，写在后面的覆盖前面的。
color: red !important; 优先级最高。
- BFC是什么？
* overflow:hidden 清除浮动。（用 .clearfix 清除浮动，坚决不用 overflow:hidden 清除浮动）
* overflow:hidden 取消父子 margin 合并。[http://jsbin.com/conulod/1/edit?html,css,js,output](http://jsbin.com/conulod/1/edit?html,css,js,output) （也可以用 padding-top: 1px;）
- 如何清除浮动？
1. overflow: hidden;( 即生成一个BFC,不推荐）
2. .clearfix 清除浮动写在爸爸身上
.clearfix:after {
content: '';
display: block;
clear: both;
}
.clearfix{
zoom: 1; /* IE 兼容 */
}
JS
- JS有哪些数据类型？
string number bool undefined null object symbol
object 包括了数组、函数、正则、日期等对象
一旦出现（数组、函数、正则、日期、NaN）直接0分
- Promise怎么使用？
then
$.ajax(...).then(成功函数, 失败函数)
链式调用
$.ajax(...).then(成功函数, 失败函数).then(成功函数2, 失败函数2)
如何自己生成 Promise 对象
function xxx(){
return new Promise(function(resolve, reject){
setTimeout(()=>{
resolve() 或者 reject()
},3000)
})
}
xxx().then(...)
- Ajax手写一下？
// Ajax
function ajax (method,url,resolve) {
let xhr = new XMLHttpRequest()
xhr.open(method,url)
xhr.onreadystatechange = function () {
if(xhr.readyState === 4) {
if(xhr.status === 200 || xhr.status === 304) {
resolve(xhr.response)
}
}
}
xhr.send()
}
let resolve = (str) => {
console.log(str)
}
ajax('GET','/api/xxx',resolve)
- 闭包是什么？
// 闭包
let n = 0
function wrapper () {
let n = 0
function inner () {
n += 1
console.log('inner n: ' + n)
}
return inner
}
let res = wrapper()
res()
res()
console.log('outer n: ' + n) // 作用是，提供一种间接访问局部变量的方法，而不是直接访问
- 这段代码的this是什么？
fn() 里面的 this 就是 window
fn() 是 strict mode，this 就是 undefined
a.b.c.fn() 里面的 this 就是 a.b.c
new F() 里面的 this 就是新生成的实例
() => console.log(this) 里面 this 跟外面的 this 的值一模一样
let obj = {
fn1: {
fn2: {
fn3() {
console.log(this)
}
}
}
}
obj.fn1.fn2.fn3()//obj.fn1.fn2 obj.fn1.fn2.fn3.call(obj.fn1.fn2)
- 什么是立即执行函数？
立即执行函数模式是一种语法，可以让你的函数在定义后立即被执行
目的是：造出一个函数作用域，防止污染全局变量。（可以采用es6）
- async/await 语法了解程度？
function returnPromise () {
return new Promise ((resolve,reject) => {
setTimeout(()=>{
resolve('asdfhkj')
},2000)
})
}
// returnPromise().then( (msg) => { then写法
// console.log(msg)
// return msg
// })
async function result () { // async 写法 将异步写成同步
let res = await returnPromise()
console.log(res)
}
result()
- 如何实现深拷贝？
1. JSON.parse( JSON.stringify() )实现
var a = {...}
var b = JSON.parse( JSON.stringify(a) )
2. 递归
var oldObj = {
name: 'deejay',
age: 20,
friend: {
name: 'dee',
age: 20,
}
}
function deepCopy (oldObj) {
var newObj = {}; //创建一个地址不同的新对象
for (var key in oldObj) { //遍历oldObj中的所有属性
if (oldObj.hasOwnProperty(key)) { // 针对自身拥有的定义的属性进行拷贝
if (typeof oldObj[key] === 'string' || typeof oldObj[key] === 'number' || typeof oldObj[key] === 'boolean'
|| oldObj[key] === null || oldObj[key] === undefined) { //完整的判断是否嵌套的条件
newObj[key] = oldObj[key];
}
else { // 不是上面判断的条件，即为嵌套的属性，通过递归进行拷贝
newObj[key] = deepCopy(oldObj[key]);
}
}
}
return newObj;
}
var newObj = deepCopy(oldObj);
console.log(newObj);
newObj.age++;
console.log(oldObj.age); //20 newobj的age增加，oldobj的age仍然不变
newObj.friend.age++;
console.log(oldObj.friend.age); // 20 newobj中的friend中的age增加，oldObj仍然不变，newObj和oldObj是相互独立的
// 不管有多少层嵌套的属性，都是相互独立的，即为深拷贝
- 如何实现数组去重？
1. Set
let newArr = Array.from(new Set(arr));
2. indexOf
function unique1 (arr) {
// indexOf
var newArr = []
for (var i = 0; i < arr.length; i ++ ) {
if (newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i])
}
}
return newArr
}
var newArr1 = unique1(arr)
console.log(newArr1)
- 如何使用正则实现String.trim()
function trim(string){
return string.replace(/^\s+|\s+$/g, '')
}
- JS原型是什么？
- ES6 class了解么？
- JS如何实现继承？
- ==题目
DOM
- DOM事件模型是什么？
- 移动端touch事件了解一下？
- 事件委托是什么？有什么好处？
HTTP
- HTTP状态码知道哪些？
- 301和302的区别是什么？
- HTTP缓存怎么做？
- Cache-Control和Etag的区别？
- Cookie是什么？Session是什么？
- LocalStorage和Cookie的区别？
- GET和POIST的区别？
- 怎么跨域？JSONP是什么？CORS是什么？postMessage是什么？
Vue
- Vue的生命周期钩子函数？
- Vue如何实现组件通信？
- Vuex的作用是什么？
- VueRouter路由是什么？
- Vue的双向绑定怎么实现的？
算法
- 排序（冒泡，快排，选择，技术，插入，归并）
- 二分查找法
- 反转二叉树
安全方面
- XSS是什么？如何预防？
- 什么是CSRF攻击，如何预防？
webpack
- 转译出的文件过大怎么办？
- 转移速度慢怎么办？
- 写个webpack loader？
奇葩面试题
[1,2,3].map(parseInt)
a.x = a = {}
var a = {n: 1}
var b = a
a.x = a = {n:2}
问a.x是多少？
-
(a == 1 && a== 2 && a ==3 )可能为true么？