每日十题金三银四面试题（五）

小鱼儿 2022-11-04 14:22 156阅读 0赞

一、快速排序（算法）

参考解答：

算法步骤如下：

1. 从数列中挑出一个元素，称为 “基准”（pivot）;
    2. 重新排序数列，所有元素比基准值小的摆放在基准前面，所有元素比基准值大的摆在基准的后面（相同的数可以到任一边）。在这个分区退出之后，该基准就处于数列的中间位置。这个称为分区（partition）操作；
    3. 递归地（recursive）把小于基准值元素的子数列和大于基准值元素的子数列排序；
    递归的最底部情形，是数列的大小是零或一，也就是永远都已经被排序好了。虽然一直递归下去，但是这个算法总会退出，因为在每次的迭代（iteration）中，它至少会把一个元素摆到它最后的位置去。

二、说一下 vue 组件之间的传值通信

参考解答：

组件传值可分为父子组件传值和非父子组件传值（兄弟组件传值）

1.  父组件给子组件传值：使用props  
    
2.  子组件给父组件传值：使用$emit触发事件
3.  兄弟组件：使用Bus.js, 两个组件引入同一个Bus.js

使用vuex可以处理上述情况的传值问题。

四、说说 Vue 双向绑定的原理

参考解答：

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

*  当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 都加上 setter和getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
 *  compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
 *  Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: 1、在自身实例化时往属性订阅器(dep)里面添加自己 2、自身必须有一个update()方法 3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
 *  MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果

节选自: https://juejin.cn/post/6844903858804621325

五、介绍下虚拟 DOM，对虚拟 DOM 的理解

参考解答：

我对Virtual DOM 的理解：

首先对我们准备插入文档中的DOM树结构进行分析，使用js对象数据类型表示出。Virtual DOM 算法是有三个核心实现。一是用JS对象模拟DOM树，可以理解组合VNode。二是diff算法，比较新旧VNode的差异。三是打补丁patch，将差异应用到真正的DOM树上。

六、谈谈你对 webpack 的看法

参考解答：

我认为webpack的主要原理是将所有的资源都看成一个模块，并且把页面逻辑当成一个整体，通过给定入口文件，找到所有依赖，将各个依赖经过loader和plugins处理后，打包在一起，最后输出浏览器可识别的js文件。

webpack的核心概念：

*  **Entry**: 入口文件，Webpack 会从该文件开始进行分析与编译；
 *  **Output**: 出口路径，打包后创建 bundler 的文件路径以及文件名；
 *  **Module**: 模块，在 Webpack 中任何文件都可以作为一个模块，会根据配置的不同的 Loader 进行加载和打包；
 *  **Chunk**: 代码块，可以根据配置，将所有模块代码合并成一个或多个代码块，以便按需加载，提高性能；
 *  **Loader**: 模块加载器，进行各种文件类型的加载与转换；
 *  **Plugin**: 拓展插件，可以通过 Webpack 相应的事件钩子，介入到打包过程中的任意环节，从而对代码按需修改；

七、手写一个Promise

参考解答：

八、手写一个观察者模式

参考解答：

九、手写一个jsonp

参考解答：

十、实现一个浅拷贝和一个深拷贝

参考解答：

// 浅拷贝的实现;
    
    
    function shallowCopy(object) {
      // 只拷贝对象
      if (!object || typeof object !== "object") return;
    
    
      // 根据 object 的类型判断是新建一个数组还是对象
      let newObject = Array.isArray(object) ? [] : {};
    
    
      // 遍历 object，并且判断是 object 的属性才拷贝
      for (let key in object) {
        if (object.hasOwnProperty(key)) {
          newObject[key] = object[key];
        }
      }
    
    
      return newObject;
    }
    
    
    // 深拷贝的实现;
    
    
    function deepCopy(object) {
      if (!object || typeof object !== "object") return;
    
    
      let newObject = Array.isArray(object) ? [] : {};
    
    
      for (let key in object) {
        if (object.hasOwnProperty(key)) {
          newObject[key] =
            typeof object[key] === "object" ? deepCopy(object[key]) : object[key];
        }
      }
    
    
      return newObject;
    }

备注：解答仅供参考，如需了解更多，可自行搜索相应问题。

参考链接：https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/JavaScript/JavaScript.md

![57b896321ae24972d250084bf5a28497.png][]

[57b896321ae24972d250084bf5a28497.png]: /images/20221023/0512b71ea0b04e25950a52e5a5c8bb71.png