AwesoLynn

接前端面经总结（六）

Vue中computed和watch区别

1. computed是计算属性，只有依赖数据发生改变才会重新计算。watch是监听属性，数据遍直接会触发相应的操作

2. computed不支持异步。watch支持异步

3. computed多用于多对一或一对一，即属性由其他属性计算而来时的情况。watch多用于一对多的情况，即当一个属性变化时，需要执行对应的操作

4. computed属性在getter执行后默认走缓存，它基于响应式依赖进行缓存，即基于data声明或父组件传递的props中的数据通过计算后得到的值。只有当它依赖的属性值改变后，下一次获取computed的值时才会重新调用getter计算。

5. watch监听的函数接收两个参数，最新的值newVal和输入之前的值oldVal。在每次监听的值变化时，都会执行回调。当数据变化时，触发的函数有两个参数，immediate表示组件加载立即触发回调函数执行，deep为深度监听，为了发现对象内部值的变化，为复杂类型的数据时使用。如数组中对象内容的改变，但deep无法监听数组变动。

   阅读更多...

接前端面经总结（六）

事件循环

事件循环是为了解决js单线程运行阻塞的问题而产生。在js中所有任务可以分为同步任务(立即执行的任务，一般直接进入主线程中执行)和异步任务(如ajax/setTimeout等)。

同步任务进入主线程(主执行栈)，异步任务进入任务队列，主线程内任务执行完毕为空，则去任务队列读取对应的任务，推入主线程执行，以上不断重复的过程即为事件循环。

宏任务/微任务

接前端面经总结（五）

SetTimeout循环输出数组

题目：

1
2
3
4
5
6

for (var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    },0);
}
console.log(i)

由于var不是块级作用域，为全局作用域。setTimeout为异步操作，故每次执行循环，将setTimeout放入执行队列中，等全局i执行到5结束循环了再从队列中取出5次setTimeout执行，由于var i = 0全局可用，故最终输出6个5，5次setTimeout，1次全局console.log(i)

接前端面经总结（四）

Vue

Vue是一个渐进性框架，可以把一个页面分割成多个组件，当其他页面有类似功能时，直接让封装的组件复用。Vue是构建页面的声明式框架，不关心具体实现，只关心图层

v-model原理

绑定数据并监听数据改变。初始化时使用Object.defineProperty/Proxy（2.0/3.0）重新定义data中属性，当页面使用对应属性时，手机当前组件的watcher，若属性变化则通知相关依赖进行更新操作。

Object.defineProperty缺点

接前端面经总结（三）

JavaScript

typeof和instance of区别

二者都用来判断变量是否为空

• typeof返回值为字符串，说明变量的数据类型

• instanceof判断变量是否属于某个对象的实例。判断逻辑为从当前引用的proto一层一层顺着原型链向上找，若能找到对应的prototype则返回true

深拷贝/浅拷贝

• 浅拷贝：只是拷贝了基本类型的数据，而引用类型数据，复制后也会发生引用。即浅拷贝仅指向被复制的内存地址，若原地址对象改变，则复制后的对象也相应改变。

  阅读更多...

一种线性结构表，数据元素在内存中分散存储，采用链式表示结构，即链表。

顺序表的存储结构是逻辑位置和物理位置都相邻，但链表是逻辑位置相邻，物理位置不一定相邻，且不能随机存取，但在插入和删除时，不需要移动元素。

链表存储结构由结点组成，每个结点包括一个数据域和一个指针域（指向下一个后继元素的地址）。除单链表外还有循环链表和双向链表，循环链表的最后一个结点的指针指向头结点，形成环。双向链表多了一个指向前驱元素的指针。

从尾到头打印链表

输入一个链表的头节点，从尾到头反过来返回每个节点的值（用数组返回）。

接前端面经总结（二）

CSS

盒模型

用来装页面上的元素的矩形区域。包括IE盒子模型和标准W3C盒子模型

盒模型包含4层，content/padding/border/margin

区别

请实现一个函数用来判断字符串是否表示数值（包括整数和小数）。

数值（按顺序）可以分成以下几个部分：

• 若干空格

• 一个小数或者整数

• （可选）一个e或E，后面跟着一个整数

• 若干空格

  阅读更多...

数组中只出现一次的两个数字

一个整型数组里除了两个数字只出现一次，其他的数字都出现了两次。请写程序找出这两个只出现一次的数字。

示例

1
2
3
4
5
6
7
8

输入：
[1,4,1,6]

返回值：
[4,6]

说明：
返回的结果中较小的数排在前面

js基本类型

基本类型：string null undefined number boolean symbol（es6引入）复杂类型：object array date regexp function 基本包装类型：boolean number string 单体内置对象：global math

数组flat方法

es6数组交换