前端面试javascript要点简述（下）

1.常用ES6功能

• let/const
• 箭头函数
• 函数参数默认值
• 块级作用域
• 解构
• […] {…} 扩展运算符...
• ``${x}` 反引号 多行字符串/模板变量

2.数组和对象的拷贝

2.1 浅拷贝

浅拷贝就是直接使用=号，拷贝的是对象引用，共享数据。即更改新对象的值，旧对象也随之更改。因为是同一个引用。

2.2 深拷贝

• 使用JSON对象，前提是不拷贝函数

let jsonStr = JSON.stringify(originObject);
let jsonObj = JSON.parse(jsonStr);

• 使用递归

function deepCopy(originObject) {
  let resultObject = originObject instanceof Array ? [] : {};
  for (const key in originObject) {
    if (originObject.hasOwnProperty(key)) {
      if (typeof originObject[key] === 'object') {
        resultObject[key] = deepCopy(originObject[key])
      } else {
        resultObject[key] = originObject[key]
      }
    }
  }
  return resultObject;
}
// 注意: 没有加上null值的判断，因为 typeof null == 'object'

2.3 第一层深拷贝

第一层深拷贝有其他叫法是首层浅拷贝。就是对象的第一层是深拷贝，第二层或以上的值如果是引用类型则浅拷贝，拷贝的是对象的引用。

数组常用的方法有 slice concat [...arr]
对象常用的方法有 Object.assign({}, sorceObject) {...sourceObject}

3. 异步

3.1 单线程

在同一时间，只做一件事情。

为什么js是单线程？
因为避免和浏览器同时操作DOM，引起渲染冲突。因此js的执行会阻塞浏览器渲染。

异步就是单线程的解决方案

3.2 Promise的使用

• Promise的基本使用
• Promise的3种状态 pending fulfilled rejected
• Promise.all Promise.race的使用与区别

3.3 async/await的使用

3.4 event loop 事件轮询

如何理解JS的异常中的事件轮询event loop：
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7

4. MVVM的理解-Vue

• M = Model
• V = View
• VM = ViewModel

vm就是model和view的桥梁。view通过vm来更改数据model，而model得用vm来渲染界面view

5. Vue实现的流程

5.1 Vue的三要素

1. 模板引擎
2. 响应式
3. render渲染

5.2 实现流程

1. 解析模板成render函数
   将模板html包括事件、业务逻辑进行编译、解析成render函数，render函数最终返回的是vnode，vnode是一个json对象，包括了html的组成、数据和事件的绑定等所有信息。
2. 响应式监听
   Vue 2.x使用object.defineproperty()进行data数据劫持，代理到vm实例上，同时产生get() set()2个方法对数据进行get和set的监听
3. 首次渲染和相关绑定
   在首次渲染时使用vdom库的path方法，接收2个参数(容器，vnode)实现首次渲染以及事件和data中get的监听绑定
4. data数据变更，rerender更新视图
   data数据变更，触发set监听事件，进行updateCopoment()更新视图，同样是调用path方法，接收2个参数(oldVnoe，newVnode)，过程用会执行diff算法，计算出需要更新的部分后再进行局部/全部视图更新操作