面试知识点的总结

最近开始找工作了，有些常见的题目分享一下：

#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;

垂直居中：七种方式实现垂直居中

4. 选择器优先级如何确定

选择器越具体，优先级越高。 #xxx 大于 .yyy 同样优先级，写在后面的覆盖前面的。 color: red !important; 优先级最高。

5. BFC是什么？

overflow:hidden 清除浮动。（用 .clearfix 清除浮动，坚决不用 overflow:hidden 清除浮动）
overflow:hidden 取消父子 margin 合并。http://jsbin.com/conulod/1/edit?html,css,js,output （也可以用 padding-top: 1px;）

6. 如何清除浮动？

overflow: hidden;( 即生成一个BFC,不推荐）
.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()

如何实现深拷贝？ ```
JSON.parse( JSON.stringify() )实现 var a = {...} var b = JSON.parse( JSON.stringify(a) )

递归 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是相互独立的 // 不管有多少层嵌套的属性，都是相互独立的，即为深拷贝 ```

如何实现数组去重？ ```
Set let newArr = Array.from(new Set(arr));
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么？

一些知识点的总结

webpack