Web前端最全同学刷抖音的间隙，我学会了Vue数据代理与数据劫持的原理(2)，2024年最新Web前端大厂技术面试题汇总

数据结构与算法

这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

• 二叉树层序遍历
• B 树的特性，B 树和 B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 知道的排序算法 说一下冒泡快排的原理
• Heap 排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
• 知道数据结构里面的常见的数据结构
• 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
• 合并两个有序数组
• 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

// 数据data对象

var data = { a: 1 }

// 该data对象被加入到一个 Vue 实例中

var vm = new Vue({

data: data

})

上面的代码一般写成下面的形式：也就是直接在Vue函数中，传入 data 配置对象

const vm = new MVVM({

el: “#root”,

data: {

a: 1

}

})

数据代理的实质是：

1. 利用 Object.defineProperty() 方法，给new出来的Vue实例 vm ，添加和 data 配置项中一模一样的属性和值。

2. 为每一个添加到 vm 上的属性，都指定一个 getter/setter

3. 在 getter/setter 内部去操作（读/写）data 中对应的属性

我们可以在控制台打印 vm ，如下图

可以看到，每一个属性，都有一对 get/set 或 getter/setter方法，这是实现响应式变化的关键。

数据代理用到的Vue构造函数伪代码如下：

function MVVM(options){

// 将选项对象保存到vm

this.$options = options

// 将data对象保存到 vm和 新定义的data变量中

var data = this._data = this.$options.data

// 将vm保存在me变量

var me = this

// 遍历data中所有属性名

Object.keys(data).forEach(function (key){

// 每次遍历，实现当前属性的代理

me._proxy(key)

})

// 对data进行监视

observe(data,this)

// 创建一个用来编译模板的compile对象,用来解析模板以及模板里的指令

this.$compile = new Compile(options.el || document.body, this)

}

MVVM.prototype = {

$watch:function(key,cb,options){

new Watcher(this,key,cb)

},

// 调用_proxy方法，对指定的属性实现代理

// _proxy方法接收一个参数key，即原data对象中每个可枚举的属性的属性名

_proxy:function(key){

// 将vm保存在me变量

var me = this

// 给vm添加指定属性名的属性

Object.defineProperty(me,key,{

configurable:false, //不能再重新定义该属性

enumerable:true, //可以枚举

// 使用vm.name的形式读取属性值时，自动调用get/getter回调函数

get:function proxyGetter(){

return me._data[key]

},

// 使用vm.name = 'XXX’形式，写操作时，自动调用set/setter回调函数

set:function proxySetter(newValue){

me._data[key] = newValue

}

})

}

}

在 new 一个 Vue 实例的时候，会调用上面的构造函数 MVVM ：

构造函数 MVVM 会接收到一个选项对象 options （也叫配置对象），也就是我们上面说的 new Vue 里面的选项对象

{

el: “#root”,

data: {

a: 1

}

}

接收到 options 之后，保存在 this.$options 中。然后将data对象中的属性赋值给 this._data ，为了实现响应式， vm 会对自身 data （注意，这是 vm 自己的 data ）进行修改，也就是通过**Object.defineProperty（）**给每一个属性添加上 getter 和 setter 方法。

表面上，我们是在操作 vm.xxx ，实际上，我们操作的是 vm._data.xxx ，也就是 Vue 选项对象中的 data ，这就是数据代理的本质。

vm的_data中，不只是简单的选项对象中的data

尚硅谷的 Vue 全家桶课程讲解的很棒，我这里粘贴了他们的数据代理图示：

3、好处

使用数据代理，之后我们使用 vm ，访问 Vue 函数中 data 的属性时，直接 this.a 就可以了，不需要使用 this.data.a 。注意，这里的 this，指向的是 vm

三、数据劫持

---

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

e、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

[外链图片转存中…(img-uAR2h9Jx-1715887286507)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】