刷前端面经笔记(2) 前端要刷算法吗

11.使用npm有哪些好处？

通过 npm ，你可以安装和管理项目的依赖，

并且能够指明依赖项的具体版本号。

对于 Node 应用开发而言，

可以通过 package.json 文件来管理项目信息，

配置脚本，以及指明依赖的具体版本。

12.在JavaScript源文件的开头包含 use strict 有什么意义和好处？

use strict 是一种在 JavaScript 代码运行时自动实行更严格解析和错误处理的方法。（严格模式）

将值分配给一个未声明的变量会自动创建该名称的全局变量。这是 JavaScript 中最常见的错误之一。在严格模式下，这样做的话会抛出错误。消除 this 强制。

当检测到对象（例如， var object = {foo: "bar", foo: "baz"}; ）中重复命名的属性，或检测到函数中（例如， function foo(val1, val2, val1){} ）重复命名的参数时，严格模式会抛出错误，因此捕捉几乎可以肯定是代码中的 bug 可以避免浪费大量的跟踪时间。比 eval() 更安全。

13.vuejs与angularjs以及react的区别？

与 AngularJS 的区别

相同点：

都支持指令：内置指令和自定义指令。

都支持过滤器：内置过滤器和自定义过滤器。

都支持双向数据绑定。

都不支持低端浏览器。

不同点：

1. AngularJS 的学习成本高，比如增加了 Dependency Injection 特性，而 Vue.js 本身提供的 API 都比较简单、直观。

2.在性能上， AngularJS 依赖对数据做脏检查，所以 Watcher 越多越慢。

Vue.js 使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。

对于庞大的应用来说，这个优化差异还是比较明显的。

与 React 的区别

相同点：

React 采用特殊的 JSX 语法， Vue.js 在组件开发中也推崇编写 .vue 特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用。

中心思想相同：一切都是组件，组件实例之间可以嵌套。

都提供合理的钩子函数，可以让开发者定制化地去处理需求。

都不内置列数 AJAX ， Route 等功能到核心包，而是以插件的方式加载。

在组件开发中都支持 mixins 的特性。

不同点：

React 依赖 Virtual DOM ,而 Vue.js 使用的是 DOM 模板。 React 采用的 Virtual DOM会对渲染出来的结果做脏检查。

Vue.js 在模板中提供了指令，过滤器等，可以非常方便，快捷地操作 Virtual DOM 。

14.标签keep-alive的作用是什么?

<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

15.WeakMap 和 Map 的区别?

WeakMap 结构与 Map 结构基本类似，唯一的区别是它只接受对象作为键名（ null 除外），不接受其他类型的值作为键名，而且键名所指向的对象，不计入垃圾回收机制。

WeakMap 最大的好处是可以避免内存泄漏。一个仅被 WeakMap 作为 key 而引用的对象，会被垃圾回收器回收掉。

WeakMap 拥有和 Map 类似的 set(key, value) 、 get(key) 、 has(key) 、delete(key) 和 clear() 方法, 没有任何与迭代有关的属性和方法。

16.http和https的基本概念?

http : 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（ TCP ），用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

https : 是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版，即 HTTP 下加入 SSL 层，HTTPS 的安全基础是 SSL ，因此加密的详细内容就需要 SSL 。

https 协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。

17.git fetch和git pull的区别?

git pull ：相当于是从远程获取最新版本并 merge 到本地

git fetch ：相当于是从远程获取最新版本到本地，不会自动 merge

18.介绍一下对浏览器内核的理解？

主要分成两部分：渲染引擎( layout engineer 或 Rendering Engine )和 JS 引擎。

渲染引擎：负责取得网页的内容（ HTML 、 XML 、图像等等）、

整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。

浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。

所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS 引擎：解析和执行 javascript 来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

19.什么是微格式

微格式（ Microformats ）是一种让机器可读的语义化 XHTML 词汇的集合，是结构化数据的开放标准。

是为特殊应用而制定的特殊格式

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。

20.数据绑定基本的实现

	// 实现一个方法，可以给 obj 所有的属性添加动态绑定事件，当属性值发生变化时会触发事件
let obj = {
 key_1: 1,
 key_2: 2
}
function func(key) {
 console.log(key + ' 的值发生改变：' + this[key]);
}
bindData(obj, func);
obj.key_1 = 2; // 此时自动输出 "key_1 的值发生改变：2"
obj.key_2 = 1; // 此时自动输出 "key_2 的值发生改变：1"

答案：

	function bindData(obj, fn) {
 for (let key in obj) {
 Object.defineProperty(obj, key, {
 set(newVal) {
 if (this.value !== newVal) {
 this.value = newVal;
 fn.call(obj, key);
 }
 },
 get() {
 return this.value;
 }
 })
 }
}

20.数据结构处理

	// 有一个祖先树状 json 对象，当一个人有一个儿子的时候，其 child 为其儿子对象，如果有多个儿子，child 为儿子对象的数组。
请实现一个函数，找出这个家族中所有有多个儿子的人的名字（name），输出一个数组。
列子:
// 样例数据
let data = {
 name: 'jack',
 child: [
 { name: 'jack1' },
 {
 name: 'jack2',
 child: [{
 name: 'jack2-1',
 child: { name: 'jack2-1-1' }
 }, {
 name: 'jack2-2'
 }]
 },
 {
 name: 'jack3',
 child: { name: 'jack3-1' }
 }
 ]
}
// 答案:
// 用递归
function findMultiChildPerson(data) {
 let nameList = [];
 function tmp(data) {
 if (data.hasOwnProperty('child')) {
 if (Array.isArray(data.child)) {
 nameList.push(data.name);
 data.child.forEach(child => tmp(child));
 } else {
 tmp(data.child);
 }
 }
 }
 tmp(data);
 return nameList;
}
// 不用递归
function findMultiChildPerson(data) {
 let list = [data];
 let nameList = [];
 while (list.length > 0) {
 const obj = list.shift();
 if (obj.hasOwnProperty('child')) {
 if (Array.isArray(obj.child)) {
 nameList.push(obj.name);
 list = list.concat(obj.child);
 } else {
 list.push(obj.child);
 }
 }
 }
 return nameList;
}