关于javascript:最近美团前端面试题目整理

代码输入后果

const promise = new Promise((resolve, reject) => {console.log(1);
  console.log(2);
});
promise.then(() => {console.log(3);
});
console.log(4);

输入后果如下：

1 
2 
4

promise.then 是微工作，它会在所有的宏工作执行完之后才会执行，同时须要 promise 外部的状态发生变化，因为这里外部没有发生变化，始终处于 pending 状态，所以不输入 3。

Nginx 的概念及其工作原理

Nginx 是一款轻量级的 Web 服务器，也能够用于反向代理、负载平衡和 HTTP 缓存等。Nginx 应用异步事件驱动的办法来解决申请，是一款面向性能设计的 HTTP 服务器。

传统的 Web 服务器如 Apache 是 process-based 模型的，而 Nginx 是基于 event-driven 模型的。正是这个次要的区别带给了 Nginx 在性能上的劣势。

Nginx 架构的最顶层是一个 master process，这个 master process 用于产生其余的 worker process，这一点和 Apache 十分像，然而 Nginx 的 worker process 能够同时解决大量的 HTTP 申请，而每个 Apache process 只能解决一个。

类组件与函数组件有什么区别呢？

• 作为组件而言，类组件与函数组件在应用与出现上没有任何不同，性能上在古代浏览器中也不会有显著差别
• 它们在开发时的心智模型上却存在微小的差别。类组件是基于面向对象编程的，它主打的是继承、生命周期等外围概念；而函数组件内核是函数式编程，主打的是 immutable、没有副作用、援用通明等特点。
• 之前，在应用场景上，如果存在须要应用生命周期的组件，那么主推类组件；设计模式上，如果须要应用继承，那么主推类组件。
• 但当初因为 React Hooks 的推出，生命周期概念的淡出，函数组件能够齐全取代类组件。
• 其次继承并不是组件最佳的设计模式，官网更推崇“组合优于继承”的设计概念，所以类组件在这方面的劣势也在淡出。
• 性能优化上，类组件次要依附 shouldComponentUpdate 阻断渲染来晋升性能，而函数组件依附 React.memo 缓存渲染后果来晋升性能。
• 从上手水平而言，类组件更容易上手，从将来趋势上看，因为 React Hooks 的推出，函数组件成了社区将来主推的计划。
• 类组件在将来工夫切片与并发模式中，因为生命周期带来的复杂度，并不易于优化。而函数组件自身轻量简略，且在 Hooks 的根底上提供了比原先更细粒度的逻辑组织与复用，更能适应 React 的将来倒退。

生命周期

init

• initLifecycle/Event，往 vm 上挂载各种属性
• callHook: beforeCreated: 实例刚创立
• initInjection/initState: 初始化注入和 data 响应性
• created: 创立实现，属性曾经绑定，但还未生成实在dom`
• 进行元素的挂载：$el / vm.$mount()

• 是否有template: 解析成 render function

  • *.vue文件: vue-loader会将 <template> 编译成render function
• beforeMount: 模板编译 / 挂载之前
• 执行 render function，生成实在的dom，并替换到dom tree 中
• mounted: 组件已挂载

update

• 执行 diff 算法，比对扭转是否须要触发 UI 更新
• flushScheduleQueue
• watcher.before: 触发 beforeUpdate 钩子 – watcher.run(): 执行 watcher 中的 notify，告诉所有依赖项更新 UI
• 触发 updated 钩子: 组件已更新
• actived / deactivated(keep-alive): 不销毁，缓存，组件激活与失活

• destroy

  • beforeDestroy: 销毁开始

  • 销毁本身且递归销毁子组件以及事件监听

    • remove(): 删除节点
    • watcher.teardown(): 清空依赖
    • vm.$off(): 解绑监听
  • destroyed: 实现后触发钩子

下面是 vue 的申明周期的简略梳理，接下来咱们间接以代码的模式来实现 vue 的初始化

new Vue({})

// 初始化 Vue 实例
function _init() {
     // 挂载属性
    initLifeCycle(vm) 
    // 初始化事件零碎，钩子函数等
    initEvent(vm) 
    // 编译 slot、vnode
    initRender(vm) 
    // 触发钩子
    callHook(vm, 'beforeCreate')
    // 增加 inject 性能
    initInjection(vm)
    // 实现数据响应性 props/data/watch/computed/methods
    initState(vm)
    // 增加 provide 性能
    initProvide(vm)
    // 触发钩子
    callHook(vm, 'created')

     // 挂载节点
    if (vm.$options.el) {vm.$mount(vm.$options.el)
    }
}

// 挂载节点实现
function mountComponent(vm) {
     // 获取 render function
    if (!this.options.render) {
        // template to render
        // Vue.compile = compileToFunctions
        let {render} = compileToFunctions() 
        this.options.render = render
    }
    // 触发钩子
    callHook('beforeMounte')
    // 初始化观察者
    // render 渲染 vdom，vdom = vm.render()
    // update: 依据 diff 出的 patchs 挂载成实在的 dom 
    vm._update(vdom)
    // 触发钩子  
    callHook(vm, 'mounted')
}

// 更新节点实现
funtion queueWatcher(watcher) {nextTick(flushScheduleQueue)
}

// 清空队列
function flushScheduleQueue() {
     // 遍历队列中所有批改
    for(){
        // beforeUpdate
        watcher.before()

        // 依赖部分更新节点
        watcher.update() 
        callHook('updated')
    }
}

// 销毁实例实现
Vue.prototype.$destory = function() {
     // 触发钩子
    callHook(vm, 'beforeDestory')
    // 本身及子节点
    remove() 
    // 删除依赖
    watcher.teardown() 
    // 删除监听
    vm.$off() 
    // 触发钩子
    callHook(vm, 'destoryed')
}

左右居中计划

• 行内元素: text-align: center
• 定宽块状元素: 左右 margin 值为 auto
• 不定宽块状元素: table布局，position + transform

/* 计划 1 */
.wrap {text-align: center}
.center {
  display: inline;
  /* or */
  /* display: inline-block; */
}
/* 计划 2 */
.center {
  width: 100px;
  margin: 0 auto;
}
/* 计划 2 */
.wrap {position: relative;}
.center {
  position: absulote;
  left: 50%;
  transform: translateX(-50%);
}

TCP 的牢靠传输机制

TCP 的牢靠传输机制是基于间断 ARQ 协定和滑动窗口协定的。

TCP 协定在发送方维持了一个发送窗口，发送窗口以前的报文段是曾经发送并确认了的报文段，发送窗口中蕴含了曾经发送但 未确认的报文段和容许发送但还未发送的报文段，发送窗口当前的报文段是缓存中还不容许发送的报文段。当发送方向接管方发 送报文时，会顺次发送窗口内的所有报文段，并且设置一个定时器，这个定时器能够了解为是最早发送但未收到确认的报文段。如果在定时器的工夫内收到某一个报文段的确认答复，则滑动窗口，将窗口的首部向后滑动到确认报文段的后一个地位，此时如 果还有已发送但没有确认的报文段，则从新设置定时器，如果没有了则敞开定时器。如果定时器超时，则从新发送所有曾经发送 但还未收到确认的报文段，并将超时的距离设置为以前的两倍。当发送方收到接管方的三个冗余的确认应答后，这是一种批示，阐明该报文段当前的报文段很有可能产生失落了，那么发送方会启用疾速重传的机制，就是以后定时器完结前，发送所有的已发 送但确认的报文段。

接管方应用的是累计确认的机制，对于所有按序达到的报文段，接管方返回一个报文段的必定答复。如果收到了一个乱序的报文 段，那么接方会间接抛弃，并返回一个最近的按序达到的报文段的必定答复。应用累计确认保障了返回的确认号之前的报文段都 曾经按序达到了，所以发送窗口能够挪动到已确认报文段的前面。

发送窗口的大小是变动的，它是由接管窗口残余大小和网络中拥塞水平来决定的，TCP 就是通过管制发送窗口的长度来管制报文 段的发送速率。

然而 TCP 协定并不齐全和滑动窗口协定雷同，因为许多的 TCP 实现会将失序的报文段给缓存起来，并且产生重传时，只会重 传一个报文段，因而 TCP 协定的牢靠传输机制更像是窗口滑动协定和抉择重传协定的一个混合体。

深刻数组

一、梳理数组 API

1. Array.of

Array.of 用于将参数顺次转化为数组中的一项，而后返回这个新数组，而不论这个参数是数字还是其余。它基本上与 Array 结构器性能统一，惟一的区别就在单个数字参数的解决上

Array.of(8.0); // [8]
Array(8.0); // [empty × 8]
Array.of(8.0, 5); // [8, 5]
Array(8.0, 5); // [8, 5]
Array.of('8'); // ["8"]
Array('8'); // ["8"]

2. Array.from

从语法上看，Array.from 领有 3 个参数：

• 相似数组的对象，必选；
• 加工函数，新生成的数组会通过该函数的加工再返回；
• this 作用域，示意加工函数执行时 this 的值。

这三个参数外面第一个参数是必选的，后两个参数都是可选的。咱们通过一段代码来看看它的用法。

var obj = {0: 'a', 1: 'b', 2:'c', length: 3};
Array.from(obj, function(value, index){console.log(value, index, this, arguments.length);
  return value.repeat(3);   // 必须指定返回值，否则返回 undefined
}, obj);

// return 的 value 反复了三遍，最初返回的数组为 ["aaa","bbb","ccc"]


// 如果这里不指定 this 的话，加工函数齐全能够是一个箭头函数。上述代码能够简写为如下模式。Array.from(obj, (value) => value.repeat(3));
//  控制台返回 (3) ["aaa", "bbb", "ccc"]

除了上述 obj 对象以外，领有迭代器的对象还包含 String、Set、Map 等，Array.from 通通能够解决，请看上面的代码。

// String
Array.from('abc');         // ["a", "b", "c"]
// Set
Array.from(new Set(['abc', 'def'])); // ["abc", "def"]
// Map
Array.from(new Map([[1, 'ab'], [2, 'de']])); 
// [[1, 'ab'], [2, 'de']]

3. Array 的判断

在 ES5 提供该办法之前，咱们至多有如下 5 种形式去判断一个变量是否为数组。

var a = [];
// 1. 基于 instanceof
a instanceof Array;
// 2. 基于 constructor
a.constructor === Array;
// 3. 基于 Object.prototype.isPrototypeOf
Array.prototype.isPrototypeOf(a);
// 4. 基于 getPrototypeOf
Object.getPrototypeOf(a) === Array.prototype;
// 5. 基于 Object.prototype.toString
Object.prototype.toString.apply(a) === '[object Array]';

ES6 之后新增了一个 Array.isArray 办法，能直接判断数据类型是否为数组，然而如果 isArray 不存在，那么 Array.isArray 的 polyfill 通常能够这样写：

if (!Array.isArray){Array.isArray = function(arg){return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

4. 扭转本身的办法

基于 ES6，会扭转本身值的办法一共有 9 个，别离为 pop、push、reverse、shift、sort、splice、unshift，以及两个 ES6 新增的办法 copyWithin 和 fill

// pop 办法
var array = ["cat", "dog", "cow", "chicken", "mouse"];
var item = array.pop();
console.log(array); // ["cat", "dog", "cow", "chicken"]
console.log(item); // mouse
// push 办法
var array = ["football", "basketball",  "badminton"];
var i = array.push("golfball");
console.log(array); 
// ["football", "basketball", "badminton", "golfball"]
console.log(i); // 4
// reverse 办法
var array = [1,2,3,4,5];
var array2 = array.reverse();
console.log(array); // [5,4,3,2,1]
console.log(array2===array); // true
// shift 办法
var array = [1,2,3,4,5];
var item = array.shift();
console.log(array); // [2,3,4,5]
console.log(item); // 1
// unshift 办法
var array = ["red", "green", "blue"];
var length = array.unshift("yellow");
console.log(array); // ["yellow", "red", "green", "blue"]
console.log(length); // 4
// sort 办法
var array = ["apple","Boy","Cat","dog"];
var array2 = array.sort();
console.log(array); // ["Boy", "Cat", "apple", "dog"]
console.log(array2 == array); // true
// splice 办法
var array = ["apple","boy"];
var splices = array.splice(1,1);
console.log(array); // ["apple"]
console.log(splices); // ["boy"]
// copyWithin 办法
var array = [1,2,3,4,5]; 
var array2 = array.copyWithin(0,3);
console.log(array===array2,array2);  // true [4, 5, 3, 4, 5]
// fill 办法
var array = [1,2,3,4,5];
var array2 = array.fill(10,0,3);
console.log(array===array2,array2); 
// true [10, 10, 10, 4, 5], 可见数组区间 [0,3] 的元素全副替换为 10

5. 不扭转本身的办法

基于 ES7，不会扭转本身的办法也有 9 个，别离为 concat、join、slice、toString、toLocaleString、indexOf、lastIndexOf、未造成规范的 toSource，以及 ES7 新增的办法 includes。

// concat 办法
var array = [1, 2, 3];
var array2 = array.concat(4,[5,6],[7,8,9]);
console.log(array2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array); // [1, 2, 3], 可见原数组并未被批改
// join 办法
var array = ['We', 'are', 'Chinese'];
console.log(array.join()); // "We,are,Chinese"
console.log(array.join('+')); // "We+are+Chinese"
// slice 办法
var array = ["one", "two", "three","four", "five"];
console.log(array.slice()); // ["one", "two", "three","four", "five"]
console.log(array.slice(2,3)); // ["three"]
// toString 办法
var array = ['Jan', 'Feb', 'Mar', 'Apr'];
var str = array.toString();
console.log(str); // Jan,Feb,Mar,Apr
// tolocalString 办法
var array= [{name:'zz'}, 123, "abc", new Date()];
var str = array.toLocaleString();
console.log(str); // [object Object],123,abc,2016/1/5 下午 1:06:23
// indexOf 办法
var array = ['abc', 'def', 'ghi','123'];
console.log(array.indexOf('def')); // 1
// includes 办法
var array = [-0, 1, 2];
console.log(array.includes(+0)); // true
console.log(array.includes(1)); // true
var array = [NaN];
console.log(array.includes(NaN)); // true

其中 includes 办法须要留神的是，如果元素中有 0，那么在判断过程中不论是 +0 还是 -0 都会判断为 True，这里的 includes 疏忽了 +0 和 -0

6. 数组遍历的办法

基于 ES6，不会扭转本身的遍历办法一共有 12 个，别离为 forEach、every、some、filter、map、reduce、reduceRight，以及 ES6 新增的办法 entries、find、findIndex、keys、values

// forEach 办法
var array = [1, 3, 5];
var obj = {name:'cc'};
var sReturn = array.forEach(function(value, index, array){array[index] = value;
  console.log(this.name); // cc 被打印了三次, this 指向 obj
},obj);
console.log(array); // [1, 3, 5]
console.log(sReturn); // undefined, 可见返回值为 undefined
// every 办法
var o = {0:10, 1:8, 2:25, length:3};
var bool = Array.prototype.every.call(o,function(value, index, obj){return value >= 8;},o);
console.log(bool); // true
// some 办法
var array = [18, 9, 10, 35, 80];
var isExist = array.some(function(value, index, array){return value > 20;});
console.log(isExist); // true 
// map 办法
var array = [18, 9, 10, 35, 80];
array.map(item => item + 1);
console.log(array);  // [19, 10, 11, 36, 81]
// filter 办法
var array = [18, 9, 10, 35, 80];
var array2 = array.filter(function(value, index, array){return value > 20;});
console.log(array2); // [35, 80]
// reduce 办法
var array = [1, 2, 3, 4];
var s = array.reduce(function(previousValue, value, index, array){return previousValue * value;},1);
console.log(s); // 24
// ES6 写法更加简洁
array.reduce((p, v) => p * v); // 24
// reduceRight 办法 (和 reduce 的区别就是从后往前累计)
var array = [1, 2, 3, 4];
array.reduceRight((p, v) => p * v); // 24
// entries 办法
var array = ["a", "b", "c"];
var iterator = array.entries();
console.log(iterator.next().value); // [0, "a"]
console.log(iterator.next().value); // [1, "b"]
console.log(iterator.next().value); // [2, "c"]
console.log(iterator.next().value); // undefined, 迭代器处于数组开端时, 再迭代就会返回 undefined
// find & findIndex 办法
var array = [1, 3, 5, 7, 8, 9, 10];
function f(value, index, array){return value%2==0;     // 返回偶数}
function f2(value, index, array){return value > 20;     // 返回大于 20 的数}
console.log(array.find(f)); // 8
console.log(array.find(f2)); // undefined
console.log(array.findIndex(f)); // 4
console.log(array.findIndex(f2)); // -1
// keys 办法
[...Array(10).keys()];     // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
[...new Array(10).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
// values 办法
var array = ["abc", "xyz"];
var iterator = array.values();
console.log(iterator.next().value);//abc
console.log(iterator.next().value);//xyz

7. 总结

这些办法之间存在很多共性，如下：

• 所有插入元素的办法，比方 push、unshift 一律返回数组新的长度；
• 所有删除元素的办法，比方 pop、shift、splice 一律返回删除的元素，或者返回删除的多个元素组成的数组；
• 局部遍历办法，比方 forEach、every、some、filter、map、find、findIndex，它们都蕴含 function(value,index,array){} 和 thisArg 这样两个形参。

数组和字符串办法

二、了解 JS 的类数组

在 JavaScript 中有哪些状况下的对象是类数组呢？次要有以下几种

• 函数外面的参数对象 arguments；
• 用 getElementsByTagName/ClassName/Name 取得的 HTMLCollection
• 用 querySelector 取得的 NodeList

1. arguments 对象

arguments 对象是函数中传递的参数值的汇合。它是一个相似数组的对象，因为它有一个 length 属性，咱们能够应用数组索引表示法 arguments[1] 来拜访单个值，但它没有数组中的内置办法，如：forEach、reduce、filter 和 map。

function foo(name, age, sex) {console.log(arguments);
    console.log(typeof arguments);
    console.log(Object.prototype.toString.call(arguments));
}
foo('jack', '18', 'male');

这段代码比拟容易，就是间接将这个函数的 arguments 在函数外部打印进去，那么咱们看下这个 arguments 打印进去的后果，请看控制台的这张截图。

从后果中能够看到，typeof 这个 arguments 返回的是 object，通过 Object.prototype.toString.call 返回的后果是 '[object arguments]'，能够看进去返回的不是 '[object array]'，阐明 arguments 和数组还是有区别的。

咱们能够应用 Array.prototype.slice 将arguments对象转换成一个数组。

function one() {return Array.prototype.slice.call(arguments);
}

留神: 箭头函数中没有 arguments 对象。

function one() {return arguments;}
const two = function () {return arguments;}
const three = function three() {return arguments;}

const four = () => arguments;

four(); // Throws an error  - arguments is not defined

当咱们调用函数 four 时，它会抛出一个 ReferenceError: arguments is not defined error。应用 rest 语法，能够解决这个问题。

const four = (...args) => args;

这会主动将所有参数值放入数组中。

arguments 不仅仅有一个 length 属性，还有一个 callee 属性，咱们接下来看看这个 callee 是干什么的，代码如下所示

function foo(name, age, sex) {console.log(arguments.callee);
}
foo('jack', '18', 'male');

从控制台能够看到，输入的就是函数本身，如果在函数外部间接执行调用 callee 的话，那它就会不停地执行以后函数，直到执行到内存溢出

2. HTMLCollection

HTMLCollection 简略来说是 HTML DOM 对象的一个接口，这个接口蕴含了获取到的 DOM 元素汇合，返回的类型是类数组对象，如果用 typeof 来判断的话，它返回的是 ‘object’。它是及时更新的，当文档中的 DOM 变动时，它也会随之变动。

形容起来比拟形象，还是通过一段代码来看下 HTMLCollection 最初返回的是什么，咱们先轻易找一个页面中有 form 表单的页面，在控制台中执行下述代码

var elem1, elem2;
// document.forms 是一个 HTMLCollection
elem1 = document.forms[0];
elem2 = document.forms.item(0);
console.log(elem1);
console.log(elem2);
console.log(typeof elem1);
console.log(Object.prototype.toString.call(elem1));

在这个有 form 表单的页面执行下面的代码，失去的后果如下。

能够看到，这里打印进去了页面第一个 form 表单元素，同时也打印进去了判断类型的后果，阐明打印的判断的类型和 arguments 返回的也比拟相似，typeof 返回的都是 ‘object’，和下面的相似。

另外须要留神的一点就是 HTML DOM 中的 HTMLCollection 是即时更新的，当其所蕴含的文档构造产生扭转时，它会自动更新。上面咱们再看最初一个 NodeList 类数组。

3. NodeList

NodeList 对象是节点的汇合，通常是由 querySlector 返回的。NodeList 不是一个数组，也是一品种数组。尽管 NodeList 不是一个数组，然而能够应用 for…of 来迭代。在一些状况下，NodeList 是一个实时汇合，也就是说，如果文档中的节点树发生变化，NodeList 也会随之变动。咱们还是利用代码来了解一下 Nodelist 这品种数组。

var list = document.querySelectorAll('input[type=checkbox]');
for (var checkbox of list) {checkbox.checked = true;}
console.log(list);
console.log(typeof list);
console.log(Object.prototype.toString.call(list));

从下面的代码执行的后果中能够发现，咱们是通过有 CheckBox 的页面执行的代码，在后果可中输入了一个 NodeList 类数组，外面有一个 CheckBox 元素，并且咱们判断了它的类型，和下面的 arguments 与 HTMLCollection 其实是相似的，执行后果如下图所示。

4. 类数组利用场景

1. 遍历参数操作

咱们在函数外部能够间接获取 arguments 这个类数组的值，那么也能够对于参数进行一些操作，比方上面这段代码，咱们能够将函数的参数默认进行求和操作。

function add() {
    var sum =0,
        len = arguments.length;
    for(var i = 0; i < len; i++){sum += arguments[i];
    }
    return sum;
}
add()                           // 0
add(1)                          // 1
add(1，2)                       // 3
add(1,2,3,4);                   // 10

2. 定义链接字符串函数

咱们能够通过 arguments 这个例子定义一个函数来连贯字符串。这个函数惟一正式申明了的参数是一个字符串，该参数指定一个字符作为连接点来连贯字符串。该函数定义如下。

// 这段代码阐明了，你能够传递任意数量的参数到该函数，并应用每个参数作为列表中的项创立列表进行拼接。从这个例子中也能够看出，咱们能够在日常编码中采纳这样的代码形象形式，把须要解决的这一类问题，都形象成通用的办法，来晋升代码的可复用性
function myConcat(separa) {var args = Array.prototype.slice.call(arguments, 1);
  return args.join(separa);
}
myConcat(",", "red", "orange", "blue");
// "red, orange, blue"
myConcat(";", "elephant", "lion", "snake");
// "elephant; lion; snake"
myConcat(".", "one", "two", "three", "four", "five");
// "one. two. three. four. five"

3. 传递参数应用

// 应用 apply 将 foo 的参数传递给 bar
function foo() {bar.apply(this, arguments);
}
function bar(a, b, c) {console.log(a, b, c);
}
foo(1, 2, 3)   //1 2 3

5. 如何将类数组转换成数组

1. 类数组借用数组办法转数组

function sum(a, b) {let args = Array.prototype.slice.call(arguments);
 // let args = [].slice.call(arguments); // 这样写也是一样成果
  console.log(args.reduce((sum, cur) => sum + cur));
}
sum(1, 2);  // 3
function sum(a, b) {let args = Array.prototype.concat.apply([], arguments);
  console.log(args.reduce((sum, cur) => sum + cur));
}
sum(1, 2);  // 3

2. ES6 的办法转数组

function sum(a, b) {let args = Array.from(arguments);
  console.log(args.reduce((sum, cur) => sum + cur));
}
sum(1, 2);    // 3
function sum(a, b) {let args = [...arguments];
  console.log(args.reduce((sum, cur) => sum + cur));
}
sum(1, 2);    // 3
function sum(...args) {console.log(args.reduce((sum, cur) => sum + cur));
}
sum(1, 2);    // 3

Array.from 和 ES6 的开展运算符 ，都能够把 arguments 这个类数组转换成数组 args

类数组和数组的异同点

在前端工作中，开发者往往会漠视对类数组的学习，其实在高级 JavaScript 编程中常常须要将类数组向数组转化，尤其是一些比较复杂的开源我的项目，常常会看到函数中解决参数的写法，例如：[].slice.call(arguments) 这行代码。

三、实现数组扁平化的 6 种形式

1. 办法一：一般的递归实

一般的递归思路很容易了解，就是通过循环递归的形式，一项一项地去遍历，如果每一项还是一个数组，那么就持续往下遍历，利用递归程序的办法，来实现数组的每一项的连贯。咱们来看下这个办法是如何实现的，如下所示

// 办法 1
var a = [1, [2, [3, 4, 5]]];
function flatten(arr) {let result = [];

  for(let i = 0; i < arr.length; i++) {if(Array.isArray(arr[i])) {result = result.concat(flatten(arr[i]));
    } else {result.push(arr[i]);
    }
  }
  return result;
}
flatten(a);  //  [1, 2, 3, 4，5]

从下面这段代码能够看出，最初返回的后果是扁平化的后果，这段代码外围就是循环遍历过程中的递归操作，就是在遍历过程中发现数组元素还是数组的时候进行递归操作，把数组的后果通过数组的 concat 办法拼接到最初要返回的 result 数组上，那么最初输入的后果就是扁平化后的数组

2. 办法二：利用 reduce 函数迭代

从下面一般的递归函数中能够看出，其实就是对数组的每一项进行解决，那么咱们其实也能够用 reduce 来实现数组的拼接，从而简化第一种办法的代码，革新后的代码如下所示。

// 办法 2
var arr = [1, [2, [3, 4]]];
function flatten(arr) {return arr.reduce(function(prev, next){return prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
}
console.log(flatten(arr));//  [1, 2, 3, 4，5]

3. 办法三：扩大运算符实现

这个办法的实现，采纳了扩大运算符和 some 的办法，两者独特应用，达到数组扁平化的目标，还是来看一下代码

// 办法 3
var arr = [1, [2, [3, 4]]];
function flatten(arr) {while (arr.some(item => Array.isArray(item))) {arr = [].concat(...arr);
    }
    return arr;
}
console.log(flatten(arr)); //  [1, 2, 3, 4，5]

从执行的后果中能够发现，咱们先用数组的 some 办法把数组中依然是组数的项过滤出来，而后执行 concat 操作，利用 ES6 的开展运算符，将其拼接到原数组中，最初返回原数组，达到了预期的成果。

前三种实现数组扁平化的形式其实是最根本的思路，都是通过最一般递归思路衍生的办法，尤其是前两种实现办法比拟相似。值得注意的是 reduce 办法，它能够在很多利用场景中实现，因为 reduce 这个办法提供的几个参数比拟灵便，能解决很多问题，所以是值得纯熟应用并且精通的

4. 办法四：split 和 toString 独特解决

咱们也能够通过 split 和 toString 两个办法，来独特实现数组扁平化，因为数组会默认带一个 toString 的办法，所以能够把数组间接转换成逗号分隔的字符串，而后再用 split 办法把字符串从新转换为数组，如上面的代码所示。

// 办法 4
var arr = [1, [2, [3, 4]]];
function flatten(arr) {return arr.toString().split(',');
}
console.log(flatten(arr)); //  [1, 2, 3, 4]

通过这两个办法能够将多维数组间接转换成逗号连贯的字符串，而后再从新分隔成数组，你能够在控制台执行一下查看后果。

5. 办法五：调用 ES6 中的 flat

咱们还能够间接调用 ES6 中的 flat 办法，能够间接实现数组扁平化。先来看下 flat 办法的语法：

arr.flat([depth])

其中 depth 是 flat 的参数，depth 是能够传递数组的开展深度（默认不填、数值是 1），即开展一层数组。那么如果多层的该怎么解决呢？参数也能够传进 Infinity，代表不管多少层都要开展。那么咱们来看下，用 flat 办法怎么实现，请看上面的代码。

// 办法 5
var arr = [1, [2, [3, 4]]];
function flatten(arr) {return arr.flat(Infinity);
}
console.log(flatten(arr)); //  [1, 2, 3, 4，5]

• 能够看出，一个嵌套了两层的数组，通过将 flat 办法的参数设置为 Infinity，达到了咱们预期的成果。其实同样也能够设置成 2，也能实现这样的成果。
• 因而，你在编程过程中，发现对数组的嵌套层数不确定的时候，最好间接应用 Infinity，能够达到扁平化。上面咱们再来看最初一种场景

6. 办法六：正则和 JSON 办法独特解决

咱们在第四种办法中曾经尝试了用 toString 办法，其中依然采纳了将 JSON.stringify 的办法先转换为字符串，而后通过正则表达式过滤掉字符串中的数组的方括号，最初再利用 JSON.parse 把它转换成数组。请看上面的代码

// 办法 6
let arr = [1, [2, [3, [4, 5]]], 6];
function flatten(arr) {let str = JSON.stringify(arr);
  str = str.replace(/(\[|\])/g, '');
  str = '[' + str + ']';
  return JSON.parse(str); 
}
console.log(flatten(arr)); //  [1, 2, 3, 4，5]

能够看到，其中先把传入的数组转换成字符串，而后通过正则表达式的形式把括号过滤掉，这部分正则的表达式你不太了解的话，能够看看上面的图片

通过这个在线网站 https://regexper.com/ 能够把正则剖析成容易了解的可视化的逻辑脑图。其中咱们能够看到，匹配规定是：全局匹配（g）左括号或者右括号，将它们替换成空格，最初返回解决后的后果。之后拿着正则解决好的后果从新在外层包裹括号，最初通过 JSON.parse 转换成数组返回。

四、如何用 JS 实现各种数组排序

数据结构算法中排序有很多种，常见的、不常见的，至多蕴含十种以上。依据它们的个性，能够大抵分为两种类型：比拟类排序和非比拟类排序。

• 比拟类排序：通过比拟来决定元素间的绝对秩序，其工夫复杂度不能冲破 O(nlogn)，因而也称为非线性工夫比拟类排序。
• 非比拟类排序：不通过比拟来决定元素间的绝对秩序，它能够冲破基于比拟排序的工夫下界，以线性工夫运行，因而也称为线性工夫非比拟类排序。

咱们通过一张图片来看看这两种分类形式别离包含哪些排序办法。

非比拟类的排序在理论状况中用的比拟少

1. 冒泡排序

冒泡排序是最根底的排序，个别在最开始学习数据结构的时候就会接触它。冒泡排序是一次比拟两个元素，如果程序是谬误的就把它们替换过去。走访数列的工作会反复地进行，直到不须要再替换，也就是说该数列曾经排序实现。请看上面的代码。

var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function bubbleSort(array) {
  const len = array.length
  if (len < 2) return array
  for (let i = 0; i < len; i++) {for (let j = 0; j < i; j++) {if (array[j] > array[i]) {const temp = array[j]
        array[j] = array[i]
        array[i] = temp
      }
    }
  }
  return array
}
bubbleSort(a);  // [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]

从下面这段代码能够看出，最初返回的是排好序的后果。因为冒泡排序切实太根底和简略，这里就不过多赘述了。上面咱们来看看疾速排序法

2. 疾速排序

疾速排序的根本思维是通过一趟排序，将待排记录分隔成独立的两局部，其中一部分记录的关键字均比另一部分的关键字小，则能够别离对这两局部记录持续进行排序，以达到整个序列有序。

var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function quickSort(array) {var quick = function(arr) {if (arr.length <= 1) return arr
    const len = arr.length
    const index = Math.floor(len >> 1)
    const pivot = arr.splice(index, 1)[0]
    const left = []
    const right = []
    for (let i = 0; i < len; i++) {if (arr[i] > pivot) {right.push(arr[i])
      } else if (arr[i] <= pivot) {left.push(arr[i])
      }
    }
    return quick(left).concat([pivot], quick(right))
  }
  const result = quick(array)
  return result
}
quickSort(a);//  [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]

下面的代码在控制台执行之后，也能够失去预期的后果。最次要的思路是从数列中挑出一个元素，称为“基准”（pivot）；而后从新排序数列，所有元素比基准值小的摆放在基准后面、比基准值大的摆在基准的前面；在这个辨别搞定之后，该基准就处于数列的两头地位；而后把小于基准值元素的子数列（left）和大于基准值元素的子数列（right）递归地调用 quick 办法排序实现，这就是快排的思路。

3. 插入排序

插入排序算法形容的是一种简略直观的排序算法。它的 工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应地位并插入，从而达到排序的成果。来看一下代码

var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function insertSort(array) {
  const len = array.length
  let current
  let prev
  for (let i = 1; i < len; i++) {current = array[i]
    prev = i - 1
    while (prev >= 0 && array[prev] > current) {array[prev + 1] = array[prev]
      prev--
    }
    array[prev + 1] = current
  }
  return array
}
insertSort(a); // [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]

从执行的后果中能够发现，通过插入排序这种形式实现了排序成果。插入排序的思路是基于数组自身进行调整的，首先循环遍历从 i 等于 1 开始，拿到以后的 current 的值，去和后面的值比拟，如果后面的大于以后的值，就把后面的值和以后的那个值进行替换，通过这样一直循环达到了排序的目标

4. 抉择排序

抉择排序是一种简略直观的排序算法。它的工作原理是，首先将最小的元素寄存在序列的起始地位，再从残余未排序元素中持续寻找最小元素，而后放到已排序的序列前面……以此类推，直到所有元素均排序结束。请看上面的代码。

var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function selectSort(array) {
  const len = array.length
  let temp
  let minIndex
  for (let i = 0; i < len - 1; i++) {
    minIndex = i
    for (let j = i + 1; j < len; j++) {if (array[j] <= array[minIndex]) {minIndex = j}
    }
    temp = array[i]
    array[i] = array[minIndex]
    array[minIndex] = temp
  }
  return array
}
selectSort(a); // [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]

这样，通过抉择排序的办法同样也能够实现数组的排序，从下面的代码中能够看出该排序是体现最稳固的排序算法之一，因为无论什么数据进去都是 O(n 平方) 的工夫复杂度，所以用到它的时候，数据规模越小越好

5. 堆排序

堆排序是指利用堆这种数据结构所设计的一种排序算法。沉积是一个近似齐全二叉树的构造，并同时满足沉积的性质，即子结点的键值或索引总是小于（或者大于）它的父节点。堆的底层实际上就是一棵齐全二叉树，能够用数组实现。

根节点最大的堆叫作大根堆，根节点最小的堆叫作小根堆，你能够依据从大到小排序或者从小到大来排序，别离建设对应的堆就能够。请看上面的代码

var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function heap_sort(arr) {
  var len = arr.length
  var k = 0
  function swap(i, j) {var temp = arr[i]
    arr[i] = arr[j]
    arr[j] = temp
  }
  function max_heapify(start, end) {
    var dad = start
    var son = dad * 2 + 1
    if (son >= end) return
    if (son + 1 < end && arr[son] < arr[son + 1]) {son++}
    if (arr[dad] <= arr[son]) {swap(dad, son)
      max_heapify(son, end)
    }
  }
  for (var i = Math.floor(len / 2) - 1; i >= 0; i--) {max_heapify(i, len)
  }

  for (var j = len - 1; j > k; j--) {swap(0, j)
    max_heapify(0, j)
  }

  return arr
}
heap_sort(a); // [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]

从代码来看，堆排序相比下面几种排序整体上会简单一些，不太容易了解。不过你应该晓得两点：

• 一是堆排序最外围的点就在于排序前先建堆；
• 二是因为堆其实就是齐全二叉树，如果父节点的序号为 n，那么叶子节点的序号就别离是 2n 和 2n+1。

你了解了这两点，再看代码就比拟好了解了。堆排序最初有两个循环：第一个是解决父节点的程序；第二个循环则是依据父节点和叶子节点的大小比照，进行堆的调整。通过这两轮循环的调整，最初堆排序实现。

6. 归并排序

归并排序是建设在归并操作上的一种无效的排序算法，该算法是采纳分治法的一个十分典型的利用。将已有序的子序列合并，失去齐全有序的序列；先使每个子序列有序，再使子序列段间有序。若将两个有序表合并成一个有序表，称为二路归并。咱们先看一下代码。

var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function mergeSort(array) {const merge = (right, left) => {const result = []
    let il = 0
    let ir = 0
    while (il < left.length && ir < right.length) {if (left[il] < right[ir]) {result.push(left[il++])
      } else {result.push(right[ir++])
      }
    }
    while (il < left.length) {result.push(left[il++])
    }
    while (ir < right.length) {result.push(right[ir++])
    }
    return result
  }
  const mergeSort = array => {if (array.length === 1) {return array}
    const mid = Math.floor(array.length / 2)
    const left = array.slice(0, mid)
    const right = array.slice(mid, array.length)
    return merge(mergeSort(left), mergeSort(right))
  }
  return mergeSort(array)
}
mergeSort(a); // [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]

从下面这段代码中能够看到，通过归并排序能够失去想要的后果。下面提到了分治的思路，你能够从 mergeSort 办法中看到，通过 mid 能够把该数组分成左右两个数组，别离对这两个进行递归调用排序办法，最初将两个数组依照程序归并起来。

归并排序是一种稳固的排序办法，和抉择排序一样，归并排序的性能不受输出数据的影响，但体现比抉择排序好得多，因为始终都是 O(nlogn) 的工夫复杂度。而代价是须要额定的内存空间。

其中你能够看到排序相干的工夫复杂度和空间复杂度以及稳定性的状况，如果遇到须要本人实现排序的时候，能够依据它们的空间和工夫复杂度综合考量，抉择最适宜的排序办法

右边定宽，左边自适应计划

float + margin，float + calc

/* 计划 1 */ 
.left {
  width: 120px;
  float: left;
}
.right {margin-left: 120px;}
/* 计划 2 */ 
.left {
  width: 120px;
  float: left;
}
.right {width: calc(100% - 120px);
  float: left;
}

数字证书是什么？

当初的办法也不肯定是平安的，因为没有方法确定失去的公钥就肯定是平安的公钥。可能存在一个中间人，截取了对方发给咱们的公钥，而后将他本人的公钥发送给咱们，当咱们应用他的公钥加密后发送的信息，就能够被他用本人的私钥解密。而后他伪装成咱们以同样的办法向对方发送信息，这样咱们的信息就被窃取了，然而本人还不晓得。为了解决这样的问题，能够应用数字证书。

首先应用一种 Hash 算法来对公钥和其余信息进行加密，生成一个信息摘要，而后让有公信力的认证核心（简称 CA）用它的私钥对音讯摘要加密，造成签名。最初将原始的信息和签名合在一起，称为数字证书。当接管方收到数字证书的时候，先依据原始信息应用同样的 Hash 算法生成一个摘要，而后应用公证处的公钥来对数字证书中的摘要进行解密，最初将解密的摘要和生成的摘要进行比照，就能发现失去的信息是否被更改了。

这个办法最要的是认证核心的可靠性，个别浏览器里会内置一些顶层的认证核心的证书，相当于咱们主动信赖了他们，只有这样能力保证数据的平安。

参考：前端进阶面试题具体解答

选择器权重计算形式

!important > 内联款式 = 外联款式 > ID 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器 = 后辈选择器 = 兄弟选择器

1. 属性前面加 !import 会笼罩页面内任何地位定义的元素款式
2. 作为 style 属性写在元素内的款式
3. id选择器
4. 类选择器
5. 标签选择器
6. 通配符选择器（*）
7. 浏览器自定义或继承

同一级别：后写的会笼罩先写的

css 选择器的解析准则：选择器定位 DOM 元素是从右往左的方向，这样能够尽早的过滤掉一些不必要的款式规定和元素

渲染引擎什么状况下才会为特定的节点创立新的图层

层叠上下文 是 HTML 元素的三维概念，这些 HTML 元素在一条假想的绝对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延长，HTML 元素根据其本身属性依照优先级程序占用层叠上下文的空间。

1. 领有层叠上下文属性的元素会被晋升为独自的一层。

领有层叠上下文属性：

• 根元素 (HTML),
• z-index 值不为 “auto” 的 相对 / 绝对定位元素，
• position, 固定（fixed）/ 沾滞（sticky）定位（沾滞定位适配所有挪动设施上的浏览器，但老的桌面浏览器不反对）
• z-index 值不为 “auto” 的 flex 子项 (flex item)，即：父元素 display: flex|inline-flex，
• z-index 值不为 ”auto” 的 grid 子项，即：父元素 display：grid
• opacity 属性值小于 1 的元素（参考 the specification for opacity），
• transform 属性值不为 “none” 的元素，
• mix-blend-mode 属性值不为 “normal” 的元素，
• filter 值不为 ”none” 的元素，
• perspective 值不为 ”none” 的元素，
• clip-path 值不为 ”none” 的元素
• mask / mask-image / mask-border 不为 ”none” 的元素
• isolation 属性被设置为 “isolate” 的元素
• 在 will-change 中指定了任意 CSS 属性（参考 这篇文章）
• -webkit-overflow-scrolling 属性被设置 “touch” 的元素
• contain 属性值为 ”layout”，”paint”，或者综合值比方 ”strict”，”content”
• 须要剪裁（clip）的中央也会被创立为图层。

这里的剪裁指的是，如果咱们把 div 的大小限定为 200 200 像素，而 div 外面的文字内容比拟多，文字所显示的区域必定会超出 200 200 的面积，这时候就产生了剪裁，渲染引擎会把裁剪文字内容的一部分用于显示在 div 区域。呈现这种裁剪状况的时候，渲染引擎会为文字局部独自创立一个层，如果呈现滚动条，滚动条也会被晋升为独自的层。

webpack 层面如何做性能优化

优化前的筹备工作

• 筹备基于工夫的剖析工具：咱们须要一类插件，来帮忙咱们统计我的项目构建过程中在编译阶段的耗时状况。speed-measure-webpack-plugin 剖析插件加载的工夫
• 应用 webpack-bundle-analyzer 剖析产物内容

代码优化:

无用代码打消，是许多编程语言都具备的优化伎俩，这个过程称为 DCE (dead code elimination)，即 删除不可能执行的代码；

例如咱们的 UglifyJs，它就会帮咱们在生产环境中删除不可能被执行的代码，例如:

var fn = function() {
    return 1;
    // 上面代码便属于 不可能执行的代码；// 通过 UglifyJs (Webpack4+ 已内置) 便会进行 DCE；var a = 1;
    return a;
}

摇树优化 (Tree-shaking)，这是一种形象比喻。咱们把打包后的代码比喻成一棵树，这里其实示意的就是，通过工具 “ 摇 ” 咱们打包后的 js 代码，将没有应用到的无用代码 “ 摇 ” 下来 (删除)。即 打消那些被 援用了但未被应用 的模块代码。

• 原理: 因为是在编译时优化，因而最根本的前提就是语法的动态剖析，ES6 的模块机制 提供了这种可能性。不须要运行时，便可进行代码字面上的动态剖析，确定相应的依赖关系。

• 问题: 具备 副作用 的函数无奈被 tree-shaking

  • 在援用一些第三方库，须要去察看其引入的代码量是不是合乎预期；
  • 尽量写纯函数，缩小函数的副作用；
  • 可应用 webpack-deep-scope-plugin，能够进行作用域剖析，缩小此类情况的产生，但仍须要留神；

code-spliting: 代码宰割技术，将代码宰割成多份进行 懒加载 或 异步加载，防止打包成一份后导致体积过大，影响页面的首屏加载；

• Webpack 中应用 SplitChunksPlugin 进行拆分；
• 按 页面 拆分: 不同页面打包成不同的文件；

• 按 性能 拆分:

  • 将相似于播放器，计算库等大模块进行拆分后再懒加载引入；
  • 提取复用的业务代码，缩小冗余代码；
• 按 文件批改频率 拆分: 将第三方库等不常批改的代码独自打包，而且不扭转其文件 hash 值，能最大化使用浏览器的缓存；

scope hoisting : 作用域晋升，将扩散的模块划分到同一个作用域中，防止了代码的反复引入，无效缩小打包后的代码体积和运行时的内存损耗；

编译性能优化:

• 降级至 最新 版本的 webpack，能无效晋升编译性能；

• 应用 dev-server / 模块热替换 (HMR) 晋升开发体验；

  • 监听文件变动 疏忽 node_modules 目录能无效进步监听时的编译效率；

• 放大编译范畴

  • modules: 指定模块门路，缩小递归搜寻；
  • mainFields: 指定入口文件形容字段，缩小搜寻；
  • noParse: 防止对非模块化文件的加载；
  • includes/exclude: 指定搜寻范畴 / 排除不必要的搜寻范畴；
  • alias: 缓存目录，防止反复寻址；

• babel-loader

  • 疏忽node_moudles，防止编译第三方库中曾经被编译过的代码
  • 应用cacheDirectory，能够缓存编译后果，防止多次重复编译

• 多过程并发

  • webpack-parallel-uglify-plugin: 可多过程并发压缩 js 文件，进步压缩速度；
  • HappyPack: 多过程并发文件的 Loader 解析；

• 第三方库模块缓存:

  • DLLPlugin 和 DLLReferencePlugin 能够提前进行打包并缓存，防止每次都从新编译；

• 应用剖析

  • Webpack Analyse / webpack-bundle-analyzer 对打包后的文件进行剖析，寻找可优化的中央
  • 配置 profile：true，对各个编译阶段耗时进行监控，寻找耗时最多的中央

• source-map:

  • 开发: cheap-module-eval-source-map
  • 生产: hidden-source-map；

优化 webpack 打包速度

• 缩小文件搜寻范畴

  • 比方通过别名
  • loader 的 test，include & exclude
• Webpack4 默认压缩并行
• Happypack 并发调用
• babel 也能够缓存编译
• Resolve 在构建时指定查找模块文件的规定
• 应用DllPlugin，不必每次都从新构建

• externals 和 DllPlugin 解决的是同一类问题：将依赖的框架等模块从构建过程中移除。它们的区别在于

  • 在 Webpack 的配置方面，externals 更简略，而 DllPlugin 须要独立的配置文件。
  • DllPlugin 蕴含了依赖包的独立构建流程，而 externals 配置中不蕴含依赖框架的生成形式，通常应用已传入 CDN 的依赖包
  • externals 配置的依赖包须要独自指定依赖模块的加载形式：全局对象、CommonJS、AMD 等
  • 在援用依赖包的子模块时，DllPlugin 毋庸更改，而 externals 则会将子模块打入我的项目包中

优化打包体积

• 提取第三方库或通过援用内部文件的形式引入第三方库
• 代码压缩插件UglifyJsPlugin
• 服务器启用 gzip 压缩
• 按需加载资源文件 require.ensure
• 优化 devtool 中的source-map
• 剥离 css 文件，独自打包
• 去除不必要插件，通常就是开发环境与生产环境用同一套配置文件导致
• Tree Shaking 在构建打包过程中，移除那些引入但未被应用的有效代码

• 开启 scope hosting

  • 体积更小
  • 创立函数作用域更小
  • 代码可读性更好

createElement 过程

React.createElement()：依据指定的第一个参数创立一个 React 元素

React.createElement(
  type,
  [props],
  [...children]
)

• 第一个参数是必填，传入的是似 HTML 标签名称，eg: ul, li
• 第二个参数是选填，示意的是属性，eg: className
• 第三个参数是选填, 子节点，eg: 要显示的文本内容

// 写法一：var child1 = React.createElement('li', null, 'one');
    var child2 = React.createElement('li', null, 'two');
    var content = React.createElement('ul', { className: 'teststyle'}, child1, child2); // 第三个参数能够离开也能够写成一个数组
      ReactDOM.render(
          content,
        document.getElementById('example')
      );

// 写法二：var child1 = React.createElement('li', null, 'one');
    var child2 = React.createElement('li', null, 'two');
    var content = React.createElement('ul', { className: 'teststyle'}, [child1, child2]);
      ReactDOM.render(
          content,
        document.getElementById('example')
      );

闭包

闭包其实就是一个能够拜访其余函数外部变量的函数。创立闭包的最常见的形式就是在一个函数内创立另一个函数，创立的函数能够 拜访到以后函数的局部变量。

因为通常状况下，函数外部变量是无奈在内部拜访的（即全局变量和局部变量的区别），因而应用闭包的作用，就具备实现了能在内部拜访某个函数外部变量的性能，让这些外部变量的值始终能够保留在内存中。上面咱们通过代码先来看一个简略的例子

function fun1() {
    var a = 1;
    return function(){console.log(a);
    };
}
fun1();
var result = fun1();
result();  // 1

// 联合闭包的概念，咱们把这段代码放到控制台执行一下，就能够发现最初输入的后果是 1（即 a 变量的值）。那么能够很分明地发现，a 变量作为一个 fun1 函数的外部变量，失常状况下作为函数内的局部变量，是无奈被内部拜访到的。然而通过闭包，咱们最初还是能够拿到 a 变量的值

闭包有两个罕用的用处

• 闭包的第一个用处是使咱们在函数内部可能拜访到函数外部的变量。通过应用闭包，咱们能够通过在内部调用闭包函数，从而在内部拜访到函数外部的变量，能够应用这种办法来创立公有变量。
• 函数的另一个用处是使曾经运行完结的函数上下文中的变量对象持续留在内存中，因为闭包函数保留了这个变量对象的援用，所以这个变量对象不会被回收。

其实闭包的实质就是作用域链的一个非凡的利用，只有理解了作用域链的创立过程，就可能了解闭包的实现原理。

let a = 1
// fn 是闭包
function fn() {console.log(a);
}

function fn1() {
  let a = 1
  // 这里也是闭包
  return () => {console.log(a);
  }
}
const fn2 = fn1()
fn2()

• 大家都晓得闭包其中一个作用是拜访公有变量，就比方上述代码中的 fn2 拜访到了 fn1 函数中的变量 a。然而此时 fn1 早已销毁，咱们是如何拜访到变量 a 的呢？不是都说原始类型是寄存在栈上的么，为什么此时却没有被销毁掉？
• 接下来笔者会依据浏览器的体现来从新了解对于原始类型寄存地位的说法。
• 先来说下数据寄存的正确规定是：部分、占用空间确定的数据，个别会寄存在栈中，否则就在堆中（也有例外）。那么接下来咱们能够通过 Chrome 来帮忙咱们验证这个说法说法。

上图中画红框的地位咱们能看到一个外部的对象 [[Scopes]]，其中寄存着变量 a，该对象是被寄存在堆上的，其中蕴含了闭包、全局对象等等内容，因而咱们能通过闭包拜访到本该销毁的变量。

另外最开始咱们对于闭包的定位是：如果一个函数能拜访内部的变量，那么这个函数它就是一个闭包，因而接下来咱们看看在全局下的体现是怎么样的。

let a = 1
var b = 2
// fn 是闭包
function fn() {console.log(a, b);
}

从上图咱们能发现全局下申明的变量，如果是 var 的话就间接被挂到 globe 上，如果是其余关键字申明的话就被挂到 Script 上。尽管这些内容同样还是存在 [[Scopes]]，然而全局变量应该是寄存在动态区域的，因为全局变量无需进行垃圾回收，等须要回收的时候整个利用都没了。

只有在下图的场景中，原始类型才可能是被存储在栈上。

这里为什么要说可能，是因为 JS 是门动静类型语言，一个变量申明时能够是原始类型，马上又能够赋值为对象类型，而后又回到原始类型。这样频繁的在堆栈上切换存储地位，外部引擎是不是也会有什么优化伎俩，或者罗唆全副都丢堆上？只有 const 申明的原始类型才肯定存在栈上？当然这只是笔者的一个揣测，临时没有深究，读者能够疏忽这段瞎想

因而笔者对于原始类型存储地位的了解为：局部变量才是被存储在栈上，全局变量存在动态区域上，其它都存储在堆上。

当然这个了解是建设的 Chrome 的体现之上的，在不同的浏览器上因为引擎的不同，可能存储的形式还是有所变动的。

闭包产生的起因

咱们在后面介绍了作用域的概念，那么你还须要明确作用域链的基本概念。其实很简略，当拜访一个变量时，代码解释器会首先在以后的作用域查找，如果没找到，就去父级作用域去查找，直到找到该变量或者不存在父级作用域中，这样的链路就是作用域链

须要留神的是，每一个子函数都会拷贝下级的作用域，造成一个作用域的链条。那么咱们还是通过上面的代码来具体阐明一下作用域链

var a = 1;
function fun1() {
  var a = 2
  function fun2() {
    var a = 3;
    console.log(a);//3
  }
}

• 从中能够看出，fun1 函数的作用域指向全局作用域（window）和它本人自身；fun2 函数的作用域指向全局作用域（window）、fun1 和它自身；而作用域是从最底层向上找，直到找到全局作用域 window 为止，如果全局还没有的话就会报错。
• 那么这就很形象地阐明了什么是作用域链，即以后函数个别都会存在下层函数的作用域的援用，那么他们就造成了一条作用域链。
• 由此可见，闭包产生的实质就是：以后环境中存在指向父级作用域的援用。那么还是拿上的代码举例。

function fun1() {
  var a = 2
  function fun2() {console.log(a);  //2
  }
  return fun2;
}
var result = fun1();
result();

• 从下面这段代码能够看出，这里 result 会拿到父级作用域中的变量，输入 2。因为在以后环境中，含有对 fun2 函数的援用，fun2 函数恰好援用了 window、fun1 和 fun2 的作用域。因而 fun2 函数是能够拜访到 fun1 函数的作用域的变量。
• 那是不是只有返回函数才算是产生了闭包呢？其实也不是，回到闭包的实质，咱们只须要让父级作用域的援用存在即可，因而还能够这么改代码，如下所示

var fun3;
function fun1() {
  var a = 2
  fun3 = function() {console.log(a);
  }
}
fun1();
fun3();

能够看出，其中实现的后果和前一段代码的成果其实是一样的，就是在给 fun3 函数赋值后，fun3 函数就领有了 window、fun1 和 fun3 自身这几个作用域的拜访权限；而后还是从下往上查找，直到找到 fun1 的作用域中存在 a 这个变量；因而输入的后果还是 2，最初产生了闭包，模式变了，实质没有扭转。

因而最初 返回的不论是不是函数，也都不能阐明没有产生闭包

闭包的表现形式

1. 返回一个函数
2. 在定时器、事件监听、Ajax 申请、Web Workers 或者任何异步中，只有应用了回调函数，实际上就是在应用闭包。请看上面这段代码，这些都是平时开发中用到的模式

// 定时器
setTimeout(function handler(){console.log('1');
}，1000);
// 事件监听
$('#app').click(function(){console.log('Event Listener');
});

3. 作为函数参数传递的模式，比方上面的例子。

var a = 1;
function foo(){
  var a = 2;
  function baz(){console.log(a);
  }
  bar(baz);
}
function bar(fn){
  // 这就是闭包
  fn();}
foo();  // 输入 2，而不是 1 

4. IIFE（立刻执行函数），创立了闭包，保留了全局作用域（window）和以后函数的作用域，因而能够输入全局的变量，如下所示

var a = 2;
(function IIFE(){console.log(a);  // 输入 2
})();

IIFE 这个函数会略微有些非凡，算是一种自执行匿名函数，这个匿名函数领有独立的作用域。这不仅能够防止了外界拜访此 IIFE 中的变量，而且又不会净化全局作用域，咱们常常能在高级的 JavaScript 编程中看见此类函数。

如何解决循环输入问题？

在互联网大厂的面试中，解决循环输入问题是比拟高频的面试题，个别都会给一段这样的代码让你来解释

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

下面这段代码执行之后，从控制台执行的后果能够看进去，后果输入的是 5 个 6，那么个别面试官都会先问为什么都是 6？我想让你实现输入 1、2、3、4、5 的话怎么办呢？

因而联合本讲所学的常识咱们来思考一下，应该怎么给面试官一个称心的解释。你能够围绕这两点来答复。

• setTimeout 为宏工作，因为 JS 中单线程 eventLoop 机制 ，在主线程同步工作执行完后才去执行宏工作，因而 循环完结后 setTimeout 中的回调才顺次执行
• 因为 setTimeout 函数也是一种闭包，往上找它的 父级作用域链就是 window，变量 i 为 window 上的全局变量，开始执行 setTimeout 之前变量 i 曾经就是 6 了，因而最初输入的间断就都是 6。

那么咱们再来看看如何按程序顺次输入 1、2、3、4、5 呢？

1. 利用 IIFE

能够利用 IIFE（立刻执行函数），当每次 for 循环时，把此时的变量 i 传递到定时器中，而后执行，革新之后的代码如下。

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

2. 应用 ES6 中的 let

ES6 中新增的 let 定义变量的形式，使得 ES6 之后 JS 产生革命性的变动，让 JS 有了块级作用域，代码的作用域以块级为单位进行执行。通过革新后的代码，能够实现下面想要的后果。

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

3. 定时器传入第三个参数

setTimeout 作为常常应用的定时器，它是存在第三个参数的，日常工作中咱们常常应用的个别是前两个，一个是回调函数，另外一个是工夫，而第三个参数用得比拟少。那么联合第三个参数，调整完之后的代码如下。

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

从中能够看到，第三个参数的传递，能够扭转 setTimeout 的执行逻辑，从而实现咱们想要的后果，这也是一种解决循环输入问题的路径

常见考点

• 闭包能考的很多，概念和口试题都会考。
• 概念题就是考考闭包是什么了。
• 口试题的话根本都会联合上异步，比方最常见的：

for (var i = 0; i < 6; i++) {setTimeout(() => {console.log(i)
  })
}

这道题会问输入什么，有哪几种形式能够失去想要的答案？

为什么 udp 不会粘包？

• TCP 协定是⾯向流的协定，UDP 是⾯向音讯的协定。UDP 段都是⼀条音讯，应⽤程序必须以音讯为单位提取数据，不能⼀次提取任意字节的数据
• UDP 具备爱护音讯边界，在每个 UDP 包中就有了音讯头（消息来源地址，端⼝等信息），这样对于接收端来说就容易进⾏辨别解决了。传输协定把数据当作⼀条独⽴的音讯在⽹上传输，接收端只能接管独⽴的音讯。接收端⼀次只能接管发送端收回的⼀个数据包, 如果⼀次承受数据的⼤⼩⼩于发送端⼀次发送的数据⼤⼩，就会失落⼀局部数据，即便失落，承受端也不会分两次去接管。

垃圾回收

• 对于在 JavaScript 中的字符串，对象，数组是没有固定大小的，只有当对他们进行动态分配存储时，解释器就会分配内存来存储这些数据，当 JavaScript 的解释器耗费完零碎中所有可用的内存时，就会造成零碎解体。
• 内存透露，在某些状况下，不再应用到的变量所占用内存没有及时开释，导致程序运行中，内存越占越大，极其状况下能够导致系统解体，服务器宕机。
• JavaScript 有本人的一套垃圾回收机制，JavaScript 的解释器能够检测到什么时候程序不再应用这个对象了（数据），就会把它所占用的内存开释掉。
• 针对 JavaScript 的来及回收机制有以下两种办法（罕用）：标记革除，援用计数
• 标记革除

v8 的垃圾回收机制基于分代回收机制，这个机制又基于世代假说，这个假说有两个特点，一是新生的对象容易早死，另一个是不死的对象会活得更久。基于这个假说，v8 引擎将内存分为了新生代和老生代。

• 新创建的对象或者只经验过一次的垃圾回收的对象被称为新生代。经验过屡次垃圾回收的对象被称为老生代。
• 新生代被分为 From 和 To 两个空间，To 个别是闲置的。当 From 空间满了的时候会执行 Scavenge 算法进行垃圾回收。当咱们执行垃圾回收算法的时候应用逻辑将会进行，等垃圾回收完结后再继续执行。

这个算法分为三步：

• 首先查看 From 空间的存活对象，如果对象存活则判断对象是否满足降职到老生代的条件，如果满足条件则降职到老生代。如果不满足条件则挪动 To 空间。
• 如果对象不存活，则开释对象的空间。
• 最初将 From 空间和 To 空间角色进行替换。

新生代对象降职到老生代有两个条件：

• 第一个是判断是对象否曾经通过一次 Scavenge 回收。若经验过，则将对象从 From 空间复制到老生代中；若没有经验，则复制到 To 空间。
• 第二个是 To 空间的内存应用占比是否超过限度。当对象从 From 空间复制到 To 空间时，若 To 空间应用超过 25%，则对象间接降职到老生代中。设置 25% 的起因次要是因为算法完结后，两个空间完结后会替换地位，如果 To 空间的内存太小，会影响后续的内存调配。

老生代采纳了标记革除法和标记压缩法。标记革除法首先会对内存中存活的对象进行标记，标记完结后革除掉那些没有标记的对象。因为标记革除后会造成很多的内存碎片，不便于前面的内存调配。所以了解决内存碎片的问题引入了标记压缩法。

因为在进行垃圾回收的时候会暂停利用的逻辑，对于新生代办法因为内存小，每次进展的工夫不会太长，但对于老生代来说每次垃圾回收的工夫长，进展会造成很大的影响。为了解决这个问题 V8 引入了增量标记的办法，将一次进展进行的过程分为了多步，每次执行完一小步就让运行逻辑执行一会，就这样交替运行

React Hooks

• 代码逻辑聚合，逻辑复用
• HOC 嵌套天堂
• 代替 class

React 中通常应用 类定义 或者 函数定义 创立组件:

在类定义中，咱们能够应用到许多 React 个性，例如 state、各种组件生命周期钩子等，然而在函数定义中，咱们却无能为力，因而 React 16.8 版本推出了一个新性能 (React Hooks)，通过它，能够更好的在函数定义组件中应用 React 个性。

函数组件与类组件的比照：无关“优劣”，只谈“不同”

• 类组件须要继承 class，函数组件不须要；
• 类组件能够拜访生命周期办法，函数组件不能；
• 类组件中能够获取到实例化后的 this，并基于这个 this 做各种各样的事件，而函数组件不能够；
• 类组件中能够定义并保护 state（状态），而函数组件不能够；

然而类组件它太重了，对于解决许多问题来说，编写一个类组件切实是一个过于简单的姿态。简单的姿态必然带来昂扬的了解老本，这也是咱们所不想看到的

react hooks 的益处:

1. 跨组件复用: 其实 render props / HOC 也是为了复用，相比于它们，Hooks 作为官网的底层 API，最为轻量，而且革新老本小，不会影响原来的组件层次结构和传说中的嵌套天堂；
2. 类定义更为简单
3. 不同的生命周期会使逻辑变得扩散且凌乱，不易保护和治理；

• 时刻须要关注 this 的指向问题；
• 代码复用代价高，高阶组件的应用常常会使整个组件树变得臃肿；
• 状态与 UI 隔离: 正是因为 Hooks 的个性，状态逻辑会变成更小的粒度，并且极容易被形象成一个自定义 Hooks，组件中的状态和 UI 变得更为清晰和隔离。

留神:

• 防止在 循环 / 条件判断 / 嵌套函数 中调用 hooks，保障调用程序的稳固；
• 只有 函数定义组件 和 hooks 能够调用 hooks，防止在 类组件 或者 一般函数 中调用；
• 不能在 useEffect 中应用 useState，React 会报错提醒；
• 类组件不会被替换或废除，不须要强制革新类组件，两种形式能并存；

重要钩子

1. 状态钩子 (useState): 用于定义组件的 State，其到类定义中 this.state 的性能；

// useState 只承受一个参数: 初始状态
// 返回的是组件名和更改该组件对应的函数
const [flag, setFlag] = useState(true);
// 批改状态
setFlag(false)

// 下面的代码映射到类定义中:
this.state = {flag: true}
const flag = this.state.flag
const setFlag = (bool) => {
    this.setState({flag: bool,})
}

2. 生命周期钩子 (useEffect):

类定义中有许多生命周期函数，而在 React Hooks 中也提供了一个相应的函数 (useEffect)，这里能够看做 componentDidMount、componentDidUpdate 和 componentWillUnmount 的联合。

useEffect(callback,)承受两个参数

• callback: 钩子回调函数；
• source: 设置触发条件，仅当 source 产生扭转时才会触发；
• useEffect 钩子在没有传入参数时，默认在每次 render 时都会优先调用上次保留的回调中返回的函数，后再从新调用回调；

useEffect(() => {
    // 组件挂载后执行事件绑定
    console.log('on')
    addEventListener()

    // 组件 update 时会执行事件解绑
    return () => {console.log('off')
        removeEventListener()}
}, );


// 每次 source 产生扭转时，执行后果(以类定义的生命周期，便于大家了解):
// --- DidMount ---
// 'on'
// --- DidUpdate ---
// 'off'
// 'on'
// --- DidUpdate ---
// 'off'
// 'on'
// --- WillUnmount --- 
// 'off'

通过第二个参数，咱们便可模拟出几个罕用的生命周期:

• componentDidMount: 传入 [] 时，就只会在初始化时调用一次

const useMount = (fn) => useEffect(fn, [])

• componentWillUnmount: 传入[]，回调中的返回的函数也只会被最终执行一次

const useUnmount = (fn) => useEffect(() => fn, [])

• mounted: 能够应用 useState 封装成一个高度可复用的 mounted 状态；

const useMounted = () => {const [mounted, setMounted] = useState(false);
    useEffect(() => {!mounted && setMounted(true);
        return () => setMounted(false);
    }, []);
    return mounted;
}

• componentDidUpdate: useEffect 每次均会执行，其实就是排除了 DidMount 后即可；

const mounted = useMounted() 
useEffect(() => {mounted && fn()
})

3. 其它内置钩子:
4. useContext: 获取 context 对象

• useReducer: 相似于 Redux 思维的实现，但其并不足以代替 Redux，能够了解成一个组件外部的 redux:

  • 并不是长久化存储，会随着组件被销毁而销毁；
  • 属于组件外部，各个组件是互相隔离的，单纯用它并无奈共享数据；
  • 配合 useContext` 的全局性，能够实现一个轻量级的 Redux；(easy-peasy)
• useCallback: 缓存回调函数，防止传入的回调每次都是新的函数实例而导致依赖组件从新渲染，具备性能优化的成果；
• useMemo: 用于缓存传入的 props，防止依赖的组件每次都从新渲染；
• useRef: 获取组件的实在节点；

• useLayoutEffect

  • DOM 更新同步钩子。用法与 useEffect 相似，只是区别于执行工夫点的不同
  • useEffect 属于异步执行，并不会期待 DOM 真正渲染后执行，而 useLayoutEffect 则会真正渲染后才触发；
  • 能够获取更新后的 state；
• 自定义钩子(useXxxxx): 基于 Hooks 能够援用其它 Hooks 这个个性，咱们能够编写自定义钩子，如下面的 useMounted。又例如，咱们须要每个页面自定义题目:

function useTitle(title) {
  useEffect(() => {document.title = title;});
}

// 应用:
function Home() {
    const title = '我是首页'
    useTitle(title)

    return (<div>{title}</div>
    )
}

React Hooks 的限度

• 不要在 循环、条件 或嵌套函数中调用 Hook；
• 在 React 的函数组件中调用 Hook

那为什么会有这样的限度呢？就得从 Hooks 的设计说起。Hooks 的设计初衷是为了改良 React 组件的开发模式。在旧有的开发模式下遇到了三个问题。

• 组件之间难以复用状态逻辑。过来常见的解决方案是高阶组件、render props 及状态治理框架。
• 简单的组件变得难以了解。生命周期函数与业务逻辑耦合太深，导致关联局部难以拆分。
• 常见的有 this 的问题，但在 React 团队中还有类难以优化的问题，他们心愿在编译优化层面做出一些改良。

这三个问题在肯定水平上妨碍了 React 的后续倒退，所以为了解决这三个问题，Hooks 基于函数组件开始设计。然而第三个问题决定了 Hooks 只反对函数组件。

那为什么不要在循环、条件或嵌套函数中调用 Hook 呢？因为 Hooks 的设计是基于数组实现 。在 调用时按程序退出数组中 ，如果应用循环、条件或嵌套函数很有可能导致数组取值错位，执行谬误的 Hook。当然， 本质上 React 的源码里不是数组，是链表。

这些限度会在编码上造成肯定水平的心智累赘，老手可能会写错，为了防止这样的状况，能够引入 ESLint 的 Hooks 查看插件进行预防。

useEffect 与 useLayoutEffect 区别在哪里

• 它们的共同点很简略，底层的函数签名是完全一致的，都是调用的 mountEffectImpl，在应用上也没什么差别，根本能够间接替换，也都是用于解决副作用。
• 那不同点就很大了，useEffect 在 React 的渲染过程中是被异步调用的，用于绝大多数场景，而 LayoutEffect 会在所有的 DOM 变更之后同步调用，次要用于解决 DOM 操作、调整款式、防止页面闪动等问题。也正因为是同步解决，所以须要防止在 LayoutEffect 做计算量较大的耗时工作从而造成阻塞。
• 在将来的趋势上，两个 API 是会长期共存的，临时没有删减合并的打算，须要开发者依据场景去自行抉择。React 团队的倡议十分实用，如果切实分不清，先用 useEffect，个别问题不大；如果页面有异样，再间接替换为 useLayoutEffect 即可。

浏览器存储

咱们常常须要对业务中的一些数据进行存储，通常能够分为 短暂性存储 和 持久性贮存。

• 短暂性的时候，咱们只须要将数据存在内存中，只在运行时可用

• 持久性存储，能够分为 浏览器端 与 服务器端

  • 浏览器:

    • cookie: 通常用于存储用户身份，登录状态等

      • http 中主动携带，体积下限为 4K，可自行设置过期工夫
    • localStorage / sessionStorage: 短暂贮存 / 窗口敞开删除，体积限度为 4~5M
    • indexDB

  • 服务器:

    • 分布式缓存 redis
    • 数据库

cookie 和 localSrorage、session、indexDB 的区别

从上表能够看到，cookie 曾经不倡议用于存储。如果没有大量数据存储需要的话，能够应用 localStorage和 sessionStorage。对于不怎么扭转的数据尽量应用 localStorage 存储，否则能够用 sessionStorage 存储。

对于 cookie，咱们还须要留神安全性

• Name，即该 Cookie 的名称。Cookie 一旦创立，名称便不可更改。
• Value，即该 Cookie 的值。如果值为 Unicode 字符，须要为字符编码。如果值为二进制数据，则须要应用 BASE64 编码。
• Max Age，即该 Cookie 生效的工夫，单位秒，也常和 Expires 一起应用，通过它能够计算出其无效工夫。Max Age如果为负数，则该 Cookie 在 Max Age 秒之后生效。如果为正数，则敞开浏览器时 Cookie 即生效，浏览器也不会以任何模式保留该 Cookie。
• Path，即该 Cookie 的应用门路。如果设置为 /path/，则只有门路为 /path/ 的页面能够拜访该 Cookie。如果设置为 /，则本域名下的所有页面都能够拜访该 Cookie。
• Domain，即能够拜访该 Cookie 的域名。例如如果设置为 .zhihu.com，则所有以 zhihu.com，结尾的域名都能够拜访该 Cookie。Size 字段，即此 Cookie 的大小。
• Http 字段，即 Cookie 的 httponly 属性。若此属性为 true，则只有在 HTTP Headers 中会带有此 Cookie 的信息，而不能通过 document.cookie 来拜访此 Cookie。
• Secure，即该 Cookie 是否仅被应用平安协定传输。平安协定。平安协定有 HTTPS、SSL 等，在网络上传输数据之前先将数据加密。默认为 false。

Vue 响应式原理

Vue 的响应式原理是外围是通过 ES5 的爱护对象的 Object.defindeProperty 中的拜访器属性中的 get 和 set 办法，data 中申明的属性都被增加了拜访器属性，当读取 data 中的数据时主动调用 get 办法，当批改 data 中的数据时，主动调用 set 办法，检测到数据的变动，会告诉观察者 Wacher，观察者 Wacher 主动触发从新 render 以后组件（子组件不会从新渲染）, 生成新的虚构 DOM 树，Vue 框架会遍历并比照新虚构 DOM 树和旧虚构 DOM 树中每个节点的差异，并记录下来，最初，加载操作，将所有记录的不同点，部分批改到实在 DOM 树上。

• 虚构 DOM (Virtaul DOM): 用 js 对象模仿的，保留以后视图内所有 DOM 节点对象根本形容属性和节点间关系的树结构。用 js 对象，形容每个节点，及其父子关系，造成虚构 DOM 对象树结构。
• 因为只有在 data 中申明的根本数据类型的数据，根本不存在数据不响应问题，所以重点介绍数组和对象在 vue 中的数据响应问题，vue 能够检测对象属性的批改，但无奈监听数组的所有变动及对象的新增和删除，只能应用数组变异办法及 $set 办法。

能够看到，arrayMethods 首先继承了 Array，而后对数组中所有能扭转数组本身的办法，如 push、pop 等这些办法进行重写。重写后的办法会先执行它们自身原有的逻辑，并对能减少数组长度的 3 个办法 push、unshift、splice 办法做了判断，获取到插入的值，而后把新增加的值变成一个响应式对象，并且再调用 ob.dep.notify() 手动触发依赖告诉，这就很好地解释了用 vm.items.splice(newLength) 办法能够检测到变动

总结：Vue 采纳数据劫持联合公布—订阅模式的办法，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时公布音讯给订阅者，触发相应的监听回调。

• Observer 遍历数据对象，给所有属性加上 setter 和 getter，监听数据的变动
• compile 解析模板指令，将模板中的变量替换成数据，而后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，增加监听数据的订阅者，一旦数据有变动，收到告诉，更新视图

Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，次要做的事件

• 在本身实例化时往属性订阅器 (dep) 外面增加本人
• 待属性变动 dep.notice() 告诉时，调用本身的 update() 办法，并触发 Compile 中绑定的回调

Object.defineProperty()，那么它的用法是什么，以及优缺点是什么呢？

• 能够检测对象中数据产生的批改
• 对于简单的对象，层级很深的话，是不敌对的，须要经行深度监听，这样子就须要递归到底，这也是它的毛病。
• 对于一个对象中，如果你新减少属性，删除属性，Object.defineProperty()是不能观测到的，那么应该如何解决呢？能够通过 Vue.set() 和Vue.delete()来实现。

// 模仿 Vue 中的 data 选项 
let data = {msg: 'hello'}
// 模仿 Vue 的实例 
let vm = {}
// 数据劫持: 当拜访或者设置 vm 中的成员的时候，做一些干涉操作
Object.defineProperty(vm, 'msg', {// 可枚举(可遍历)
  enumerable: true,
  // 可配置(能够应用 delete 删除，能够通过 defineProperty 从新定义) 
  configurable: true,
  // 当获取值的时候执行 
  get () {console.log('get:', data.msg)
    return data.msg 
  },
  // 当设置值的时候执行 
  set (newValue) {console.log('set:', newValue) 
    if (newValue === data.msg) {return}
    data.msg = newValue
    // 数据更改，更新 DOM 的值 
    document.querySelector('#app').textContent = data.msg
  } 
})

// 测试
vm.msg = 'Hello World' 
console.log(vm.msg)

Vue3.x 响应式数据原理

Vue3.x改用 Proxy 代替 Object.defineProperty。因为Proxy 能够间接监听 对象和数组 的变动，并且有多达 13 种拦挡办法。并且作为新规范将受到浏览器厂商重点继续的性能优化。

Proxy只会代理对象的第一层，那么 Vue3 又是怎么解决这个问题的呢？

判断以后 Reflect.get 的 返回值是否为 Object，如果是则再通过reactive 办法做代理，这样就实现了深度观测。

监测数组的时候可能触发屡次 get/set，那么如何避免触发屡次呢？

咱们能够判断 key 是否为以后被代理对象 target 本身属性，也能够判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger

// 模仿 Vue 中的 data 选项 
let data = {
  msg: 'hello',
  count: 0 
}
// 模仿 Vue 实例
let vm = new Proxy(data, {
  // 当拜访 vm 的成员会执行
  get (target, key) {console.log('get, key:', key, target[key])
    return target[key]
  },
  // 当设置 vm 的成员会执行
  set (target, key, newValue) {console.log('set, key:', key, newValue)
    if (target[key] === newValue) {return}
    target[key] = newValue
    document.querySelector('#app').textContent = target[key]
  }
})

// 测试
vm.msg = 'Hello World'
console.log(vm.msg)

Proxy 相比于 defineProperty 的劣势

• 数组变动也能监听到
• 不须要深度遍历监听

Proxy 是 ES6 中新增的性能，能够用来自定义对象中的操作

let p = new Proxy(target, handler);
// `target` 代表须要增加代理的对象
// `handler` 用来自定义对象中的操作
// 能够很不便的应用 Proxy 来实现一个数据绑定和监听

let onWatch = (obj, setBind, getLogger) => {
  let handler = {get(target, property, receiver) {getLogger(target, property)
      return Reflect.get(target, property, receiver);
    },
    set(target, property, value, receiver) {setBind(value);
      return Reflect.set(target, property, value);
    }
  };
  return new Proxy(obj, handler);
};

let obj = {a: 1}
let value
let p = onWatch(obj, (v) => {value = v}, (target, property) => {console.log(`Get '${property}' = ${target[property]}`);
})
p.a = 2 // bind `value` to `2`
p.a // -> Get 'a' = 2

总结

• Vue

  • 记录传入的选项，设置 $data/$el
  • 把 data 的成员注入到 Vue 实例
  • 负责调用 Observer 实现数据响应式解决(数据劫持)
  • 负责调用 Compiler 编译指令 / 插值表达式等

• Observer

  • 数据劫持

    • 负责把 data 中的成员转换成 getter/setter
    • 负责把多层属性转换成 getter/setter
    • 如果给属性赋值为新对象，把新对象的成员设置为 getter/setter
  • 增加 Dep 和 Watcher 的依赖关系
  • 数据变动发送告诉

• Compiler

  • 负责编译模板，解析指令 / 插值表达式
  • 负责页面的首次渲染过程
  • 当数据变动后从新渲染

• Dep

  • 收集依赖，增加订阅者(watcher)
  • 告诉所有订阅者

• Watcher

  • 本身实例化的时候往 dep 对象中增加本人
  • 当数据变动 dep 告诉所有的 Watcher 实例更新视图

迭代查问与递归查问

实际上，DNS 解析是一个蕴含迭代查问和递归查问的过程。

• 递归查问 指的是查问申请收回后，域名服务器代为向下一级域名服务器发出请求，最初向用户返回查问的最终后果。应用递归 查问，用户只须要收回一次查问申请。
• 迭代查问 指的是查问申请后，域名服务器返回单次查问的后果。下一级的查问由用户本人申请。应用迭代查问，用户须要收回 屡次的查问申请。

个别咱们向本地 DNS 服务器发送申请的形式就是递归查问，因为咱们只须要收回一次申请，而后本地 DNS 服务器返回给我 们最终的申请后果。而本地 DNS 服务器向其余域名服务器申请的过程是迭代查问的过程，因为每一次域名服务器只返回单次 查问的后果，下一级的查问由本地 DNS 服务器本人进行。