CSDN话题挑战赛第1期

• 活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f

• 参赛话题：前端面试宝典

• 话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
  总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！

• 创作模板：

携手共筑前端面试宝典

• 👉 题目一
• • > 考点
  • > 答案
• 👉 题目二
• • > 考点
  • > 答案
• 👉 题目三
• • > 考点
  • > 答案
• 👉 题目四
• • > 考点
  • > 答案
• 👉 题目五
• • > 考点
  • > 答案

👉 题目一

了解过 vue 中的 diff 算法吗？说说看

> 考点

什么是 diff 算法？ diff算法比较方式？

> 答案

diff 算法是一种通过同层的树节点进行比较的高效算法

其有两个特点：

① 比较只会在同层级进行, 不会跨层级比较
② 在diff比较的过程中，循环从两边向中间比较

diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成 真实 dom 的新旧 VNode 节点比较

diff整体策略为：深度优先，同层比较

• 比较只会在同层级进行, 不会跨层级比较;
• 比较的过程中，循环从两边向中间收拢;

👉 题目二

说说你对闭包的理解？闭包使用场景

> 考点

闭包的概念、闭包的使用场景

> 答案

闭包概念

闭包指的是 一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）

也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域

在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来，作为函数内部与外部连接起来的一座桥梁

案例如下：

function init() {var name = "Mozilla"; // name 是一个被 init 创建的局部变量function displayName() { // displayName() 是内部函数，一个闭包alert(name); // 使用了父函数中声明的变量}displayName();}init();

displayName() 没有自己的局部变量。然而，由于闭包的特性，它可以访问到外部函数的变量

使用场景
任何闭包的使用场景都离不开这两点：

• 创建私有变量
• 延长变量的生命周期

一般函数的词法环境在函数返回后就被销毁，但是闭包会保存对创建时所在词法环境的引用，即便创建时所在的执行上下文被销毁，但创建时所在词法环境依然存在，以达到延长变量的生命周期的目的

案例如下

function makeSizer(size) {  return function() {    document.body.style.fontSize = size + 'px';  };}var size12 = makeSizer(12);var size14 = makeSizer(14);var size16 = makeSizer(16);document.getElementById('size-12').onclick = size12;document.getElementById('size-14').onclick = size14;document.getElementById('size-16').onclick = size16;

涉及场景还是挺多的，例如比较出名的：柯里化函数。在此不做延伸，有需要的可以去百度相关知识。

👉 题目三

什么是 JavaScript原型，原型链 ? 有什么特点？

> 考点

JavaScript原型、原型链的理解 及 其特点

> 答案

JavaScript原型

JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象

当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾

准确地说，这些属性和方法定义在Object的构造器函数（constructor functions）之上的prototype属性上，而非实例对象本身

下面举个例子：

函数可以有属性。 每个函数都有一个特殊的属性叫作原型prototype

function doSomething(){}console.log( doSomething.prototype );

控制台输出

{    constructor: ƒ doSomething(),    __proto__: { constructor: ƒ Object(), hasOwnProperty: ƒ hasOwnProperty(), isPrototypeOf: ƒ isPrototypeOf(), propertyIsEnumerable: ƒ propertyIsEnumerable(), toLocaleString: ƒ toLocaleString(), toString: ƒ toString(), valueOf: ƒ valueOf()    }}

上面这个对象，就是大家常说的原型对象

JavaScript原型链

原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype chain)，它解释了为何一个对象会拥有定义在其他对象中的属性和方法

在对象实例和它的构造器之间建立一个链接（它是__proto__属性，是从构造函数的prototype属性派生的），之后通过上溯原型链，在构造器中找到这些属性和方法。

👉 题目四

说说你对SPA（单页应用）的理解?

> 考点

SPA是什么？ 有何作用？

> 答案

SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面。

举个例子来讲就是一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶，我们发现，变的始终是杯子里的内容，而杯子始终是那个杯子结构如下图

单页应用优缺点

优点：

• 具有桌面应用的即时性、网站的可移植性和可访问性
• 用户体验好、快，内容的改变不需要重新加载整个页面
• 良好的前后端分离，分工更明确

缺点：

• 不利于搜索引擎的抓取
• 首次渲染速度相对较慢

详细可点击跳转： ＜ 谈谈对 SPA（单页面应用）的理解 ＞

👉 题目五

在Vue中，为什么 v-if 和 v-for 不建议一起使用 ？ 为何在使用v-for时，需要设置key值？

> 考点

v-if 和 v-for 优先级问题、v-for遍历渲染数据的规则

> 答案

v-if 与 v-for 都是vue模板系统中的指令，vue在执行对应逻辑时，有其先后之分，也就是指令优先级问题。且 v-for优先级比v-if高，如果将 v-for 和 v-if 一起使用，会导致循环执行 v-if的判断，从而导致性能的损耗。

如何在需要v-for 和 v-if同时使用时，避免出现问题呢 ？
可以在外层嵌套template（页面渲染不生成template标签的dom节点），在这一层进行 v-if 判断，然后在内部进行 v-for 循环。

<template v-if="isShow"><p v-for="item in items"></template>

详细可点击跳转： ＜ 在Vue中，为什么 v-if 和 v-for 不建议一起使用 ？ ＞

CSDN话题挑战赛第1期

• 活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f