# 百度面经系列
1. react和vue的区别
2. JS的数据类型
3. null和undefined的区别
4. ![]的结果
5. 闭包的使用场景
6. 微任务和宏任务
7. 实现JSONP
8. 手写节流
9. 路由两种模式使用场景
10. 数组和链表区别
11. 链表的使用场景
12. 实现点击按钮输出input中字符串的反转
13. PWA
14. 跨域
15. 缓存策略
16. 缓存位置
17. 前端安全
18. 白屏的处理
19. 按需加载
20. HTTP
21. 闭包
22. websocket
23. socket
24. 写一个函数判断页面两个矩形是否相交
25. 介绍项目，介绍项目的难点与创新点
26. 前端项目打包方式
27. 项目前端方面引用技术
28. React的生命周期
29. React的虚拟DOM
30. 事件循环（EventLoop）
31. 解构赋值
32. 箭头函数
33. Promise（写一个promise的实例）
34. 写Promise.all的实现源码
35. 跨域及实现的方式，及比较
36. 同源策略在浏览器具体的表现
37. 回流与重绘，以及如何避免
38. 浏览器的缓存机制
39. 介绍强缓存与协商缓存
40. 对前端工程化方面的理解
41. 介绍一个你自己的项目？
42. 说一下Vue的缺点有哪些？
43. Eventloop循环说一下？
44. Node中的Worker说一下？Node中如何创建多个线程？Node中如何实现开启守护进程？
45. 说一下Express的架构和实现原理？
46. 说一下中间件的实现原理？
47. Express和Koa的区别呢？
48. 说一下Diff算法的本质？abc, acb是如何改变的呢？
49. 说一下红黑树和他的应用场景？
50. Nginx的应用场景说一下？
51. app.use和app.get的区别？
52. node的路由实现原理？
53. Node如何读取大数据量下的数据？
54. 介绍一下项目，项目中的用到的一些技术
55. 移动端的性能优化，rem的原理
56. 点透事件：H5开发中可能遇到的特有的问题
57. 项目后台用的技术栈是什么
58. 跨域问题
59. 常见的http状态码
60. $documnent.ready()  VS  window.onload() 两种方式的区别（哪个先执行）
61. ES6的新特性
62. 箭头函数与普通函数的区别
63. let与var的区别
64. 对vue熟悉吗？（不能算是熟悉，所以vue是硬伤）
65. vue的生命周期
66. 对闭包的理解
68. 常见的git命令
69. 项目中所有人都在master分支上开发吗？还是都有自己的分支？
70. http状态码
71. 输入一个URL的过程
72. es6，promise讲一下
73. 冒泡算法、二分查找、快排，以及时间复杂度、最坏情况
74. 同源策略
75. 跨域
76. xss攻击和预防
77. import和link的区别
78. 水平居中的方式，包括块和文本
79. css3的新特性，说一下单行文本溢出和多行文本溢出
80. less了解吗
81. 设计模式，实现一个登录框，不让用户重复点击弹出多个登录框（使用单例模式）
82. 原型链
83. 优化方法
84. git提交冲突如何解决
85. 实现一个repeat(str,count)函数，str是一个字符串，count是重复的次数。
86. 三个盒子里有一块糖，你挑了一个盒子，然后拿走一个空盒子，问是否更换盒子？
87. 一个为n的台阶，小明可以一次走一步、两步或者五步，问一共几种走法？

1. react和vue的区别
2. JS的数据类型
3. null和undefined的区别
…

【面经系列】百度面经

### 实现一个类型判断函数

1. 判断null
2. 判断基础类型
3. 使用`Object.prototype.toString.call(target)`来判断**引用类型**

> [!NOTE]
> 注意： 一定是使用`call`来调用，不然是判断的Object.prototype的类型

之所以要先判断是否为基本类型是因为：虽然`Object.prototype.toString.call()`能判断出某值是：number/string/boolean，但是其实在包装的时候是把他们先转成了对象然后再判断类型的。 但是JS中包装类型和原始类型还是有差别的，因为对一个包装类型来说，typeof的值是object

```javascript
/**
 * 类型判断
 */
function getType(target) {
  //先处理最特殊的Null
  if(target === null) {
    return 'null';
  }
  //判断是不是基础类型
  const typeOfT = typeof target
  if(typeOfT !== 'object') {
    return typeOfT;
  }
  //肯定是引用类型了
  const template = {
    "[object Object]": "object",
    "[object Array]" : "array",
    "[object Function]": "function",
    // 一些包装类型
    "[object String]": "object - string",
    "[object Number]": "object - number",
    "[object Boolean]": "object - boolean"
  };
  const typeStr = Object.prototype.toString.call(target);
  return template[typeStr];
}
```

# 升级版本
```js
// typeof可以检测基本数据类型
// Undefined, Null, Boolean, Number, String, Objec
// undefined, object, boolean, number, string, object

// 以下是11种：
var number = 1;          // [object Number]
var string = '123';      // [object String]
var boolean = true;      // [object Boolean]
var und = undefined;     // [object Undefined]
var nul = null;          // [object Null]
var obj = {a: 1}         // [object Object]
var array = [1, 2, 3];   // [object Array]
var date = new Date();   // [object Date]
var error = new Error(); // [object Error]
var reg = /a/g;          // [object RegExp]
var func = function a(){}; // [object Function]

function checkType() {
    for (var i = 0; i < arguments.length; i++) {
        console.log(Object.prototype.toString.call(arguments[i]))
    }
}

checkType(number, string, boolean, und, nul, obj, array, date, error, reg, func)

console.log(Object.prototype.toString.call(Math)); // [object Math]
console.log(Object.prototype.toString.call(JSON)); // [object JSON]

function a() {
    console.log(Object.prototype.toString.call(arguments)); // [object Arguments]
}

a();

// TODO:Object.toString()的理解？
/*1. 如果 this 值是 undefined，就返回 [object Undefined]
  2. 如果 this 的值是 null，就返回 [object Null]
  3. 让 O 成为 ToObject(this) 的结果
  4. 让 class 成为 O 的内部属性 [[Class]] 的值
  5. 最后返回由 "[object " 和 class 和 "]" 三个部分组成的字符串*/

// TODO:封装一个通用的type API？
// v1: 基础版本
var class2type = {};

'Undefined Null String Number Boolean Object Function Array Date RegExp Error'
    .split(' ')
    .map(function (item) {
        // 开始建立映射关系
        class2type[`[object ${item}]`] = item.toLowerCase();
    })

function type(obj) {
    return typeof obj === 'object' || typeof obj === 'function'
        ? class2type[Object.prototype.toString.call(obj)] || 'object'
        : typeof obj;
}

// v2:在 IE6 中，null 和 undefined 会被 Object.prototype.toString 识别成 [object Object]！
// TODO: 解决IE6下的null和undefined 会被识别为[object Object]?
var class2type = {};
'Undefined Null String Number Boolean Object Function Array Date RegExp Error'
    .split(' ').map(function (item) {
    class2type[`[object ${item}]`] = item.toLowerCase();
})

/**
 * 查看type的基础类型
 * @param obj
 * @return {string|*}
 */
function type(obj) {
    // 开始解决ie下的兼容问题
    if (obj == null) {
        return obj + '';
    }
    return typeof obj === 'object' || obj === 'function'
            //  ES6 新增的 Symbol、Map、Set 等类型，它们并不在 class2type 列表中，所以使用 type 函数，返回的结果会是 object
            ? class2type[Object.prototype.toString.call(obj)] || 'object'
            : typeof obj;
}

/**
 * 查看obj是否为函数累类型
 * @param obj
 * @return {boolean}
 */
function isFunction(obj) {
    return type(obj) === 'function';
}


/**
 * 注意这里的isArray是一个函数，并不是一个函数执行的结果
 * @type {((arg: any) => arg is Array<any>) | (function(*=): boolean)}
 */
var isArray = Array.isArray || function (obj) {
    return type(obj) === 'array';
}


// TODO: plainObject, 就是该对象是通过 "{}" 或 "new Object" 创建的，该对象含有零个或者多个键值对?
// 存放toString的映射结果
var class2type = {};
// Object.prototype.toString
var toString = class2type.toString();
// Object.prototype.hasOwnProperty
var hasOwn = class2type.hasOwnProperty;

function isPlainObject(obj) {
    // 排除掉宿主对象 eg: toString.call(window) === '[objct window]'
    if (!obj || toString.call(obj) !== '[object Object]') {
        return false;
    }

    /**
     * Object.getPrototypeOf() 方法返回指定对象的原型（即, 内部[[Prototype]]属性的值）,如果没有继承属性，则返回 null 。
     * eg: obj.__proto__ === Object.protptype
     * @type {any}
     */
    var proto = Object.getPrototypeOf(obj);
    // 如果没有原型对象的话，eg:Object.create(null), 就是纯对象
    if (!proto) {
        return true;
    }

    // 通过new Object方式创建的对象
    // 判断 proto 是否有 constructor 属性，如果有就让 Ctor 的值为 proto.constructor
    var Constructor = hasOwn.call(proto, 'constructor') && proto.constructor;

    // 判断Constructor是不是Object的构造函数
    return typeof Constructor === 'function' && hasOwn.toString.call(Constructor) === hasOwn.toString.call(Object);
}


// TODO: EmptyObject如何判断？
function isEmptyObject(obj) {
    var name;
    // 看一下当前的这个obj对象有没有属性，如果有的话就返回false
    for (name in obj) {
        // 遍历的不仅仅是obj自身的属性，而且也遍历了obj原型上的属性
        return false;
    }
    return true;
}
// test
console.log(isEmptyObject({})); // true
console.log(isEmptyObject([])); // true
console.log(isEmptyObject(null)); // true
console.log(isEmptyObject(undefined)); // true
console.log(isEmptyObject(1)); // true
console.log(isEmptyObject('')); // true
console.log(isEmptyObject(true)); // true


// TODO: 判断是否为window对象？
// window对象的window属性指向其本身
function isWindow(obj) {
    return obj != null && obj == obj.window;
}

// TODO: 判断是否为document对象？
function isDocument(obj) {
    return obj != null && obj.nodeType == obj.DOCUMENT_NODE;
}

// TODO: 判断是不是DOM元素
function isDOMElement(obj) {
    // 这里需要强制把返回的结果转换为bool类型，eg:obj = undefined,!!undefined=r\true
    return !!(obj && obj.nodeType === 1);
}


// TODO: isArrayLike如何实现？(可以判断数组和伪数组类型)
function isArrayLike(obj) {
    // 1. 先看obj有没有length属性
    var length = !!obj && ('length' in obj) && obj.length;
    var typeRes = type(obj);

    // 2. 排除掉函数和window对象, window也是有length属性的
    if (typeRes === 'function' || isWindow(obj)) {
        return false;
    }

    // 3. 开始处理结果
    return typeRes === 'array'                  // 1. 是数组类型
            || length === 0                     // 2. 长度为0(函数中的arguments参数)
            || typeof length === 'number'
            && length > 0
            && (length - 1) in obj;             // 3. length 属性是大于 0 的数字类型，并且obj[length - 1]必须存在(符合条件的类数组对象是一定存在最后一个元素的)

}

// underscore 如何实现的？
function isArrayLike(collection) {
    var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
    var length = getLength(collection);
    return typeof length === 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
}
```

【编程题与分析题】类型检测

# Ajax 

## 1. 介绍一下ajax并代码实现 
### 1.1 基本概念 
>  avaScript 和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性，也就是说他可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

[Ajax | MDN](https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX)


### 1.2 创建一个简单的Ajax

 - 创建 XMLHttpRequest 对象
```js
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
```

 - 绑定onreadystatechange 事件
```js
httpRequest.onreadystatechange = function(){
    // Process the server response here.
};
```

 - 向服务器发送请求
```js
httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();
```

完整的例子
```js
function ajax(url, cb) {
  let xhr;
  if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
      cb(xhr.responseText);
    }
  }
  xhr.open('GET', url, true);
  xhr.send();
}
```

### 1.3 httpRequest.readyState的值(熟记)

 - 0 (未初始化) or (请求还未初始化)
 - 1 (正在加载) or (已建立服务器链接)
 - 2 (加载成功) or (请求已接受)
 - 3 (交互) or (正在处理请求)
 - 4 (完成) or (请求已完成并且响应已准备好)


### 1.4 访问服务端返回的数据

 - httpRequest.responseText
   - 服务器以文本字符的形式返回
 - httpRequest.responseXML
   - 以 XMLDocument 对象方式返回，之后就可以使用JavaScript来处理


### 1.5 GET 注意事项

 -  如果不设置响应头 `Cache-Control: no-cache` 浏览器将会把响应缓存下来而且再也不无法重新提交请求。你也可以添加一个总是不同的 GET 参数，比如时间戳或者随机数 (详情见 [bypassing the cache](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache))


### 1.6 POST 请求
> [!NOTE]
> POST请求则需要设置`RequestHeader`告诉后台传递内容的编码方式以及在send方法里传入对应的值

```js
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type": "application/x-www-form-urlencoded");
xhr.send("key1=value1&key2=value2");
```


### 1.7 Ajax如何携带cookie(面试加分)
 - ajax会自动带上同源的cookie，不会带上不同源的cookie
 - 可以通过前端设置withCredentials为true， 后端设置Header的方式让ajax自动带上不同源的cookie，但是这个属性对同源请求没有任何影响。会被自动忽略。

[withCredentials | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials)

```js
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);
```


【计算机网络】Ajax

# 运行环境	
## 4.1 页面加载过程	
### 4.1.1 从输入url到得到HTML的详细过程	
> [!NOTE]
> 参考计算机网络章节考点总结

### 4.1.2 window.onload和DOMContentLoaded的区别	
1. onload: 会在页面上的全部资源加载完毕之后执行（包括图片、视频）
2. DOMContentLoaded：（会在页面的DOM渲染完成之后执行，此时页面图片、视频还可能没有加载完毕）
3. jQuery和zepto这些类似的类库都是使用DOMContentLoaded来实现的

### 4.1.3 浏览器加载资源的形式有哪些？	
1. 输入url（或跳转页面）加载html---（eg: 输入http://www.baidu.com）
2. 加载html中的静态资源（CSS，JS，图片等）

### 4.1.4 描述一下浏览器渲染页面的过程	
1. 根据HTML结构生成DOM Tree（单个节点，没样式）
2. 根据CSS生成CSSOM（CSS对象模型）
3. 将DOM和CSSOM整合生成一个RenderTree（每个节点都有自己的样式）
4. 根据RenderTree开始渲染和显示
5. 遇到**script**标签的时候，会执行并阻塞渲染（渲染权交给了js）----JS加载完毕之后然后执行代码
   
### 4.1.5 CSS和JS的位置问题？
#### CSS
1. 浏览器是自上而下进行解析的，防止出现多次渲染
2. CSS加载不会阻塞DOM树的解析，但是会阻塞DOM树的加载、css加载会阻塞后面js语句的执行

#### JS
1. 可以让页面快速的展示，提升性能
2. 可以在此处获取到页面上所有的标签


## 4.2 性能优化	
### 4.2.1 前端性能优化的方法有哪些	
1. 资源的合并和压缩（HTML，CSS，JS压缩混淆，文件合并）
2. 图片资源的优化
   图片压缩处理
   CSS雪碧图
   Image Inline（Base64编码）
   使用SVG和webp格式的图片
### 4.2.2 懒加载和预加载的区别和实现原理?
> [!NOTE]
> - 懒加载的实现：当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中

> - 预加载的实现：提前加载图片，当用户需要查看时可直接从本地缓存中渲染
1.	使用img标签
2.	创建img对象
3.	Ajax请求（跨域问题）

### 4.2.3 重绘和回流的区别？
> [!NOTE]
> 重绘：当render tree中的一些元素需要更新属性（只影响元素外观、风格，不影响布局）

> 回流：当render tree中的一部分因为元素的尺寸、布局、隐藏等盖面需要重新构建（页面布局和集合属性改变）

#### 避免重绘和回流的两种方法
1.	使用不会触发回流的标签（避免使用触发重绘、回流的CSS属性）
2.	将重绘、回流的影响范围限制在单独的图层之内

#### 开启浏览器自动创建图层的方法
1. transform:translatez(0)
2. z-index
3. **video** 和 **canvas**标签

#### 性能优化点：
1. 使用top会触发回流，translate不会（transform : translaeY(0)）
2. 使用opacity替换visibility（visibility会触发重绘）
3. 使用className替代style

## 4.3 安全问题	
### 4.3.1	前端的安全问题及预防措施	
#### XSS攻击
利用用户的cookie进行恶意欺骗（cookie发送到外部服务器）[标签转义、白名单、黑名单过滤]
#### CSRF攻击
论坛发送了一个删帖的API链接（图片），结果删除了自己的帖子。[恶意发帖、删帖]（验证码、token）
#### 二者区别
XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包



【JS相关】运行环境

4.1.1 从输入url到得到HTML的详细过程

4.1.2 window.onload和DOMContentLoaded的区别

4.1.3 浏览器加载资源的形式有哪些？

4.1.4 描述一下浏览器渲染页面的过程

4.2.1 前端性能优化的方法有哪些

4.2.2 懒加载和预加载的区别和实现原理?

开启浏览器自动创建图层的方法

4.3.1   前端的安全问题及预防措施

# 腾讯面经系列
1. js基本数据类型
2. js的作用域
3. 如何判断一个数组是数组
4. BOM 和 DOM的区别
5. 有一个 字符串里面有很多is 请写一个方法只保留一个is          
6. 问了sql注入和防御，我说我有点忘了，把话题转移到了xss
7. 问了node 问了如何用experess搭建服务器
8. js 的event-loop
9. 有3个-10--10之间的整数，写一个方法这三个数一共有多少可能想加等于10 
10. redux
11. react vue 的一些基础
12. 说一下思路，如何把一个图片的地址，传到服务器，并保存在服务器 
13. 用js中的正则表达式去掉两边的空格                           
14. 堆和栈的区别
15. 快排，怎么判断快排排好了
16. dom操作，怎么遍历所有dom节点，根div下有两div(A与B)，每个div下面又有两个span(A1,A2)与span(B1、B2)，怎么将spanA1与A2存在一个数组，B1与B2存在一个数组，树的遍历算法，这个题应该用深度优先还是广度优先，用什么数据结构。
17. tcp慢启动
18. tcp三次、四次握手
19. https握手，加密方式是对称还是非对称
20. 强缓存、弱缓存
21. 修改this的方法，apply和call区别
22. 对JS闭包的理解
23. 原型链
24. 事件冒泡与捕获
25. 原生ajax请求 带cookie
26. jsonp怎么反回后台数据
27. 跨域后台怎么设置
28. es6 class怎么用es5实现
29. 怎么实现动画，canvas动画与svg区别
30. css动画优化
31. promise原理怎么实现
32. `水平垂直居中`
33. 从浏览器输入URL会发生什么
34. 浏览器渲染 ，css、js会阻塞dom树加载吗
35. xss怎么防御
36. 前端怎么实现富文本编辑器
37. PWA（Progressive Web App）
38. Service Worker
39. 后台广播
40. http 长、短轮训
41. 前端缓存，很长的数据缓存怎么选择
42. 301与302区别，什么时候返回304
43. http1.1和http2.0的区别
44. CDN有没有了解
45. 怎样判断Object和Array，Object有父对象么
46. CSS positon的属性有常见三个值 absolute fixed relative 这三个值有什么区别 是怎么用的，这三个跟文档流的关系？
47. 两个单位em和rem，是怎么用的，有什么区别
48. js中的类数组
49. 能不能改写一个数组的push方法，不是重写，也不是新写，保持原来的逻辑之外，再添加一个consle.log（arguements）在控制台打印出来，比如pushA。在工作台把A打印出来，push什么就打印什么。原来的逻辑不能改？
50. 学习前端的方式有哪些？看哪些博客？看过哪些书？
51. JS如何改变函数上下文
52. bind/call/apply有什么区别？
53. bind调用时传入一个参数，此参数跟函数原有的参数什么关系？
54. CSS继承属性有哪些？列举3个
55. 块级元素有哪些？
56. CSS position有哪些取值？
57. 一个div,position设置为absolute,再用JS设置div.style.position=""，问这时div的表现？怎么去判断？
58. 如何检测浏览器所支持的最小字体大小？
59. 怎么做JS代码Error统计？
60. 一张高清图片，怎么保证其在不同移动端设备上的显示效果？
61. html中一进入就一直页面缓冲不出来组件怎么办
62. 怎么使用纯css实现一个三角形
63. html不同页面之间怎么共享数据
64. 垃圾回收机制是怎么样
65. 一个5升瓶子和一个6升瓶子怎么装3升水
66. 为什么js是单线程？怎么解决
67. 如何定义私有字段
68. git add commit 区别 commit到哪？
69. 用过webpack吗？怎么用的？css文件
70. HTTP 如何标记缓存
71. etag和exprises 哪个用得比较多 为什么
72. 35分时针分针夹角几度
73. 实现一个input输入框，实现在一个arr数组查询命中和自动补齐效果
74. 实现一个函数，完成超过范围的两个大整数相加功能
75. diff算法，树的深搜广搜
76. 缓存机制，如何缓存图片
77. 非递归便利二叉树
78. web性能优化
79. 浏览器连接限制，编码怎么解决，http2.0
80. 网络安全, xss, csrf
81. 有一个数组，对这个数组按顺序进行异步处理，一个处理完才开始下一个，然后问用foreach行不行。
82. 介绍发一个Ajax请求的链路全过程。IP地址怎样获取？
83. 如何让一个cookie同时用于a.qq.com和b.qq.com？
84. 有一个a.qq.com的图片发到百度贴吧上，会不会带上那个cookie？
85. 快排原理，时间空间复杂度，为什么空间复杂度是log2n？
86. Vue响应式原理。
87. 介绍项目，说其中的难点。
88. 介绍归并排序原理。
89. 说一下nodejs的原理（？？？不会，只说了事件驱动balabala）
90. https（又是https）
91.  从海量十亿个数选最大的一百个，你有什么方法？
92.  除了Vue还会什么？
93.  React-router和路由的实现的方式有哪些？
94.  移动端的适配问题？字体大小一致？
95.  移动端的30ms点击延迟问题?如何解决？
96.  node和ES6规范的差别？
97.  module.exports和exports 的区别，与CommonJS的联系？
98.  export 和 export default 的区别？
99.  Canvas的性能如何优化？
100. JS的原型是什么？
101. webpack的底层实现原理，懒加载的配置
102. CSS雪碧图和Base64编码的选择？Base64编码原理？
103. get请求的url地址如何通过post方式发送？
104. 浏览器的缓存策略？
105. 将一个div容器移动到另外一个div容器的过程？
106. 实现一个原生的ajax封装？
107. 浏览器路由的实现方式有哪些?
108. 输入URL到内容完全展示出来的过程？
109. HTTPS和HTTP的原理和区别？
110. Webpack和Gulp的区别
111. URL请求的过程
112. 首页渲染问题如何优化, 前端的性能优化方式有哪些？
113. 网站首页白屏错误如何排查？实时监控？
114. 如何解决JS的回调地狱问题?
115. CSS的margin重叠问题如何解决？
116. mvvm  mvc；
117. 单页应用 多页应用的优缺点；
118. 前后分离 不分离 哪一个更安全 区别  页面的响应是前端还是后端；
119. typeScript；
120. this指针；
121. 原型链；
122. https；
123. 维持登录状态；
124. es6常用；
125. ccs3用过什么；
126. 浏览器怎么适配；
127. 你封装过什么组件；
128. js怎么优化；
129. 工程化。webpack；
130. webpack工作原理；
131. 和同事关系不好，怎么办；
132. 一个5升  一个6升  空瓶子  怎么弄出来2l水；
133. 上海高铁到杭州 杭州飞机到老家 现在高铁晚点了  怎么办  （今天必须回家）；
134. react生命周期
135. url的整个过程，越多越好；
136. 跨域的方式，越多越好；
137. web优化的方式，越多越好；
138. react生命周期，和vue比较，要求多说；
139. rsa算法，esa算法；
140. linux查看进程的命令；
141. 一个很大的数据集包括192.168.0.1 -24/32/30 给一个ip地址怎么知道在不在这个数据集中；
142. 给一亿个长度不一样的字符串，怎么判断一个随机长度的字符串在不在这个里面（字典树）；
143. 给一堆整数，怎么判断这个整数在不在这一堆数里面（位图）；
144. 一个表有姓名年龄课程，sql数据库找每个人的最高成绩，课程名，姓名。
145. 说一下url；
146. xss怎么预防；
147. http说一下；
148. get post区别；
149. tcp三次握手和四次分手，都有什么标志；
150. pv uv是啥；
151. h5用过什么；
152. xml json区别；
153. web优化；
154. mysql引擎；
155. 浏览器引擎有什么；
156. 页面渲染的过程；
157. http劫持怎么预防；
158. ngnix反向代理服务器

1. js基本数据类型
2. js的作用域
3. 如何判断一个数组是数组
4. BOM 和 DOM的区别
…

【面经系列】腾讯面经

# JS基础知识
## 1.	javascript的typeof返回哪些数据类型
```js
   alert(typeof [1, 2]); //object
    alert(typeof 'leipeng'); //string
    var i = true; 
    alert(typeof i); //boolean
    alert(typeof 1); //number
    var a; 
    alert(typeof a); //undefined
    function a(){;};
alert(typeof a) //function
typeof isNaN  function
检测数组的几种方式：
Array.isArray(arr);   es5
Object.toString.call([]) === ‘object Array’
arr instanceof Array
arr.constructor === Array
```
## 2.	例举3种强制类型转换和2种隐式类型转换?
强制（parseInt(),parseFloat(),Number()）
隐式（== ,!!）
## 3.	split() 、join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串
## 4.	数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
## 5.	事件绑定和普通事件有什么区别
普通添加事件的方法：
```js
var btn = document.getElementById("hello");
btn.onclick = function(){
	alert(1);
}
btn.onclick = function(){
	alert(2);
}
执行上面的代码只会alert 2 

事件绑定方式添加事件：
var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
	alert(1);
},false);
btn.addEventListener("click",function(){
	alert(2);
},false);
执行上面的代码会先alert 1 再 alert 2
1.	普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。
2.	普通事件绑定不支持DOM事件流，事件捕获-目标元素-事件冒泡（可以把事件绑定在不同的阶段去执行）
3.	addEventListener不兼容低版本IE，第三个参数默认为false，表示在事件冒泡阶段执行
普通事件无法取消；第三个参数为true的时候表示在事件捕获的阶段执行；不需要on前缀；
addEventLisntener还支持事件冒泡+事件捕获；
4.	addEventLisntener同一个元素绑定完全相同的事件并不会覆盖掉前面的事件
5.	attachEvent只支持事件冒泡，不支持事件捕获。
```
## 6.	IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
## 7.	IE和标准下有哪些兼容性的写法
Var ev = ev || window.event；   // 获取触发事件对象
Var target = ev.srcElement||ev.target  // 获取触发事件的源对象
document.documentElement.clientWidth || document.body.clientWidth
## 8.	call和apply的区别
call方法: 
语法：call(thisObj，Object1,Object2...)
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 

apply方法： 
语法：apply(thisObj，[argArray])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。 
说明： 
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。 
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。
## 9.	b继承a的方法
原型链继承
借用构造函数继承
原型+构造函数组合继承
寄生式继承
```js
function A( age, name ){ 
  this.age = age; 
  this.name = name; 
} 

A.prototype.show = function(){ 
  alert('父级方法'); 
} 

function B(age,name,job){ 
  A.apply( this, arguments ); 
  this.job = job; 
} 

B.prototype = new A();
var b = new A(14,'侠客行'); 
var a = new B(15,'狼侠','侠客'); 
```
## 10.	如何阻止事件冒泡和默认事件
canceBubble()只支持IE,return false,stopPropagation()
## 11.	JS创建对象的几种方式？
对象字面量 / Object构造函数
构造函数
纯构造函数
空构造函数 + 原型
混合构造函数 + 原型
动态原型
```js
// 动态原型的使用
    function Person(name, work) {
        this.name = name;

        // JS中通过if条件动态给一个对象添加属性或者方法的过程就是动态原型
        if (work) {
            Person.prototype.working = function () {
                console.log('我的工作是：', work);
            }
        }
    }
寄生构造函数
Object.create()
```
## 12.	this指针，闭包，作用域
闭包： 收敛权限，避免变量全局污染；可以实现模块化（jQuery）
```js
// 立即执行函数
    var common = (function () {
        var name = 'common module';
        function initPage() {
            console.log(name);
        }

        // 向外暴露一个对象
        return {
            initpage : initPage
        }
    })();

    common.initpage();
// 使用闭包函数实现点击弹出真实索引
    var lis = document.querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
        (function (i) {
            lis[i].addEventListener('click', function () {
                alert(i);
            })
        })(i);
    }
```
## 13.	添加 删除 替换 插入到某个接点的方法
```js
obj.appendChid()
obj.insertBefore()
obj.replaceChild()
obj.removeChild()
```
## 14.	javascript的本地对象，内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主对象为浏览器自带的document,window 等
## 15.	window.onload 和document ready的区别
window.onload 是在dom文档树加载完和所有文件加载完之后执行一个函数Document.ready原生种没有这个方法，jquery中有 $().ready(function),在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。
$(document).ready要比window.onload先执行
window.onload只能出来一次，$(document).ready可以出现多次
## 16.	”==”和“===”的不同
前者会自动转换类型
后者不会
## 17.	javascript的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、议和端口号的组合。
Ajax跨域的实现，JSONP的底层实现原理，如何解决跨域请求
## 18.	JavaScript是一门什么样的语言，它有哪些特点？
没有标准答案。
javaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。JavaScript兼容于ECMA标准，因此也称为ECMAScript。
基本特点
1．是一种解释性脚本语言（代码不进行预编译）。
2．主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
3．可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
4．跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
## 19.	JavaScript的数据类型都有什么？
基本数据类型：String,boolean,Number,Undefined, Null
引用数据类型：Object(Array,Date,RegExp,Function)
那么问题来了，如何判断某变量是否为数组数据类型？
方法一.判断其是否具有“数组性质”，如slice()方法。可自己给该变量定义slice方法，故有时会失效
方法二.obj instanceof Array 在某些IE版本中不正确
方法三.方法一二皆有漏洞，在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性，最好的方法如下：
```js
	if(typeof Array.isArray==="undefined")
{
  Array.isArray = function(arg){
        return Object.prototype.toString.call(arg)==="[object Array]"
    };  
}
```

## 20.	已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)
	document.getElementById(“ID”).value
## 21.	希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)
```js
	var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length;　　//缓存到局部变量
while (len--) {　　//使用while的效率会比for循环更高
　　if (domList[len].type == ‘checkbox’) {
    　　checkBoxList.push(domList[len]);
　　}
}
```

## 22.	设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)
```js
var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color = “#000”
```

## 23.	当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？
直接在DOM里绑定事件：<div onclick=”test()”></div>
在JS里通过onclick绑定：xxx.onclick = test
通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)
那么问题来了，Javascript的事件流模型都有什么？
“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡
## 24.	看下列代码输出为何？解释原因。
```js
var a;
alert(typeof a); // undefined
alert(b); // 报错
```
解释：Undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。
## 25.	看下列代码,输出什么？解释原因。
```js
var a = null;
alert(typeof a); //object
```
解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。
## 26.	看下列代码,输出什么？解释原因。
```js
var undefined;
undefined == null; // true
1 == true;   // true
2 == true;   // false
0 == false;  // true
0 == '';     // true
NaN == NaN;  // false
[] == false; // true
[] == ![];   // true
```
•	undefined与null相等，但不恒等（===）
一个是number一个是string时，会尝试将string转换为number
尝试将boolean转换为number，0或1
尝试将Object转换成number或string，取决于另外一个对比量的类型
所以，对于0、空字符串的判断，建议使用 “===” 。“===”会先判断两边的值类型，类型不匹配时为false。
那么问题来了，看下面的代码，输出什么，foo的值为什么？

```js
var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);   // number
```
执行完后foo的值为111，foo的类型为number。
## 27.	看代码给答案。
```js
var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);
```
答案：2（考察引用数据类型细节）

## 28. 已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。
答案：alert(stringArray.join(“ ”))		// 注意中间的空格

## 29.	已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。
```js
	function combo(msg){
    var arr=msg.split("-");
    for(var i=1;i<arr.length;i++){
        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
    }
    msg=arr.join("");
    return msg;
}
```
## 30.	var numberArray = [3,6,2,4,1,5]; （考察基础API）
1) 实现对该数组的倒排，输出[5,1,4,2,6,3]
numberArray.reverse()
2) 实现对该数组的降序排列，输出[6,5,4,3,2,1]
numberArray.sort(function(a,b){return b-a})
## 31.	输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26
```js
var d = new Date();
// 获取年，getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月，月份比较特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? '0' + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);
```
## 32.	将字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）
答案："<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>".replace(/{\$id}/g, '10').replace(/{\$name}/g, 'Tony');
## 33.	为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义
```js
	function escapeHtml(str) {
return str.replace(/[<>”&]/g, function(match) {
    switch (match) {
                   case “<”:
                      return “&lt;”;
                   case “>”:
                      return “&gt;”;
                   case “&”:
                      return “&amp;”;
                   case “\””:
                      return “&quot;”;
      }
  });
}
```
## 34.	foo = foo||bar ，这行代码是什么意思？为什么要这样写？
答案：if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。
短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。
## 35.	看下列代码，将会输出什么?(变量声明提升)
```js
	var foo = 1;
(function(){
    console.log(foo);
    var foo = 2;
    console.log(foo);
})()
```
答案：输出undefined 和 2。上面代码相当于：
```js
	var foo = 1;
(function(){
    var foo;
    console.log(foo); //undefined
    foo = 2;
    console.log(foo); // 2;   
})()
```
函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部，但是只提升名称不会提升赋值部分。
## 36.	用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。
```js
	function randomNub(aArray, len, min, max) {
               if (len >= (max - min)) {
                   return '超过' + min + '-' + max + '之间的个数范围' + (max - min - 1) + '个的总数';
               }
               if (aArray.length >= len) {
                   aArray.sort(function(a, b) {
                       return a - b
                   });
                   return aArray;
               }
               var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);
               for (var j = 0; j < aArray.length; j++) {
                   if (nowNub == aArray[j]) {
                       randomNub(aArray, len, min, max);
                       return;
                   }
               }
               aArray.push(nowNub);
               randomNub(aArray, len, min, max);
               return aArray;
           }
var arr=[];
randomNub(arr,10,10,100);
```
## 37.	把两个数组合并，并删除第二个元素。
```js
var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);
```
## 38.	怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）
1）创建新节点
createDocumentFragment()    //创建一个DOM片段
createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点
2）添加、移除、替换、插入
appendChild()      //添加
removeChild()      //移除
replaceChild()      //替换
insertBefore()      //插入
3）查找
getElementsByTagName()    //通过标签名称
getElementsByName()     //通过元素的Name属性的值
getElementById()        //通过元素Id，唯一性
## 39.	有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。
答案：
```js
	function serilizeUrl(url) {
    var urlObject = {};
    if (/\?/.test(url)) {
        var urlString = url.substring(url.indexOf("?") + 1);
        var urlArray = urlString.split("&");
        for (var i = 0, len = urlArray.length; i < len; i++) {
            var urlItem = urlArray[i];
            var item = urlItem.split("=");
            urlObject[item[0]] = item[1];
        }
        return urlObject;
    }
    return null;
}
```
## 40.	正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？
答案：当使用RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\\表示一个\）。使用正则表达字面量的效率更高。 
邮箱的正则匹配：
```js
	var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
```


【前端面试题】JS基础

1.   javascript的typeof返回哪些数据类型

2.   例举3种强制类型转换和2种隐式类型转换?

4.   数组方法pop() push() unshift() shift()

5.   事件绑定和普通事件有什么区别

7.   IE和标准下有哪些兼容性的写法

10.  如何阻止事件冒泡和默认事件

13.  添加 删除 替换 插入到某个接点的方法

14.  javascript的本地对象，内置对象和宿主对象

15.  window.onload 和document ready的区别

18.  JavaScript是一门什么样的语言，它有哪些特点？

19.  JavaScript的数据类型都有什么？

20.  已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)

21.  希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)

22.  设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)

23.  当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？

24.  看下列代码输出为何？解释原因。

25.  看下列代码,输出什么？解释原因。

26.  看下列代码,输出什么？解释原因。

28. 已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。

29.  已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。

30.  var numberArray = [3,6,2,4,1,5]; （考察基础API）

31.  输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26

32.  将字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）

33.  为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义

34.  foo = foo||bar ，这行代码是什么意思？为什么要这样写？

35.  看下列代码，将会输出什么?(变量声明提升)

36.  用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。

37.  把两个数组合并，并删除第二个元素。

38.  怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）

39.  有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。

40.  正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？

# 函数

## 1. JS编译解析的流程

### 1.1 JS运行分三步
语法分析（通篇扫描是否有语法错误），预编译（发生在函数执行的前一刻），解释执行（一行行执行）。


### 1.2 预编译执行分五步
1. 创建AO对象（Activation Object  执行期上下文）

2. 找形参和变量声明，将变量和形参名作为AO属性名，值为undefined. 变量声明提升（变量放到后面也不会报错，只是未定义类型）如：console.log(a);var a=10;结果undenfined;

3. 将实参值和形参统一（传参）

4. 在函数体里面找到函数声明{函数声明整体提升（相当于放到程序最前面）}

5. 值赋予函数体，执行（声明函数和变量的部分直接不看了）


## 2. 函数作用域和作用域链
### 2.1 函数作用域

> 每个javascript函数都是一个对象，对象中有的属性可以访问，有的不能，这些属性仅供javascript引擎存取，如[[scope]]。

[[scope]]就是函数的作用域，其中存储了执行期上下文的集合。

**执行期上下文**： 当函数执行时，会创建一个称为执行期上下文的内部对象（AO）。一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行期上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行期上下文，当函数执行完毕，它所产生的执行上下文被销毁。


### 2.2 作用域链
`[[scope]]`中所存储的执行期上下文对象的集合，这个集合呈链式链接，我们称这种链式链接为作用域链。查找变量时，要从作用域链的顶部开始查找。Activation Object（AO）到Global Object（GO）。

![function](../../img/function.png)
![a定义](../../img/define.png)
![a run](../../img/run.png)
![b define](../../img/bdefine.png)
![b run](../../img/brun.png)



### 2.3 闭包
> [!NOTE]
> 当内部函数被保存到外部时，将会生成闭包。生成闭包后，内部函数依旧可以访问其所在的外部函数的变量。

> 闭包问题的解决方法：立即执行函数、let

#### 2.3.1 详细解释

1. 当函数执行时，会创建一个称为**执行期上下文的内部对象（AO）**，执行期上下文定义了一个函数执行时的环境。

2. 函数还会获得它所在作用域的**作用域链**，是存储函数能够访问的所有执行期上下文对象的集合，即这个函数中能够访问到的东西都是沿着作用域链向上查找直到全局作用域。

3. 函数每次执行时对应的执行期上下文都是独一无二的，当函数执行完毕，函数都会失去对这个作用域链的引用，JS的垃圾回收机制是采用引用计数策略，如果一块内存不再被引用了那么这块内存就会被释放。

4. 但是，当闭包存在时，即内部函数保留了对外部变量的引用时，这个作用域链就不会被销毁，此时内部函数依旧可以访问其所在的外部函数的变量，这就是闭包。


#### 2.3.2 闭包的应用
> 先看两个例子，两个例子都打印5个5

```js
for (var i = 0; i < 5; i++) {
  setTimeout(function timer() {
    console.log(i)
  }, i * 100)
}
```

```js
function test() {
   var a = [];
   for (var i = 0; i < 5; i++) {
         a[i] = function () {
            console.log(i);
         }
   }
   return a;
}

var myArr = test();
for(var j=0;j<5;j++)
{
   myArr[j]();
}
```


> 解决方法： 使用立即执行函数

```js
for (var i = 0; i < 5; i++) {
   ;(function(i) {
      setTimeout(function timer() {
         console.log(i)
      }, i * 100)
   })(i)
}
```
```js
function test(){
   var arr=[];
   for(i=0;i<10;i++)
   {
      (function(j){
         arr[j]=function(){
         console.log(j);
         }
      })(i)
   }
   return arr;
}

var myArr=test();
for(j=0;j<10;j++)
{
   myArr[j]();
}
```


#### 2.3.3 闭包-封装私有变量
```js
function Counter() {
   let count = 0;
   this.plus = function () {
      return ++count;
   }
   this.minus = function () {
      return --count;
   }
   this.getCount = function () {
      return count;
   }
}

const counter = new Counter();
counter.puls();
counter.puls();
console.log(counter.getCount())
```


## 3. 作用域与变量声明提升?
1. 在 JavaScript 中，函数声明与变量声明会被 JavaScript 引擎隐式地提升到当前作用域的顶部 
2. 声明语句中的赋值部分并不会被提升，只有名称被提升
3. 函数声明的优先级高于变量，如果变量名跟函数名相同且未赋值，则函数声明会覆盖变量声明
4. 如果函数有多个同名参数，那么最后一个参数（即使没有定义）会覆盖前面的同名参数


## 4. 构造函数，new时发生了什么？
 
```javascript
   var obj  = {}; 
   obj.__proto__ = Base.prototype;
   Base.call(obj);  
```

1. 创建一个新的对象 obj;
2. 将这个空对象的__proto__成员指向了Base函数对象prototype成员对象
3. Base函数对象的this指针替换成obj, 相当于执行了Base.call(obj);
4. 如果构造函数显示的返回一个对象，那么则这个实例为这个返回的对象。 否则返回这个新创建的对象



## 5. 函数参数是对象会发生什么问题？

```javascript
function test(person) {
  person.age = 26
  person = {
    name: 'yyy',
    age: 30
  }

  return person
}
const p1 = {
  name: 'hy',
  age: 25
}
const p2 = test(p1)
console.log(p1) // -> {name: "hy", age: 20}
console.log(p2) // -> {name: "yyy", age: 30}
```

`person = {}` 这一步操作就将应用与原来的分离了
![地址改变](../../img/addressChange.png)



## 6. JavaScript 中，调用函数有哪几种方式？
1. 方法调用模式 Foo.foo(arg1, arg2);
2. 函数调用模式 foo(arg1, arg2);
3. 构造器调用模式 (new Foo())(arg1, arg2);
4. call/applay 调用模式 Foo.foo.call(that, arg1, arg2);
5. bind 调用模式 Foo.foo.bind(that)(arg1, arg2)();

【JS相关】函数

4. 构造函数，new时发生了什么？

5. 函数参数是对象会发生什么问题？

6. JavaScript 中，调用函数有哪几种方式？

# call, apply, bind的模拟实现
## call的模拟实现
```js
    // 使用原生的ES3语法实现的call
    Function.prototype._call = function() {
      var context = context || window;
      context.fn = this;
      
      var args = [];
      for (var i = 1, len = arguments.length; i < len; i++) {
            args.push('arguments['+ i +']')
      }
      var res = eval('context.fn('+ args +')');
      
      delete context.fn;
      return res;
    }
    
    // 使用ES6语法实现一个call
    Function.prototype._call = function() {
      let context = arguments[0];
      context.fn = this;
      
      let args = [];
      for (let i = 0, len = arguments.length; i < len; i++) {
          args.push(arguments[i]);
      }
      
      // 把数组转换为一个伪数组
      let res = context.fn({...args});
      
      delete context.fn;
      return res;
    }
```

## apply的模拟实现
```js
    // 原生JS实现
    Function.prototype._apply = function(context, arr) {
      var context = Object(context) || window;
      context.fn = this;
      
      let res;
      if (!arr) {
          res = context.fn();
      }
      else {
          var args = [];
          for (var i = 0, len = arr.length; i < len; i++) {
              args.push('arr['+i+']');
          }
          res = eval('context.fn('+args+')');
      }
      delete context.fn;
      return res;
    }
    
    // 使用ES6语法实现的apply
    Function.prototype._apply = function(context) {
      context = context || window;
      context.fn = this;
      
      let res;
      if (arguments[1]) {
          // array
          res = context.fn(...arguments[1]);
      }
      else {
          // none args
          res = context.fn();
      }
      
      delete context.fn;
      return res;
    }
```

## bind的模拟实现
```js
    // 原生JS 的实现
    Function.prototype._bind = function(context) {
        if (typeof this !== 'function') {
            throw new Error('error callback');
        }
        
        var self = this;
        var args = Array.prototype.slice.call(arguments, 1);
        // 注意：这里如果直接将 fBound.prototype = this.prototype
        // ，我们直接修改 fBound.prototype 的时候，也会直接修改绑定函数的 prototype。
        // 解决方案：这个时候，我们可以通过一个空函数来进行中转
        var fnOP = function() {};
        
        var fnBind = function() {
            var bindArgs = Array.prototype.slice.call(arguments);
            return self.apply(this instanceof fnOP
                            ? this
                            : context
                            , args.concat(bindArgs));
        }
        // 通过间接地去修改这个中间函数的原型对象，new 的方式来避免直接修改原型上面的属性和对象参数信息
        fnOP.prototype = this.prototype;
        // 这里不就是原型链继承的实现吗？
        fnBind.prototype = new fnOP();
        return fnBind;
    }
    
    // ES6的写法一
    Function.prototype._bind = function(context, ...args) {
      let self = this;
      return function() {
        self.apply(context, args.concat(Array.prototype.slice.call(arguments)));
      }
    }
    
    // ES6的写法二
    Function.prototype._bind = function(context) {
      context = context || window;
      let args = Array.prototype.slice.call(arguments, 1);
      let self = this;
      // 构建一个中间的函数，维护原型之间的关系
      let temp = function(){};
      let F = function() {
        self.apply(this instanceof temp
                    ? this
                    : context
                    , args.concat(Array.prototype.slice.call(arguments)))
      }
      // 通过中间函数维护原型关系
      temp.prototype = this.prototype;
      F.prototype = new temp();
      
      return F;
    }
```


【编程题与分析题】call、bind、apply的实现

# 正则表达式

## 1.正则表达式基础
### 1.1 创建正则表达式
#### 1.1.1 使用一个正则表达式字面量
```js
const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi;
```

#### 1.1.2 调用RegExp对象的构造函数
```js
const regex = new RegExp(pattern, [, flags])
```

#### 1.1.3 特殊字符
```js
 - ^ 匹配输入的开始
 - $ 匹配输入的结束
 - \* 0次或多次  {0，}
 - \+ 1次或多次  {1，}
 - ?
   - 0次或者1次 {0,1}。
   - 用于先行断言
   - 如果紧跟在任何量词 *、 +、? 或 {} 的后面，将会使量词变为非贪婪
     - 对 "123abc" 用 /\d+/ 将会返回 "123"，
     - 用 /\d+?/,那么就只会匹配到 "1"。
 - . 匹配除换行符之外的任何单个字符
 - (x)  匹配 'x' 并且记住匹配项
 - (?:x)  匹配 'x' 但是不记住匹配项
 - x(?=y)  配'x'仅仅当'x'后面跟着'y'.这种叫做正向肯定查找。
 - x(?!y)  匹配'x'仅仅当'x'后面不跟着'y',这个叫做正向否定查找。
 - x|y  匹配‘x’或者‘y’。
 - {n}  重复n次
 - {n, m}  匹配至少n次，最多m次
 - [xyz]   代表 x 或 y 或 z
 - [^xyz]  不是 x 或 y 或 z
 - \d  数字
 - \D  非数字
 - \s  空白字符，包括空格、制表符、换页符和换行符。
 - \S  非空白字符
 - \w  单词字符（字母、数字或者下划线）  [A-Za-z0-9_]
 - \W  非单字字符。[^A-Za-z0-9_]
 - \3  表示第三个分组
 - \b   词的边界
   - /\bm/匹配“moon”中得‘m’；
 - \B   非单词边界
```


### 1.2 使用正则表达式的方法

 - exec	一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回null）。
 - test	一个在字符串中测试是否匹配的RegExp方法，它返回true或false。
 - match	一个在字符串中执行查找匹配的String方法，它返回一个数组或者在未匹配到时返回null。
 - search	一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。
 - replace	一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串。
 - split	一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的String方法。
  
#### 1.2.1 正则对象的三个方法
```js
        //①test()判断字符串中是否出现某个字符串，返回布尔值
        var re = /abc/;
        var str = '00abc66';
        console.log(re.test(str));  // true
        //②exec()查找并返回字符串中指定的某个字符串，只匹配一次
        var re = /abc/;
        var str = 'a0bc88abc00abc';
        console.log(re.exec(str));  // ["abc", index: 6, input: "a0bc88abc00abc", groups: undefined]
        //③compile()方法用于改变正则匹配的内容
        var re = /ab/;
        var str = "aabcdef";
        console.log(re.test(str));  //true
        re.compile(/bd/);
        console.log(re.test(str));  //false
        re.compile('66');
        console.log(re.test(str));  //false
```

#### 1.2.2 字符串中与正则相关的方法
```js
        //①search()方法，返回符合条件的字符串首次出现的位置（下标）
        var re = /abc/;
        var str = '00abc66';
        console.log(str.search(re));        // 2
        //②match()方法，返回查找的结果，如果查询不到返回NULL
        console.log(str.match(re));         // ["abc", index: 2, input: "00abc66", groups: undefined]
        //③replace()方法，将匹配到的内容替换成指定内容
        console.log(str.replace(re, "*"));
        //④split()方法，将字符串分割成字符串数组
        console.log(str.split(re));
```

### 1.3 正则表达式子表达式相关
#### 1.3.1 子表达式
在正则表达式中，通过一对圆括号括起来的内容，我们就称之为“子表达式”。如：var re = /\d(\d)\d/;
#### 1.3.2 捕获
在正则表达式中，子表达式匹配到相应的内容时，系统会自动捕获这个行为，然后将子表达式匹配到的内容放入系统的缓存区中。我们把这个过程就称之为“捕获”。
#### 1.3.3 反向引用
在正则表达式中，我们可以使用\n（n>0，正整数，代表系统中的缓冲区编号）来获取缓冲区中的内容，我们把这个过程就称之为“反向引用”。

```js
    var str = "d1122jj7667h6868s9999";
    //查找AABB型的数字
    console.log(str.match(/(\d)\1(\d)\2/)); //1122
    //查找ABBA型的数字
    console.log(str.match(/(\d)(\d)\2\1/)); //7667
    //查找ABAB型的数字
    console.log(str.match(/(\d)(\d)\1\2/)); //6868
    //查找四个连续相同的数字
    console.log(str.match(/(\d)\1\1\1/));   //9999
```

### 1.4 限定符
> [!NOTE]
> 限定符可以指定正则表达式的一个给定字符必须要出现多少次才能满足匹配。

```html
    *：匹配前面的子表达式零次或多次，0到多
    +：匹配前面的子表达式一次或多次，1到多
    ?：匹配前面的子表达式零次或一次，0或1
    {n}：匹配确定的 n 次 
    {n,}：至少匹配 n 次 
    {n,m}：最少匹配 n 次且最多匹配 m 次
```

> [!WARNING]
> 注意：针对于{n,m}，正则在匹配到一个符合多种次数的字符串时，优先匹配次数多的，即能匹配到m次就不会匹配n次，这就是贪婪模式（默认）。

> 如果在其后加?即{n,m}?则会更改为非贪婪模式（惰性模式），则此时正则优先匹配n次。

```js
    var str = "aa1a22a333a6a8a";
    console.log(str.match(/a\d*/));      //a
    console.log(str.match(/a\d+/));      //a1
    console.log(str.match(/a\d?/));      //a
    console.log(str.match(/a\d{3}/));    //a333
    console.log(str.match(/a\d{2,}/));   //a22
    console.log(str.match(/a\d{1,3}/));  //a1
    console.log(str.match(/a\d{1,3}?/)); //a1

    //贪婪模式加深理解，案例如下：
    //贪婪模式下最开始的'a2就符合条件'，但是它会返回'a22'
    //注意：它是在遇到一个同时符合多个次数条件的字符串时，取符合次数多字符串
    var str = "a22aa1a333a6a8a";
    console.log(str.match(/a\d{1,3}/));   //a22
    console.log(str.match(/a\d{1,3}/g));  //a22 a1 a333 a6 a8
    console.log(str.match(/a\d{1,3}?/));  //a2
    console.log(str.match(/a\d{1,3}?/g)); //a2 a1 a3 a6 a8
```

### 1.5 定位符
> [!NOTE]
> 定位符可以将一个正则表达式固定在一行的开始或结束。也可以创建只在单词内或只在单词的开始或结尾处出现的正则表达式。

```js
^ (脱字符)：匹配输入字符串的开始位置
$：匹配输入字符串的结束位置
\b：匹配一个单词边界
\B：匹配非单词边界
```

### 1.6 正则表达式的匹配模式（修饰符）
> [!NOTE]
> 表示正则匹配的附加规则，放在正则模式的最尾部。修饰符可以单个使用，也可以多个一起使用。
+ ①g全局匹配，找到所有匹配，而不是在第一个匹配后停止
+ ②i匹配全部大小写
+ ③m多行，将开始和结束字符（^和$）视为在多行上工作（也就是，分别匹配每一行的开始和结束（由\n或\r分割），而不只是只匹配整个输入字符串的最开始和最末尾处。
+ ④s与m相反，单行匹配
```js
    var re = /^[a-z]/gim;   //可组合使用
```

### 1.7 转义字符
> [!NOTE]
> 因为在正则表达式中 . + \ 等属于表达式的一部分，但有时也需要匹配这些特殊字符，所以，需要使用反斜杠对特殊字符进行转义。

 ```js
   需要转义的字符：
   点号.
   小括号()
   中括号[]
   左斜杠/
   右斜杠\
   选择匹配符|
   
   * 
   ?
   {}
   + 
   $
   ^
```
   

## 2. 正则练习题

### 2.1 匹配结尾的数字
```js
/\d+$/g
```

### 2.2 统计空格个数
字符串内如有空格，但是空格的数量可能不一致，通过正则将空格的个数统一变为一个。
```js
let reg = /\s+/g
str.replace(reg, " ");
```

### 2.3 判断字符串是不是由数字组成
```js
str.test(/^\d+$/);
```

### 2.4 电话号码正则
 - 区号必填为3-4位的数字
 - 区号之后用“-”与电话号码连接电话号码为7-8位的数字
 - 分机号码为3-4位的数字，非必填，但若填写则以“-”与电话号码相连接
```js
/^\d{3,4}-\d{7,8}(-\d{3,4})?$/
```

### 2.5 手机号码正则表达式
正则验证手机号，忽略前面的0，支持130-139，150-159。忽略前面0之后判断它是11位的。
```js
/^0*1(3|5)\d{9}$/
```

### 2.6 使用正则表达式实现删除字符串中的空格
```js
funtion trim(str) {
  let reg = /^\s+|\s+$/g
  return str.replace(reg, '');
}
```

### 2.7 限制文本框只能输入数字和两位小数点等等
```js
/^\d*\.\d{0,2}$/
```

### 2.8 只能输入小写的英文字母和小数点，和冒号，正反斜杠(：./\)
```js
/^[a-z\.:\/\\]*$/
```

### 2.9 替换小数点前内容为指定内容
> 例如：infomarket.php?id=197 替换为 test.php?id=197
```js
var reg = /^[^\.]+/;
var target = '---------';
str = str.replace(reg, target)
```

### 2.10 只匹配中文的正则表达式
```js
/[\u4E00-\u9FA5\uf900-\ufa2d]/ig
```


### 2.11 返回字符串的中文字符个数
> 先去掉非中文字符，再返回length属性。

```js
function cLength(str){
  var reg = /[^\u4E00-\u9FA5\uf900-\ufa2d]/g;
  //匹配非中文的正则表达式
  var temp = str.replace(reg,'');
  return temp.length;
}
```

### 2.12 正则表达式取得匹配IP地址前三段
> 只要匹配掉最后一段并且替换为空字符串就行了

```js
function getPreThrstr(str) {
  let reg = /\.\d{1,3}$/;
  return str.replace(reg,'');
}
```

### 2.13 匹配**ul**标签之间的内容
```js
/<ul>[\s\S]+?</ul>/i
```


### 2.14 用正则表达式获得文件名
> c:\images\tupian\006.jpg

可能是直接在盘符根目录下，也可能在好几层目录下，要求替换到只剩文件名。
首先匹配非左右斜线字符0或多个，然后是左右斜线一个或者多个。
```js
function getFileName(str){
  var reg = /[^\\\/]*[\\\/]+/g;
  // xxx\ 或是 xxx/
  str = str.replace(reg,'');
  return str;
}
```


### 2.15 绝对路径变相对路径
> "http://23.123.22.12/image/somepic.gif"转换为："/image/somepic.gif"

```js
var reg = /http:\/\/[^\/]+/;
str = str.replace(reg,"");
```


### 2.16 用户名正则
> 用于用户名注册，，用户名只 能用 中文、英文、数字、下划线、4-16个字符。
```js
/^[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/
```


### 2.17 匹配英文地址
> 规则如下:
> 包含 "点", "字母","空格","逗号","数字"，但开头和结尾不能是除字母外任何字符。
```js
/^[a-zA-Z][\.a-zA-Z,0-9]*[a-zA-Z]$/
```


### 2.18 正则匹配价格
开头数字若干位，可能有一个小数点，小数点后面可以有两位数字。
```js
/^\d+(\.\d{2})?$/
```


### 2.19 身份证号码的匹配
身份证号码可以是15位或者是18位，其中最后一位可以是X。其它全是数字
```js
/^(\d{14}|\d{17})(X|x)$/
```


### 2.20 单词首字母大写
> 每单词首字大写，其他小写。如blue idea转换为Blue Idea，BLUE IDEA也转换为Blue Idea
```js
function firstCharUpper(str) {
  str = str.toLowerCase();
  let reg = /\b(\w)/g;
  return str.replace(reg, m => m.toUpperCase());
}
```


### 2.21 正则验证日期格式
> yyyy-mm-dd格式, 4位数字，横线，1或者2位数字，再横线，最后又是1或者2位数字。

```js
/^\d{4}-\d{1,2}-\d{1,2}$/
```


### 2.22 去掉文件的后缀名
> www.abc.com/dc/fda.asp 变为 www.abc.com/dc/fda
```js
function removeExp(str) {
  return str.replace(/\.\w$/,'')
}
```


### 2.23 验证邮箱的正则表达式
> 开始必须是一个或者多个单词字符或者是-，加上@，然后又是一个或者多个单词字符或者是-。然后是点“.”和单词字符和-的组合，可以有一个或者多个组合。

```js
/^[\w-]+@\w+\.\w+$/
```


### 2.24 正则判断标签是否闭合

> 标签可能有两种方式闭合，自闭和或者对称闭合的方式。

```js
/<([a-z]+)(\s*\w*?\s*=\s*".+?")*(\s*?>[\s\S]*?(<\/\1>)+|\s*\/>)/i
```




### 2.25 正则判断是否为数字与字母的混合
> 不能小于12位，且必须为字母和数字的混合
```js
/^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i
```


### 2.26 将阿拉伯数字替换为中文大写形式
```js
function replaceReg(reg,str){
  let arr=["零","壹","贰","叁","肆","伍","陆","柒","捌","玖"];
  let reg = /\d/g;
  return str.replace(reg,function(m){return arr[m];})
}
```


### 2.27 去掉标签的所有属性
```html
<td style="width: 23px; height: 26px;" align="left">***</td>
变成没有任何属性的
<td>***</td>
```
> 思路：非捕获匹配属性，捕获匹配标签，使用捕获结果替换掉字符串。正则如下：
```js
/(<td)\s(?:\s*\w*?\s*=\s*".+?")*?\s*?(>)/
```



### 2.28 驼峰表示
```js
String.prototype.camelCase = function () {
        // .*?是非贪婪的匹配，点可以匹配任意字符，星号是前边的字符有0-n个均匹配，问号是则是0-1；
        // (^\w{1}): 用于匹配第一个首字母
        // (.*)：用于匹配任意个的前面的字符，.表示的就是任意字符

        // - param 1: 匹配到的字符串
        // - param 2: 匹配的的子字符串
        // - param 3: 匹配的子字符串
        // - param的位置
        // - param 5: 原始字符串 4: 匹配到的字符串在字符串中

        return this.replace(/(^\w{1})(.*)/g, function (match, g1, g2) {
            return g1.toUpperCase() + g2.toLowerCase();
        });
    }
```

### 2.29 模板字符串
```js
// str = 'name: @(name), age:@(age)'
       // data = {name : 'xiugang', age : 18}
       /**
        * 实现一个简单的数据绑定
        * @param str
        * @param data
        * @return {*}
        */
       String.prototype.formateString = function (data) {
           return this.replace(/@$(\w+)$/g, function (match, key) {
               // 注意这里找到的值必须返回出去(如果是undefined，就是没有数据)
               // 注意：判断一个值的类型是不是undefined，可以通过typeof判断
               console.log(typeof data[key] === 'undefined');
               return data[key] === 'undefined' ? '' : data[key];
           });

       }
```


### 2.30 去掉两边的空格
```js
/**
        * 去掉两边的空格
        * @param str
        * @return {*}
        */
       String.prototype.trim = function () {
           return this.replace(/(^\s*)|(\s*$)/g, '');
       }
```

### 2.31 获取url参数: 使用replace保存到一个数组里面，然后从数组里面取出数据
```js
'http://www.189dg.com/ajax/sms_query.ashx?undefined&undefined&undefined-06-27&undefined-06-27'
 url.replace(/(\w+)=(\w+)/g, function(a, b, c){
   console.log(a, b, c)
 })
action=smsdetail action smsdetail
sid=22 sid 22
stime=2014 stime 2014
etime=2014 etime 2014


// 封装为一个函数
var url = "http://127.0.0.1/e/action/ShowInfo.php?classid=9&id=2";
function parse_url(_url){
 var pattern = /(\w+)=(\w+)/ig;
 var parames = {};
 url.replace(pattern, function(a, b, c){
   parames[b] = c;
 });
 return parames;
}
var parames = parse_url(url);
alert(parames['classid'] + ", " + parames['id']);
```



【JS相关】正则

1.1.1 使用一个正则表达式字面量

1.2.2 字符串中与正则相关的方法

1.6 正则表达式的匹配模式（修饰符）

2.3 判断字符串是不是由数字组成

2.6 使用正则表达式实现删除字符串中的空格

2.7 限制文本框只能输入数字和两位小数点等等

2.8 只能输入小写的英文字母和小数点，和冒号，正反斜杠(：./\)

2.9 替换小数点前内容为指定内容

2.11 返回字符串的中文字符个数

2.12 正则表达式取得匹配IP地址前三段

2.25 正则判断是否为数字与字母的混合

2.26 将阿拉伯数字替换为中文大写形式

2.31 获取url参数: 使用replace保存到一个数组里面，然后从数组里面取出数据

# 1. webpack3和webpack4的区别？
1. mode/–mode参数: 新增了mode/--mode参数来表示是开发还是生产（development/production）; production 侧重于打包后的文件大小，development侧重于构建速度
2. 移除loaders，必须使用rules（在3版本的时候loaders和rules 是共存的但是到4的时候只允许使用rules）
3. 移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替
4. 支持es6的方式导入JSON文件，并且可以过滤无用的代码


# 2. 什么是webpack，和grunt和gulp有什么不同？
1. Webpack是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。
2. 他和其他的工具最大的不同在于他支持code-splitting、模块化(AMD，ESM，CommonJs)、全局分析。

# 3. 什么是bundle,什么是chunk，什么是module?
1. bundle是由webpack打包出来的文件
2. chunk是指webpack在进行模块的依赖分析的时候，代码分割出来的代码块
3. module是开发中的单个模块。


# 4. 什么是Loader?什么是Plugin?
1. loader是使wenbpack拥有加载和解析非js文件的能力
2. plugin 可以扩展webpack的功能，使得webpack更加灵活。可以在构建的过程中通过webpack的api改变输出的结果


# 5. Webpack的构建流程？
1. 初始化参数，从配置文件和shell语句中读到的参数合并，得到最后的参数
2. 开始编译：用合并得到的参数初始化complier对象，加载是所有配置的插件，执行run方法开始编译
3. 确定入口，通过entry找到入口文件
4. 编译模块，从入口文件出发，调用所有配置的loader对模块进行解析翻译，在找到该模块依赖的模块进行处理
5. 完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系
6. 输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，在把每个chunk转换成一个单独的文件加载到输出列表
7. 输出完成，确定输出的路径和文件名，把内容写到文件系统中


# 6. 如何利用webpack来优化前端性能
1. 提取公共代码。webpack4移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替
2. 压缩代码。（development和production）
3. 使用loader的时候，使用exclude排除node_modules中的文件
4. 配置extractTextWebpackPlugin插件
5. 使用TreeShaking插件：Tree-shaking 概念最早由Rollup.js 提出，后来在webpack2中被引入进来，但是这个这一特性能够被支持得益于ES6 modules的静态特性。ES6的模块声明相比于传统CommonJS的同步require有着本质区别。这种modules设计保证了依赖关系是提前确定的，使得静态分析成为了可能，与运行时无关。（除那些引用的但却没有使用的代码）


```js
// 一、.babelrc 中添加
"presets": [
 [
   "es2015", {
     "modules": false,
   }
 ],
 "stage-2"
],
// 或者在babel loader中的options里面添加同样的代码, modules:false 表示的是不对ES6进行处理

// 二、使用uglifyjs-webpack-plugin
plugins: [
    new UglifyJsPlugin(),
...
]
```
> [!NOTE]
> 想要代码配置tree-shaking,必须采用es6的模块语法，因为es6的模块采用的是静态分析，也就是从字面量对代码进行分析。之前的require是动态分析，必须代码执行到才知道引用的什么模块。

# 7. 如何可以自动生成webpack配置？
答案： webpack-cli /vue-cli /etc ...脚手架工具

# 8. webpack-dev-server和http服务器如nginx有什么区别?
1. webpack-dev-server使用内存来存储webpack开发环境下的打包文件
2. 并且可以使用模块热更新
3. 他比传统的http服务对开发更加简单高效。


# 9. 什么是模块热更新？
答案:模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。

# 10. 什么是长缓存？在webpack中如何做到长缓存优化？
答案：
1. 浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或是更新，都需要浏览器去下载新的代码，最方便和简单的更新方式就是引入新的文件名称。
2. 在webpack中可以在output纵输出的文件指定chunkhash,并且分离经常更新的代码和框架代码。
3. 通过NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不变。


# 11. 什么是Tree-shaking?CSS可以Tree-shaking吗？
答案：
1. Tree-shaking是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。
2. 在webpack中Tree-shaking是通过uglifySPlugin来Tree-shaking JS
3. Css需要使用Purify-CSS。


【前端工程化】Webpack常见面试题

2. 什么是webpack，和grunt和gulp有什么不同？

3. 什么是bundle,什么是chunk，什么是module?

6. 如何利用webpack来优化前端性能

7. 如何可以自动生成webpack配置？

8. webpack-dev-server和http服务器如nginx有什么区别?

10. 什么是长缓存？在webpack中如何做到长缓存优化？

11. 什么是Tree-shaking?CSS可以Tree-shaking吗？

# 数组扁平化
```js
// v1. 递归实现版本
function flatten(arr) {
    let res = [];
    for (let i = 0, len = arr.length; i < len; i++) {
        if (Array.isArray(arr[i])) {
            res = res.concat(flatten(arr[i]));
        }
        else {
            res.push(arr[i]);
        }
    }
    return res;
}

// v2. 使用数组的toString方法实现
function flatten(arr) {
    return arr.toString().split(',').map(item => +item);
}
// TODO: 会把所有的项都变成数字了
// console.log(flatten([1, '1', [2, 3, 4]]));



// v3. 使用reduce函数来实现(重点掌握)
function flatten(arr) {
    return arr.reduce((prev, next) => {
        return prev.concat(Array.isArray(next) ? flatten(next) : next);
    }, []);
}
console.log(flatten([1, '1', [2, 3, 4]]));


// v4. 使用...运算符来解构数组
function flatten(arr) {
    // 数组中只要有一项是数组的话，就把当前的这个数组解构一层
    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}


```

【编程题与分析题】数组扁平化

# JS观察者模式
> [!NOTE]
> 观察者模式:观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行。而js中最常见的观察者模式就是事件触发机制。

[ES5/ES6实现观察者模式(自定义事件) - 简书](https://www.jianshu.com/p/10a20df72bf2)


### 先搭架子

1. 要有一个对象，存储着它自己的触发函数。而且这个对象的触发函数可能有很多种，比如一个onclick可能触发多个事件，那么handler的属性应该是一个数组，每个数组的值都是一个函数。

```js
handler={
  type1:[func1,func2...],
  type2:[func3,func4...],
  ...
}
```

2. 现在这个对象的主体部分已经思考好了，现在就是要它‘动起来’，给它添加各种动作。
一个事件可能有哪些动作呢？

 - add：添加事件某种类型的函数，
 - remove: 移除某种类型的函数，
 - fire：触发某种类型的函数,
 - once:触发某种类型的函数，然后移除掉这个函数

3. 现在，自定义事件的架子已经搭建好了

```js
eventOb={
  //函数储存
  handler:{
    type1:[func1,func2...],
    type2:[func2,func4...],
    ...
  },

  //主要事件
  add:function(){},
  remove:function(){},
  fire:function(){},
  once:function(){},
}
```


### add
添加一个事件监听，首先传入参数应该是 事件类型type，和触发函数 func，传入的时候检测有没有这个函数，有了就不重复添加。

```js
add:function (type,func) {
  //检测type是否存在
  if(eventOb.handleFunc[type]){
    //检测事件是否存在，不存在则添加
    if(eventOb.handleFunc[type].indexOf(func)===-1){
      eventOb.handleFunc[type].push(func);
    }
  }
  else{
    eventOb.handleFunc[type]=[func];
  }
},
```

### remove
remove有一个潜在的需求，就是如果你的事件不存在，它应该会报错。而这里不会报错，index在func不存在的时候是-1；这时候要报错。
```js
remove:function (type,func) {
  try{
    let target = eventOb.handleFunc[type];
    let index = target.indexOf(func);
    if(index===-1) throw error;
    target.splice(index,1);
  }catch (e){
      console.error('别老想搞什么飞机，删除我有的东西！');
  }
},
```

### fire
触发一个点击事件肯定是要触发它全部的函数，这里也是一样，所以只需要传入type，然后事件可能不存在，像上面一样处理。

```js
fire:function (type,func) {
  try{
    let target = eventOb.handleFunc[type];
    let count = target.length;
    for (var i = 0; i < count; i++) {
      //加()使立即执行
      target[i]();
    }    
  }
  catch (e){
    console.error('别老想搞什么飞机，触发我有的东西！');
  }
},
```

### once
fire，然后remove？

但会有问题，我只想触发并且删除某个事件怎么办，fire一下就全触发了呀。
所以fire的问题就显现出来了。我们还是要给它一个func，但是可选。
```js
fire:function (type,func) {
  try{
    let target = eventOb.handleFunc[type];
    if(arguments.length===1) {
      //不传func则全部触发
      let count = target.length;
      for (var i = 0; i < count; i++) {
          target[i]();
      }
    }else{
      //传func则触发func
      let index=target.indexOf(func);
      if(index===-1)throw error;
      func();
    }
    //need some code
  }catch (e){
    console.error('别老想搞什么飞机，触发我有的东西！');
    //need some code
  }
},
```


### 完整代码
```js
class eventObs {
  constructor(){
    this.handleFunc={}
  }

  add(type,func){
    if(this.handleFunc[type]){
        if(this.handleFunc[type].indexOf(func)===-1){
            this.handleFunc[type].push(func);
        }
    }else{
        this.handleFunc[type]=[func];
    }
  };

  fire(type,func){
    try{
      if(arguments.length===1) {
          let target = this.handleFunc[type];
          let count = target.length;
          for (var i = 0; i < count; i++) {
              target[i]();
          }
      }else{
          let target = this.handleFunc[type];
          let index=target.indexOf(func);
          if(index===-1)throw error;
          func();
      }
      return true;
    }catch (e){
        console.error('别老想搞什么飞机，触发我有的东西！');
        return false;
    }
  };

  remove(type,func){
      try{
          let target = this.handleFunc[type];
          let index=target.indexOf(func);
          if(index===-1)throw error;
          target.splice(index,1);
      }catch (e){
          console.error('别老想搞什么飞机，删除我有的东西！');
      }

  };

  once(type,func) {

    this.fire(type, func)
    ? this.remove(type, func)
    : null;
  }
}
```


# 使用ES6的Reflect来实现一个观察者模式
> [!NOTE]
> **函数(观察者)**自动观察**数据对象（观察的目标）**，一旦对象发生变化，函数就会自动执行


```js
    // 观察者设计模式
    const queuedObservers = new Set();
    
    const observe = fn => queuedObservers.add(fn);
    const observable = obj => new Proxy(obj, {set});
    
    function set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      queuedObservers.forEach(observer => observer());
      return result;
    }
    
    
    // test
    const person = observable({
      name: '张三',
      age: 20
    });
    
    function print() {
      console.log(`${person.name}, ${person.age}`)
    }
    
    observe(print);
    person.name = '李四';
    // 输出
    // 李四, 20
```



【编程题与分析题】观察者设计模式

使用ES6的Reflect来实现一个观察者模式