2020前端开发面试准备（一）

HTML 语义化就是选择正确的标签描述正确的内容：段落就写 p 标签，标题就写 h1 标签，文章就写article标签，视频就写video标签，等等。

**语义化的HTML有什么优点：**

• 有利于浏览器解析，搜索引擎抓取
• 让页面内容结构化，在没有css的情况下也能以一种文档格式存在，易于阅读
• 便于后期阅读和维护

ES6新特性

1. 新增变量const和let，const定义常量，let不会变量提升

2. 模板字符串，``表示一段模板字符串，变量使用${}

3. 箭头函数，var sum = (a,b) => a+b

4. 函数参数默认值设置，之前用”||”，现在用“=”赋值

5. 字符串API扩展。includes() : 返回布尔值，表示是否找到了参数字符串;startsWith() : 返回布尔值，表示参数字符串是否在原字符串的头部;endsWith() : 返回布尔值，表示参数字符串是否在原字符串的尾部。

6. 数组/对象的解构，按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构。

7. 数组新增了map()和reduce()方法 。map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。reduce()会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数。

8. 扩展运算符(...)，将一个数组转为用逗号分隔的参数序列

9. Promise ，就是一个用来传递异步操作消息的对象，可以实现无阻塞高并发，解决地狱回调。Promise有pending未完成，fulfilled操作成功，rejected操作失败3种状态。Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 方法和 reject 方法。 如果异步操作成功，则用 resolve 方法将 Promise 对象的状态，从「未完成」变为「成功」（即从 pending 变为 fulfilled）； 如果异步操作失败，则用 reject 方法将 Promise 对象的状态，从「未完成」变为「失败」（即从 pending 变为 rejected）。  Promise状态发生改变，就会触发then()里的响应函数处理后续步骤。如果想要处理promise异步执行失败的事件，还可以跟上catch()。

10. 集合Set和Map的数据结构。Set，本质与数组类似。不同在于Set中只能保存不同元素，如果元素相同会被忽略。map，本质是与Object类似的结构。不同在于，Object强制规定key只能是字符串。而Map结构的key可以是任意对象即：object 是 <string,object>集合 ；map 是<object,object>集合。

11. class（类），js传统方法是通过构造函数定义并生成类，ES6引入 class 的概念，通过 class 关键词自定义类。通过extends关键字实现类的继承。

12. Generator函数，Generator 函数是 ES6 提供的 一种异步编程解决方案 ，有两个特征: 一是 function命令与函数名 之间有一个星号: 二是 函数体内部使用 yield语句定义不同的 内部状态。

13. for...of 循环，通过for...of可以循环遍历Generator函数返回的迭代器。for...of遍历的是值，for...in遍历的是索引

14. 模块化

模块化就是把代码进行拆分，方便重复利用。

 模块功能主要是由两个命令构成：export 和 import 。 

• export：用于规定模块的对外接口
• import：用于导入其他模块提供的功能

DOM操作相关

1、通过以下代码创建节点

• createDocumentFragment()    //创建一个DOM片段
• createElement()    //创建一个具体的元素 
• createTextNode()    //创建一个文本节点

2、添加、移除、替换、插入节点

• appendChild()
• removeChild()
• replaceChild()
• insertBefore()

3、通过以下方式查找节点

• getElementById()
• getElementsByTagName()
• getElementsByName()

4、什么是事件代理（事件委托）？

事件代理（事件委托），是JS中绑定事件的常用技巧。就是把原本需要绑定的事件委托给父元素，让父元素负责事件监听。原理是DOM元素的事件冒泡。

事件委托的好处：

• 减少事件注册，提高性能* 新增元素实现动态绑定事件

实现：

• addEventListener(); //所有主流浏览器，除了IE8及更早IE版本

• attachEvent();     //IE8及IE更早版本

5、什么是事件流？

当一个事件发生时，这个事件的传播过程就是事件流。

6、什么是事件冒泡？

IE中的事件流就叫做事件冒泡。事件冒泡是由事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。对于HTML来说当以一个元素产生一个事件时，它会把这个事件传递给它的父元素，父元素接收到之后，还要传递给它上一级的元素，就这样一直传播到document对象。

7、如何阻止冒泡？

function stopBubble(e){
  var event = e ||window.event;
  event.stopPropagation ? event.stopPropagation():(event.cancelBubble = true);
}

function foo(){
  var local = 1
  function bar(){
    local++
    return local
  }
  return bar
}

var func = foo()
func()
// local 变量和 bar 函数就组成了一个闭包（Closure）