【自种树自乘凉】前端高频知识点 - 面向面试复习法

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战vue

是时候寄出失传已久的——面向面试复习法！es6

目录：面试

HTML篇

CSS篇

JS篇

DOM篇

HTTP篇

Vue2篇

安全篇

浏览器兼容篇

一. HTML 篇

1. 什么是 HTML 语义化？

答：就是使用恰当语义的 HTML 标签，好比段落用 <p>，边栏用 <aside>，主要内容用 <main>，页眉用 <header>，这样能让人和机器都能快速理解网页内容。ajax

2. meta viewport 是作什么用的，怎么写？

写法：<meta name="viewport" content="width=device-width, initial-scale=1.0">正则表达式

用处：控制页面在移动端不要缩小显示。canvas

3. 你用过哪些 HTML5 标签？

答：内容相关的有页眉 <header>，内容 <main>，边栏 <aside>，脚注 <footer> 等。跨域

功能相关的有 <canvas>，<video> 等。数组

4. H5 是什么？

答：H5 != HTML5，H5是移动端页面，不是必定要用了 HTML5 语法的页面才是 H5。promise

二. CSS篇

1. 说一说两种盒模型

答：content-box（W3C盒模型）的宽度 == 内容区宽度浏览器

border-box（IE盒模型）的宽度 == 内容区宽度 + padding 宽度 + border 宽度

经过 box-sizing 属性切换两种盒模型

2. 如何水平居中？如何垂直居中？

水平居中：

内联元素水平居中：在父元素上设置 text-align : center;
块级元素水平居中：margin : 0 auto;

垂直居中：

CSS 实现垂直水平居中

3. Flex 怎么用？常见的属性有哪些？

Flexbox 弹性布局总结

4. BFC 是什么？

答：BFC 就是块格式化上下文。

举例：若是给一个 div 写一个 overflow: hidden;（清除浮动）那么这个div里面的浮动元素就会被 div 包裹起来。

BFC造成的条件：

浮动
绝对定位、固定定位
overflow 除了默认值（visible）之外的值：hidden、auto、scroll
display : inline-block
等等

5. CSS 选择器优先级？

权重法（CSS2）：行内样式是1000 > id选择器是100 > 类选择器是10 > 元素选择器是1

更准确的判断法（CSS3）：

选择器越具体（权重之和越大）优先级越高
写在后面的 CSS 覆盖前面的 CSS
!important 优先级最高，可是建议少用。

6. 清除浮动的代码？

父元素添加以下代码，里面的子元素就清除浮动了：

.clearfix::after {
  content: ""; // 空串
  display: block; // 显示为块级元素
  clear: both; // 清除两侧浮动的影响
}

.clearfix {
     zoom: 1; // IE兼容
 }
复制代码

或者直接：overflow: hidden; 但不建议用这个。

三. JS 篇

1. ES6 语法知道哪些？怎么用？

ES6 新特征总结

2. Promise 分别怎么用？

Promise 的用法之 then 的用法：

$.ajax(...).then(成功函数, 失败函数)

链式 then 的用法：

$.ajax(...).then(成功函数1, 失败函数1).then(成功函数2, 失败函数2)

其余方法，例如 Promise.all、Promise.race，建议直接通读：

ES6 标准入门 - Promise 篇 - 阮一峰

3. 如何本身生成 Promise 对象

// 背代码咯
function fn(){
  return new Promise(function(resolve, reject) {
    setTimeout(() => {
      // resolive() 或者 reject()
    }, 3000)
  })
}

// 而后咱们就能够 then 了
fn().then(...)
复制代码

4. async/await 语法了解吗？目的是什么？

目的：把异步代码写成同步代码

// 老的写法（异步）：
function fn() {
  return new Promise(function(resolve, reject) {
    setTimeout(() => {
      resolive('哈哈哈')
    }, 3000)
  })
}

fn().then((res) => {
  res === '哈哈哈' // true
})

// 新的写法（同步）：
async function fn2() {
  var res = await fn();
  res === '哈哈哈' // true
}
复制代码

5. 手写函数防抖和函数节流

节流函数

能够把它理解成游戏中的CD冷却时间，当技能在冷却时间内的时候，咱们就不能使用该技能。

function fn() {
  // 游戏技能
}

var cd  = false; // 是否冷却中

button.onclick = function() {
  if (cd) {
    // 不能使用技能
  } else {
    fn(); // 使用技能
    cd = true; // 进入冷却时间
    var timerId = setTimeout(() => {
      cd = false
    }, 3000) // 3秒后技能才可用
  }
}
复制代码

防抖函数

咱们想象一个情景：当用户输入一段数据后咱们要去对数据进行验证，可是若是不间断的进行验证会浪费咱们的计算机资源。因此咱们就想等用户输入数据后，2s 后才进行验证，若 2s 间用户更新了输入的数据，那么 2s 将从新计时。

function fn() {
  // 要执行的代码
}

var timerId = null;

button.onclick = function() {
  if (timerId) {
    clearTimeout(timerId); // 中止以前的计时
  }
  timerId = setTimeout(() => { // 从新计时
    fn();
    timerId = null;
  }, 2000)
}
复制代码

6. 手写 Ajax

Ajax 简单入门

7. 代码中的 this 指向什么？

fn() 里面的 this 就是 window
obj.fn() 里面的 this 就是 obj
new Fn() 里面的 this 就是新生成的对象
() => {} 里面的 this 跟这个箭头函数外面的 this 同样
fn.call(xx) 里面的 this 就是 xx
fn.apply(xx) 里面的 this 就是 xx
fn.bind(xx) 里面的 this 就是 xx

举例：

var obj = {
  foo: function() {
    console.log(this)
  }
}

var bar = obj.foo
obj.foo() // 打印出的 this 是 obj
bar() // 打印出的 this 是 window
复制代码

8. 闭包是什么？当即执行函数是什么？

闭包

9. 什么是跨域？什么 JSONP？什么是 CORS？

跨域

10. JS 有哪些数据类型？

答：String, Number, Boolean, null, undefined, Symbol, BigInt 共 7 种基础数据类型，外加一种引用类型：Object。

11. 如何实现深拷贝？

JSON法（缺点多，好比 a 里面不能有函数）：

var a = {...}
var b = JSON.parse(JSON.stringify(a))
复制代码

递归拷贝法：

function clone(obj) {
  if(Array.isArray(obj)){
    var copy = [];
  }else{
    var copy = {};
  }
  for (let i in obj) {
    if (obj.hasOwnProperty(i)) {
      copy[i] = typeof obj[i] === 'object' ? clone(obj[i]) : obj[i];
    }
  }
  return copy;
}
复制代码

环：

// 不会
复制代码

12. 如何实现数组去重

Set 去重：

var a = [3, 4, 6, 3, 5, 4]
Array.from(new Set(a)) // [3, 4, 6, 5]

[...new Set(a)] // ES6 语法下的 Set 去重
复制代码

笨办法：

// 使用双重循环，每次从原数组中提取一个数据和新数组中已有数据比较
复制代码

13. 用正则表达式实现 string.trim()

function trim(string) {
  return string.replace( /^\s+|\s+$/ ,'');
}
复制代码

14. 原型？原型继承？Class 继承？

初识JS原型/原型链/原型继承

15. 有关 == 的问题（送命题）

例：( a==1 && a==2 && a==3 ) 可能为 true 吗？

答：可能。

例：null == undefined？

答：true

16. 手写一个 Promise（送命题）

// 谷歌一下
复制代码

四. DOM 篇

1. DOM 事件模型是什么？

回答什么是冒泡和捕获便可。

2. 事件委托是什么？好处是什么？

答：不直接监听子元素，而是监听父元素，只须要在监听后判断是哪一个“儿子”触发的事件。

好处：一次监听全部“儿子”，那怕是后面动态生成的“儿子”，也能被监听。

五. HTTP 篇

HTTP 常见状态码

六. Vue2 篇

1. 生命周期

答：created（在实例建立完成后被当即调用）、mounted、updated 、destroyed（Vue 实例销毁后调用）等生命周期钩子函数。

2. 组件间通讯

答：父子通讯（使用 Prop 传递数据、使用 v-on 绑定自定义事件），兄弟通讯（new Vue() 做为 Bus 或者 Vuex），爷孙通讯（能够爷爷—>爸爸—>儿子依次通讯，也能够只用采用 Vuex 状态管理器等方案）

3. 数据响应式是什么原理

简单总结版：当把一个 JS 对象传入 Vue 实例做为 data 选项时，Vue 将遍历这个对象的全部属性，并使用 Object.defineProperty() 把这些属性所有转化为 getter/setter。这些 gettet/setter 对用户来讲是不可见的，可是在内部它们让 Vue 能够追踪依赖，在属性被修改时通知变动。

4. computed 和 methods 和 watch 区别是什么？

计算属性 vs 方法：

二者不一样的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会从新求值。
每当触发从新渲染时，调用方法将总会再次执行函数。

计算属性 vs 侦听器

使用 watch 选项容许咱们执行异步操做 (访问一个 API)，限制咱们执行该操做的频率，并在咱们获得最终结果前，设置中间状态。这些是计算属性没法作到的。

5. Vue.set 是作什么用的？

答：向响应式对象中添加一个属性，并确保这个新属性一样是响应式的，且触发视图更新。若是采用普通的方法向对象中添加属性，那么这个新增属性不会是响应的。

6. Vuex 做用是什么？你会怎么用？

答：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

我若是开发一个博客，我会将用户"是否登陆"这个状态放入到 Vuex 中，供全部组件访问和修改。

7. VueRouter 是什么？你会怎么用？

答：它是 vue.js 官方的路由管理器，它让咱们构建单页面应用变得很简单。

我在作一个单页面应用，但想要实现多页效果的时候，我会把一个个页面对应为一个个的组件，而后用路由来管理它们，这样就实现了单页面应用。

七. 安全篇

1. 什么是 XSS？如何预防？

名称：跨站脚本攻击
举例：经过客户端脚本语言，在一个论坛发帖中发布一段恶意的 JavaScript 代码就是脚本注入，若是这个代码内容有请求外部服务器，那么就叫作XSS！
预防：过滤尖括号、script 等特殊字符（把 < 替换成 <）

2. 什么是 CSRF？如何预防？

名称：跨站请求伪造
举例：冒充用户发起请求（在用户不知情的状况下）,完成一些违背用户意愿的请求（如恶意发帖，删帖，改密码，发邮件等）。
预防：添加图片验证码、短信验证码；进行 token 校验

八. 浏览器兼容篇

浏览器默认的 margin 和 padding 不一样。解决方案：加一个全局的 *{margin:0;padding:0;} 来统一。
上下 margin 重合问题：IE 和 ff 都存在，相邻的两个 div 的 margin-left 和 margin-right 不会重合，可是 margin-top 和 margin-bottom 却会发生重合。