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

今天药忘吃喽~ 2022-12-07 15:14 117阅读 0赞

## 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][https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_7]

## 4. MVVM的理解-Vue ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhMzkwNDgxOTc4_size_16_color_FFFFFF_t_70_pic_center]

*  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算法，计算出需要更新的部分后再进行局部/全部视图更新操作

[https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_7]: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhMzkwNDgxOTc4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/43d6507d0f3f49d79546cc33c8eb400c.png