Part 1

javaScript是一种什么样的语言？

javascript是一门弱类型，直译型的运行在浏览器上的脚本语言，用于给网页添加动态效果和交互。

数据类型

值类型(基本类型) ：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

Symbol 是 ES6 引入的一种新的原始数据类型，表示独一无二的值。

es6新增内容

1.`let&const`

var 可以重复声明，可以重新赋值，没有块级作用域

let 不可以重复声明，可以重新赋值，有块级作用域，没有变量提升

const 声明的是常量，不可以重新赋值，有块级作用域，没有变量提升

const声明的变量如果是引用数据类型是可以修改的

2.`解构赋值`

const [a,b] = [2,3]

3.`箭头函数：this指向`

箭头函数没有自己的this，this是指向当前调用的上下文

箭头函数没有原型，一次不能做继承，箭头函数如果只有一行可以不写return

如果是一般函数,this指向全局对象window

在严格模式下"use strict",为undefined

构造函数里的this,指向创建出来的实例

如何改变this指向（区别）

call 第二个参数是实参改变this指向并且调用方法
apply 第二个参数传入的是一个数组改变this指向并且调用方法
bind 本身并不会调用函数因为返回的是新的函数加（）调用

4.`扩展运算符`

5.`Set（所有元素都是唯一的）`

6.`模板字符串`

7.`promise`

Promise是什么，它的API有哪些？

Promise是es6新增的语法，用来处理异步请求，解决了es5中回调地狱的问题
Promise的回调函数中接收两个参数，第一个表示请求成功的回调，第二个表示请求失败的回调，分别是resolve和reject。
使用.then（）去获取结果，使用.catch（）去捕获异常，并且上一个Promise的执行结果会返回一个Promise对象。

一个promise只有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）

promise--resolve 参数的几种情况

1.参数是promise实例，直接返回这个实例本身，不做处理。

2.参数是一个thenable对象，即其中实现了then方法。则会将此对象生成为一个promise，状态为resolved，并调用其then方法。

3.参数是一个原始类型的数据，则直接返回一个状态为resolved的promise，并将改参数传入resolved函数处理。

4.参数为空，则直接返回一个状态为resolved的promise

Promise.all()和Promise.race()
Promise.all()
Promise.all传入一个数组，数组对象都是Promise对象，就是Promise.all中，所有的promise对象均出现结果后才会执行.all中的.then回调，
参数是一个数组，返回的是一个promise，有一个出错，就被认定为失败
使用场景：比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。
返回值：成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
Promse.race()
就是Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

`Promise与async/await有什么区别？`

Promise是ES6中处理异步请求的语法，使用.then()来实现链式调用,使用.catch()来捕获异常。
async/await 是对Promise的升级，async用于声明一个函数是异步的，await是等待一个异步方法执行完成（await一个Promise对象），async/await的捕获异常可以使用try/catch语法。（也可以使用.catch语法）

`axios请求和ajax请求区别`

同样都是请求数据渲染页面的

ajax 实现了网页的局部数据刷新基于XMLHttpReques

axios实现了对ajax的封装，使用了promise模式，使用then链，来处理JS异步编程

js的执行机制？微任务和宏任务 EventLoop

js是单线程的同步 阻塞模式

所谓单线程就是一次只能执行一段代码，在执行的时候如果遇到比较耗时的操作，默认就会停下来等待这个操作完成之后继续走。这种情况下，就会出现页面卡在那里不动。为了解决这个问题js一般把比较耗时的操作做异步处理
js中的异步处理 非阻塞模式 js中存在一个异步队列，所有比较耗时的操作都会被丢在这个异步队列中。当主线程空闲（同步代码）之后会执行异步队列中的代码,这个就是js中的eventloop(事件循环)

异步队列中牵扯到一个概念

宏任务，是运行环境提供的异步操作,例如:setTimeout
微任务，是js语言自身的异步操作,例如:Promise.then 在一个宏任务周期中会执行当前周期中的所有微任务，当所有的微任务都执行完成之后会进入下一个宏任务周期

什么是异步加载？异步加载和延迟加载有什么区别？

异步加载时相对于同步加载而言的，我们平常书写的代码就是同步加载，代码自上而下执行，是阻塞式的，而异步加载是非阻塞式的，在执行同步代码时，并不会阻塞我后续代码的执行，（例如定时器，发送ajax请求），而延迟加载则是一开始并不加载，在我需要的时候再进行加载（例如图片的懒加载）

前端和服务器端进行交互都有哪些方式？

Ajax、form、Websorked

常用的ajax插件传递数据的区别

jQuery发起ajax请求的时候，请求体中的数据是url编码的
axios发起请求的时候，请求体中的数据默认是json编码的
form表单提交post请求的时候，请求体中的数据默认是url编码的

fetch

是一个api 用来向服务器请求数据的返回的是一个Promise

如何判断用户的设备来源？

使用Navigator.userAgent方法来判断

js中forEach和map的区别？

两者都可以用来遍历数组，forEach无返回值，map会映射并返回一个新的数组。
forEach会允许修改原数组的值，而map不能修改原数组的值。

为什么操作dom会消耗性能

因为JS解释引擎和浏览器的渲染引擎是各自独立的，JS引擎通过渲染引擎的接口来获取文档中的元素，每次操作DOM时都会先进行连接，而每次连接都会消耗性能。
因为频繁操作dom的话，会触发浏览器的重排和重绘，而重排和重绘会占用CPU和GPU从而导致性能的下降。

什么是重排和重绘？

当DOM节点宽高等（几何属性）属性发生改变时，浏览器需要重新计算元素的几何属性，这时候浏览器就会重新构造渲染树，这个过程就叫做重排。
完成重排后，浏览器会重新绘制把受影响的部分到浏览器上，这个过程就成为重绘，重排必然会引发重绘。

浏览器渲染引擎的工作原理和工作流程？

解析HTML文档，构建DOM树（DOM节点树。
解析CSS文档，生成CSS规则树。
合并DOM树和CSS规则树，生成渲染树render树。
布局render树，计算每个元素的大小，位置等信息（重排会走这一步）。
绘制render树，绘制页面的像素信息，（根据render树上每个节点的几何属性计算每个节点的像素数，重绘会走这一步）
浏览器会将各层节点的像素信息发给GPU，GPU将各层进行合成和渲染，最终展示到页面上。

有哪些操作会导致内存泄漏

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包
控制台日志
循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

link和import的区别

link属于HTML标签，而@import完全是CSS提供的一种方式

当使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

当一个页面被加载时（或者被浏览者浏览时），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候会很明显。

你做的页面都在哪些浏览器测试过，这些浏览器的内核分别是什么？

IE浏览器：Trident内核(踹den 特)
Chrome浏览器：webkit（过去）、blink（现在）
FireFox：Gecko内核（改口）
Edge（哎值）：chormium（戳米油木）内核
Safari（sei 符瑞）：webkit内核

HTML文件开头的Doctype的作用？

用来声明文档类型，告知浏览器应该以何种规范来解析
这叫W3C标准，如果不加浏览器会用自己的规范去解析文档，可能在不同浏览器会造成不同的效果

渐进增强和优雅降级如何理解？

渐进增强，写样式的时候从低版本的浏览器开始兼容，从下向上兼容。
优雅降级，构建页面的时候，先不考虑兼容问题，先构建出完整的页面，再由上向下进行兼容。

src和href的区别？

src是source的缩写，表示将外部资源加载到文档内
href用于在当前文档和引用资源之间确认联系（侧重点）
href会在页面加载时同时加载，src会在页面加载完加载。

你在开发过程中都用过什么格式的图片？

png-8，png-24，jpeg，gif，svg等

网页上图片非常多，加载会比较慢，如何优化？

图片懒加载、图片压缩
使用CDN加速
与公司UI沟通，让他把压缩过的图片发过来

如何水平垂直居中一个盒子？

给父元素相对定位
给子元素绝对定位，并且：
left: 50%;top: 50%;
margin-left: 负的宽度一半。
margin-top: 负的高度一半；

代码实现:

#father{
    width: 500px;
    height: 500px;
    position: relative;
}
#son{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

- 使用定位的方式
- 代码实现：

.box {
    width: 500px;
    height: 500px;
    position: relative;
    }
 .son {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

- 定位+translate
- 代码实现：

.box {
    width: 400px;
    height: 400px;
    background-color: cyan;
    position: relative;
 }
 .son {
    width: 200px;
    height: 200px;
    background-color: purple;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
 }

### flex是如何使用的？
- flex是一种css盒子的布局方式，通过改变父元素的属性来控制子元素的排列方式，其常用属性有：
- flex-direction 主轴的方向
- flex-wrap 子元素空间不足时候是否换行
- justify-content 主轴对齐方式
- align-items 交叉轴的对齐方式
- align-content 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

### flex：1代表着什么？
- flex：1 是 flex-grow、flex-shrink、flex-basis三个属性的缩写，一般默认为flex：1 1 auto（存在剩余空间就放大，空间不足就缩小）；
- flex-grow：元素的放大比例，默认为1，即使存在剩余空间，也不会放大；
- flex-shrink：元素的缩小比例，默认为1，即如果空间不足，该元素将缩小;
- flex-basis:项目占据的主轴空间,默认为auto，即项目原本的大小。

### px、rem、em、vw的区别？

- px是相对于显示器屏幕分辨率而言的，固定的一种单位。
- em是相对于父元素的字体大小而言的，譬如父元素字体大小为16px，那么1em=16px，2em=32px。
- rem是相对于根元素（html）字体大小而言的，浏览器默认的字体大小都是16px，那么1rem=16px，2rem=32px，可以根据设备的宽度，结合媒体查询（@media）来进行自适应的布局。
- vw是窗口的实际宽度，1vw=1% 窗口的实际宽度。
### px 与 rem 的选择？
- 对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
- 对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

### CSS中的定位方式？
- 绝对定位，参照离自己的最近的，有定位属性的父元素定位。
- 相对定位，参照自己本身的位置进行定位。
- 固定定位，基于浏览器窗口定位。
- 默认定位，，由左到右，从上往下流式布局。

### bootstarp实现响应式的原理？
- 媒体查询

### 布局效果？
- 圣杯布局，使用flex

### 对象中的属性按照属性名进行字典排序？

let obj = {b:'hello',name:'Tom',a:'vue!'}; let keys = Object.keys(obj).sort(); let newObj={}; keys.forEach(item => newObj[item] = obj[item]);

### 比较两个对象是否相等？


### http三次握手以及常见的状态码？
- 第一次握手是客户端给服务端发送请求，请求建立连接。
- 第二次握手是服务端给客户端发送请求，表示已经收到客户端的请求，并且同意建立连接。
- 第三次握手是客户端向服务端发送请求，表示确认收到服务端发送的信息。
- 三次握手的原因是为了确认客户端和服务端都有收发信息的能力，少一次确认不了，多一次浪费资源。

##### 常见状态码：
- 200：服务器已经成功处理了请求。
- 3XX：表示重定向。
- 401：未授权，服务器请求身份验证。
- 404：服务器找不到请求的网页。
- 500：服务器内部错误，无法完成请求。
- 503：服务器目前无法使用。

### head标签中有一个viewport标签，这是干什么用的？
- 是用来适配移动端屏幕的，该标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

- ##### meta里的viewport是什么？如何禁止用户双指缩放页面？

  通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放 （四给了不）

  三项必须都要有 最大缩放比例 最小缩放比例

  ![image-20210603143410998](file://C:\Users\小羊\AppData\Roaming\Typora\typora-user-images\image-20210603143410998.png?lastModify=1623474960)

### js中常见的兼容性问题？
1. 关于获取行外样式currentStyle和getComputedStyle出现的兼容问题。

ie：currentStyle() 其他：getComputedStyle('元素名'，属性名)

### 图片懒加载是怎么实现的？
- lazy-load
- 使用占位符来保存图片真实的地址，然后监听滚动条的滚动事件，当图片出现在可视区域内时，将图片的src属性替换成图片的真实地址即可。

### ES6中class语法中的constructor和super是什么
- super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数

class A {} class B extends A { constructor() { super(); } }

- 上面代码中，子类B的构造函数之中的super()，代表调用父类的构造函数。
----
- constructor是类的构造函数,如果子类没有定义constructor方法，这个方法会被默认添加，代码如下:

class ColorPoint extends Point { } // 等同于 class ColorPoint extends Point { constructor(...args) { super(...args); } }

- 另一个需要注意的地方是，在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例。
### js中如何准确判断一个数据的数据类型？
- 如果是基本数据类型，使用typeof来判断，但是typeof不能用来判断引用数据类型的数据。

typeof null // 'object' typeof undefined // 'undefined' typeof 123 // 'number' typeof Infinity // 'number' typeof NaN // 'number' typeof true // 'boolean' typeof 'abc' // 'string' typeof function(){} // 'function' typeof {name: 'uolcano'} // 'object' typeof [1,2,3] // 'object' typeof new (function F(){}) // 'object'

- 正确判断一个数据的数据类型应该选择

Object.prototype.toString.call( )


### cookie，localstorage，sessionstorage的区别？
##### 生命周期：
- cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效
- localStorage：除非被手动清除，否则将会永久保存。
- sessionStorage： 仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。
##### 存放数据大小：
- cookie：4KB左右
- localStorage和sessionStorage：可以保存5MB的信息。
##### http请求：
- cookie：每次都会携带在HTTP头中，如果使用cookie保存过多- 数据会带来性能问题
- localStorage和sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信
##### 易用性：
- cookie：需要程序员自己封装，源生的Cookie接口不友好
- localStorage和sessionStorage：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
##### 应用场景：
- 从安全性来说，因为每次http请求都会携带cookie信息，这样无形中浪费了带宽，所以cookie应该尽可能少的使用，另外cookie还需要指定作用域，不可以跨域调用，限制比较多。但是用来识别用户登录来说，cookie还是比storage更好用的。其他情况下，可以使用storage，就用storage。
- storage在存储数据的大小上面秒杀了cookie，现在基本上很少使用cookie了，因为更大总是更好的，哈哈哈你们懂得。
localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面，一个是关闭网页就清除了信息。localStorage可以用来夸页面传递参数，sessionStorage用来保存一些临时的数据，防止用户刷新页面之后丢失了一些参数。

### typeof null和typeof undefined的结果什么，为什么？
##### undefined
- 当你声明一个变量但未对其初始化时，这个变量的值就是undefined
##### null
- 表示一个空对象指针，表示没有指向任何值。

typeof null // 'object' typeof undefined // 'undefined'

Part 2

因为undefined本身就是一种基本数据类型，所以typeof undefined == undefined

- 简单来说是js历史遗留问题，typeof null的结果为Object的原因是一个bug。在 js 的最初版本中，使用的 32位系统，使用低位来存储变量的类型信息。
而null的机器码标识为全0，而对象的机器码低位标识为000。所以typeof null的结果被误判为Object。

//null 和 undefined 的值相等，但类型不等：

typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true

### filter和map以及reduce的区别及用法？
- map() 方法映射并返回一个新的数组，不会改变原数组。

array.map(function(value,index,arr)) /value表示当前值 index表示当前下标 arr表示当前数组/

- filter方法表示过滤，返回过滤后的新数组。

var ages = [32, 33, 16, 40];

function checkAdult(age) { return age >= 18; }

- reduce方法表示数组归并（累加），返回累加后的值。

var arr = [1, 2, 3, 4]; var sum = arr.reduce(function(prev, cur, index, arr) { return prev + cur; },init) /* prev表示上一次调用回调函数时的返回值 cur表示当前元素 index表示当前元素下标 arr表示当前数组 */


### 什么是语义化标签？有什么好处？
- H5新增的语义化标签有main、section、nav、footer、header、article等。
- 好处：通过标签名字就可以知道标签的作用或者用途，语义化的标签可读性更强，便于维护，也便于seo优化。

### 什么是seo优化？
- seo就是搜索引擎优化，国内主流是百度，竞价排名。
- 前端开发的seo技巧：
- 设置meta标签，设置网站的keywords 和desctiption
- 不要在页面中出现空链接
- 为图片添加title和alt属性
- 设置页面中的h1-h6标签
- 优化网站性能，提高网站加载速度
- 购买外链

### 网站性能的优化
- js和css文件压缩合并
- 减少http请求次数
- 对网页中的图片资源进行压缩
- css中使用精灵图
- 使用cdn资源加速
- 开启服务器的gzip压缩
- 开启服务器的缓存

### 浏览器兼容性
- 国内主要兼容360安全浏览器，极速模式和兼容模式，分别对应谷歌的blink内核和IE的trident内核
- 电脑中浏览器的兼容性（360、qq浏览器、搜狗）
- 手机浏览器的浏览器兼容性（一般手机，小米手机，ios手机），微信浏览器。
- 你是如何解决这些兼容性问题的？
- 答：我们都是浏览器挨个去调试，或者加浏览器前缀，或者jQuery来解决js的兼容问题，避免使用h5和css3新增的标签和样式。

### 如何实现页面自适应？
- 使用rem单位
- 使用媒体查询
- 使用flex结合百分比布局

### 普通函数和箭头函数的区别？
- 箭头函数没有自己的this指向，它的this指向来源于它的上级，并且继承而来的this指向是无法改变的。
- 箭头函数由于没有自己的this，所以不能作为构造函数。
- 箭头函数中没有arguments（形参数组）

### 函数声明和函数表达式的区别？
- 函数声明会被预解析，函数表达式不会。

### for...in 和for...of的区别？
- for...in只能获得对象的键名，对数组来说是下标，对象是属性名。并且手动添加的属性也能遍历到。
- for...of只能获得键值（数组），遍历对象会报错。

### js中Map和Object有什么区别？
- Map是es6新增的一种数据结构，继承自Object，并对Object做了一些拓展。
- Map的键可以是任意的数据类型，Object不行。
- Map是可迭代（iterable）的，可以使用for...of遍历，而Object不行。
- Map的长度可以通过size直接拿到，Object不行。
- Map使用拓展运算符是可以直接展开的，Object不行。

### 什么是简单对象？如何判断一个对象是不是简单对象？
- 简单对象又称纯粹对象或者朴素对象
- 是指用{ }或者new Object运算符创建出来的对象

function isPlainObject(obj) { if (typeof obj !== 'object' || obj = null) return false let proto = obj while (Object.getPrototypeOf(proto) ! null) { proto = Object.getPrototypeOf(proto) } return Object.getPrototypeOf(obj) === proto }

### css中的transition和animate的用法以及区别？
- transition表示过渡，表示一个元素从一种状态到另一种状态所需要的时间。
1. transition需要事件触发，所以没法在网页加载时自动发生。
2. transition是一次性的，不能重复发生，除非一再触发。
3. transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
---
- animate表示动画。

//创建名为myfirst的动画 @keyframes myfirst { from {background: red;} to {background: yellow;} } //执行动画 keyframes myfirst { from {background: red;} to {background: yellow;} }

1. 动画不需要事件触发。
2. 动画可以通过设置infinite来循环播放。
3. 可以通过animation-duration来设置动画的持续时间，animation-delay来设置动画开始前的时间等等。

### 为什么会存在对象的深拷贝问题？如何实现对象的深拷贝？
- 深浅拷贝是因为引用数据类型数据存储的问题，引用数据类型会把指针存放在栈内存中，真正的值存放在堆内存中，浅拷贝只是拷贝了地址，而深拷贝则是完全拷贝，并且拷贝后的对象和原对象没有任何关联。
- 使用递归实现深拷贝。
- 使用lodash插件中的deepclone来实现深拷贝。
- 使用JSON.stringfy()和JSON.parse()来实现。

let obj = {name:'zhangsan',age:18} let newObj = JSON.parse(JSON.stringfy(obj))


### 什么是闭包？闭包的使用场景？

闭包就可以在全局函数里面操作另一个作用域的局部变量！

变量不会被销毁，增加了变量的生命周期
保护私有变量，将变量定义在函数内，不会污染全局

缺点：

内存不能销毁，会一直占用，使用量较大时会导致内存溢出

使用场景：react新增的hooks就是数组加闭包


### 说出几个数组去重的方法，说说哪个性能比较好
1. 利用数组的indexOf方法，新建一个空数组，循环遍历旧数组，判断空数组中是否有当前的元素，如果有就跳过，如果没有就执行push方法。

let arr = [1, 1, 2, 2, 3, 3, 4, 5]; let newArr = []; arr.forEach(item => { //判断数组中有没有包含指定的项目如果存在返回执行项目的索引不存在返回-1 if (newArr.indexOf(item) < 0) { newArr.push(item); } });

2. 利用数组的splice方法，先利用sort方法对数组进行排序，然后循环遍历数组，比较前一项与后一项是否相同，如果相同就执行spilce方法删除当前项。

3. 利用ES6中Set不能存放相同元素的特点，配合...展开运算符进行去重。

4. lodash插件也可以去重。 _.uniqBy (u内q)

   #####	lodash常用的

    `_.deepclone` 深拷贝

     `_.uniquBy`数组去重

   （抽奖使用）

    `_.sample` 随机一个元素  sun 波

   `_.sampleSize`集合中获得n个随即元素

### 数组排序

/冒泡排序/ var arr1=[7,12,4,23,21,2,17,13,6,33]//处理的数组 for(var j=0;j<arr1.length;j++){ for(var i=0;i<arr1.length;i++){ if(arr1[i]>arr1[i+1]){ var temp=arr1[i] arr1[i]=arr1[i+1] arr1[i+1]=temp } } } var arr1=[7,12,4,23,21,2,17,13,6,33] var min=null,temp,index=1 for (var i=0;i<arr1.length;i++){ min=arr1[i] for(var j=i+1;j<arr1.length;j++){ if(arr1[j]<min){ min=arr1[j] index=j } } temp=arr1[i] arr1[i]=min arr1[index]=temp } /*sort排序 */ arr.sort((a,b)=>{ return a-b; // 正序 b-a 倒序 })

### 数组中常见方法(数组方法)
- find 查找符合条件的项
- findIndex 查找符合条件项目的下标
- filter过滤数组，返回符合条件的项
- map遍历数组，映射并返回一个新数组
- forEach循环数组，无返回值
- reduce 数据聚合作用
- splice截取数组
- concat数组拼接
- join数组转字符串
- push / pop / shift / unshift



#### 封装一个url参数解析的方法 可以传递一个参数名返回参数值

```js
location.search // 获取url参数

// ?id=123&a=tom&b=jack
function getParamsFromUrl(key){
    var result = {}
    var strParams = window.location.search //获取当前uel参数 包含？
    if(strParams){
        var arrStrParams  = strParams.split('?') //截取并返回新的
        if(arrStrParams.length==2){
            var strAllParams = arrStrParams[1]
            var arrAllParams = strAllParams.split('&')
            arrAllParams.forEach(item=>{
                var arr = item.split('=')
                if(arr.length==2){
                    result[arr[0]] =decodeURI(arr[1]) 
                }
            })
        }
    }
    console.log(result)
    return result[key]
}

解码：decodeURI()

*** es6方法 ：URLSearchParams 
var u = new URLSearchParams (window.locathion.search)
u.get('url中的参数名') //可以直接获取url中的参数
可以直接解析url中传递search属性 不需要在进行字符串截取

//qs插件可以用来处理url参数

对象的相关操作

Object.keys获取对象的所有属性属性名，返回一个数组
Object.value 获取对象的所有属性值返回一个数组
for...in遍历对象，获取属性名
Object.assign对象的浅拷贝生成一个新对象
...展开运算符生成一个新对象
结构赋值

字符串相关操作

substr 从下标几开始，截取几位
substring 闭区间，截取指定区间的字符串
replace替换为指定的字符串
replaceAll替换全部
split分割成数组

js中字符串和对象的转换

// JSON.stringify 把对象转为字符串
// JSON.parse  把字符串转为对象
//json中的字符串必须使用 “” 双引号
var str =`{"1":"Tome,"2":"age","2-1":"序言","2-2":"自传"}`
var obj = JSON.parse(str)
console.log(obj['2-1']) //在对象中可以使用类似数组下标的方式来获取属性值

介绍http请求报文

请求行
    请求行由请求方法、URL和HTTP协议版本3个字段
请求头（携带数据）
    cookies
    token
    content-type
请求体
    传输数据

数据传输的格式
    json        '{"name":"zhangsan"}'
    urlencoded  name=Tom&&age=18
    form-data   此格式数据常常用于文件上传
get和post的区别
    get请求参数明文传输，在url中传递
    post请求在请求体中传输
    post请求相对get请求更安全一些
    post请求传输的参数大小比get请求大
    get请求可以加入收藏夹
    get请求常常用于获取数据，请求速度快

get请求传递的参数为什么有大小限制？
    get请求在url中传递，不同浏览器对url长度有限制

dataset数据集？

data-xxx表示数据集，选中元素，然后使用dataset来获取。

ajax如何做一个loading效果？

借助 jQuery 提供的 ajaxSetup() 方法来对 ajax 进行全局的设置。当请求开始时自动将loading 框显示出来，等请求结束后自动将其隐藏。
beforeSend：发送请求前我们可以在此显示 loading框。 complete：请求完成时会执行(不管成功失败)。我们可以在此隐藏loading框。

什么是虚拟dom？有什么优势？

不是真实的dom，是用js表述的一个dom结构
实际渲染的时候将js表述的这个dom结构渲染成真实的dom
优势：渲染效率高，修改结点数据时只做局部改变。
可以针对不同的终端执行不同的渲染函数

diff算法是什么？

虚拟dom改变时的节点替换算法

OSI七层模型？

CSS常见的布局方式？

流式布局，盒子自上而下排列。
弹性布局，flex弹性盒。
grid网格布局。
自适应（响应式布局），使用rem单位。

介绍一下css的盒模型？

W3C 标准盒模型：属性width,height只包含内容content，不包含border和padding。
IE （怪异）盒模型：属性width,height包含border和padding，指的是content+padding+border。

介绍一下XSS攻击和CSRF？

XSS（跨站脚本攻击），是一种代码注入攻击，是通过在网站中注入恶意代码达到劫持用户cookie或其他信息的一种攻击。
客户端：限制输入长度
上线前：使用扫描工具自动检测 XSS 漏洞

CSRF（Cross-site request forgery）跨站请求伪造
服务端做一些防御操作

判断数据类型的几种方法？

typeof
instanceof
Object.prototype.toString().call()

call/apply/bind区别和原理？

call方法call()是apply()的一颗语法糖，作用和apply()一样，同样可实现继承，唯一的区别就在于call()接收的是参数列表，而apply()则接收参数数组。
bind方法bind()的作用与call()和apply()一样，都是可以改变函数运行时上下文，区别是call()和apply()在调用函数之后会立即执行，而bind()方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用.

如何清除浮动？

clear：both（给空元素添加）
使用伪类:after

:after{
    content:'';
    clear:both;
    width:0;
    height:0;
    visbility:hidden;
}

父元素添加overflow:hidden;

判断一个数据是不是数组？

使用Array.isArray()

let arr = [];
console.log(Array.isArray(arr))
//true
或者:
console.log(Object.prototype.toString.call(arr))
//[Object,Array]

防抖和节流？

防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时（本质是一个定时器）。
例如：搜索框的联想功能，不断输入值的时候，使用防抖来节约资源。
节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

共同点：

函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
函数防抖是某一段时间内只执行一次，而函数节流是单位时间执行一次。

js中的设计模式？

工厂模式
单例模式
原型模式
组合模式
发布-订阅模式

浏览器缓存？

强制缓存
协商缓存
不是很了解。

js会不会阻塞dom的解析？css会吗？

js会（js中有能够操纵dom的语句）
css不会（css会和html同时加载）

跨域解决方案

通过jsonp跨域
postMessage跨域
跨域资源共享（CORS）插件
nginx代理跨域
nodejs中间件代理跨域
WebSocket协议跨域

JS中的继承？

原型链继承

     //父类
      function Super() {
        this.flag = true;
      }
      //给父类原型添加方法
      Super.prototype.getFlag = function () {
        return this.flag;
      };
      //子类
      function Sub() {
        this.subFlag = false;
      }
      //将父类的实例作为子类的原型
      Sub.prototype = new Super();
      //给子类添加子类特有的方法，注意顺序在继承之后
      Sub.prototype.getSubFlag = function () {
        return this.sunFlag;
      };
      //构造实例，实现继承
      var es5 = new Sub();
      console.log(es5);
       
       /*优点：
        父级新增的属性和方法子级都能够访问的到
        缺点：
        就是多个子类共享一个原型的属性和方法，无法实现多个继承
       */

构造函数继承

        #构造函数继承就是在子级构造函数里面执行父级的构造函数并且改变this的指向
         
          function Person () {
            this.name = 'zhangsan'
            this.age = 23
          }
          Person.prototype.count = 50 
          function Son () {
            Person.apply(this)
            this.num = 18
          }
        
          var son = new Son()
        
          console.log(son.name) // zhangsan
          console.log(son.age)  // 23
          console.log(son.count)// undefined
          
          /*构造函数继承的优点：
            子级直接继承父级构造函数的属性和方法
            
            构造函数继承的缺点：
            子类无法继承父类原型链上的属性和方法
          */

混合继承

        // 混合继承
          function Person () {
            this.name = 'zhangsan'
            this.age = 23
          }
          Person.prototype.count = 50 
          function Son () {
            Person.apply(this)
            this.num = 18
          }
          Son.prototype = new Person()
          var son = new Son()
        
          console.log(son.name) // zhangsan
          console.log(son.age)  // 23
          console.log(son.count)// 50
          
          /*优点：
            集合了原型链继承和构造函数继承的优点集合在一起
          */

ESlass继承，constructor()和super()关键字。

super()方法用来调用父类的构造函数。
constructor是原型对象上的一个属性，默认指向这个原型的构造函数。

你的项目如何实现支付功能的？

网页上：

支付宝：后端返回我一个URL，我直接做跳转就行了。
微信：如果是小程序，调用微信的支付接口。

手机App：

支付宝：调用原生开发人员给我提供的方法就行了。
微信：使用微信小程序提供的支付接口。

你的项目如何获取位置信息？

网页上：使用百度地图做定位
App中：调用原生开发人员提供的方法就行

判断数组：

1.array is array，

2.toString.call(）

arguments是数组吗，类数组转数组的方法

不是，是伪数组，可以用【展开运算符】【array.from】转为数组

typeof&instanceof

typeo用来检测一个变量的类型，在判断null，array，object以及函数实例（new + 函数）时，得到的都是object

instanceof用来判断对象，检测的是原型

obj1 instanceof obj2，如果obj2的原型属性存在obj1的原型链上，值为true。

判断方法是根据对象的原型链依次向下查询，

obj2必须为对象，否则会报错！其返回值为布尔值。

cookie、localStorage、sessionStorage区别

localStorage是永久存储，除非手动删除。

sessionStorage当会话结束（当前页面关闭的时候，自动销毁）

cookie 如果不设置过期时间会在结束当前回话数据就会消失

存储数据大小

localStorage，sessionStorage是：5MB

cookie为4KB

与服务器端通信

cookie 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题

localStorage，sessionStorage 不参与和服务器的通信

应用场景：

localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

使用new调用一个函数，函数内部发生了什么

首先创建一个全xin的对象
将新对象内部的prototype属性指向定义的这个函数的prototype
函数内部的this指向这个新对象
如果函数没有返回其他对象，就返回这个新对象

原型

每个函数都有一个prototype原型对象属性，原型对象内部都有一个指向构造函数的指针constructor，对象都有一个属性-proto-，用于指向创建它的构造函数的原型对象。原型对象上的属性和方法能被实例访问

原型链

当对象查找一个属性的时候，如果没有在自身找到，那么就会查找自身的原型，如果原型还没有找到，那么会继续查找原型的原型，直到找到 Object.prototype 的原型时，此时原型为 null，查找停止。这种通过通过原型链接的逐级向上的查找链被称为原型链。

解决跨域：

使用window.name来进行跨域

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源

jsonp原理

利用script标签的src属性来实现跨域。
ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链接可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是调用callback回调，在src中进行了调用，这样实现了跨域。
cors 克服了AJAX只能同源使用的限制，只要服务器实现了CORS接口，就可以跨源通信。CORS支持所有类型的HTTP请求，浏览器将CORS请求分成两类：简单请求和非简单请求

什么是同源策略？

地址里面的协议、域名和端口号均相同则属于同源，同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

ajax

axax就是可以在页面不刷新的情况下跟服务器进行数据交互。

原理：通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

垃圾回收机制

函数在执行的时候，会创建一个执行空间，用来执行函数中的代码，当函数中代码执行完毕后，这个空间就会销毁。当下一次调用的时候，会重新创建一个执行空间，重新执行。

堆和栈

栈：（线性结构，后进先出的数据结构）基础变量的值是存储在栈中，

而引用变量存储在栈中的是指向堆中的数组或者对象的地址，这就是为何修改引用类型会影响到其他指向这个地址的引用变量。

堆：存放引用类型，保存在堆内存中，实际上保存的不是变量本身，而是指向该对象的指针。动态分配的内存，没有任何引用变量引用它时，系统的垃圾回收机制会回收它。

深拷贝/浅拷贝

浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址，，

深拷贝是开辟一块新的内存地址用于存放复制的对象。使这个新的的指针指向这个新的内存地址

Object.assign()

Array.prototype.concat()

深拷贝

JSON.parse(JSON.stringify())

函数库lodash

递归去复制所有层级属性

重绘回流

回流

当渲染树中元素的尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候

重绘

不会影响页面布局的，比如给一个元素换颜色，这样的行为DOM树不会变化，但颜色变了，渲染树得重新渲染页面，这就是重汇绘

回流必将引起重绘，而重绘不一定会引起回流。

防抖节流

防抖：在事件触发n秒后再执行回调，如果在这n秒内有被触发，就重新计时。

应用场景：1.给按钮加函数防抖阻止表单多次提交。

2.对于输入框连续输入进行ajax验证时，用函数防抖能减少请求次数。

let timeout=null
function debounce（fn,wait）{
		return(args)=>{
		if(timeout!==null)
		}
		timeout=setTimeout(()=>{
		fn(args,wait)
		})
function handle(args){
log(args)
}
}
debounce(handle,1000)({id:'name'})

节流：在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

当持续触发事件时，保证隔间时间触发一次事件。

应用场景：dom元素拖拽

继承

《JavaScript高级程序设计》提到了6中继承方式：

原型链继承

父类的实例作为子类的原型

优点：父类的新增的实例与属性子类都能访问

缺点：可以在子类中增加实例属性，如果要新增加原型属性和方法需要在new 父类构造函数的后面
.借用构造函数继承

用.call()和.apply()将父类构造函数引入子类函数

优点：解决了原型链继承缺点 1.新实例无法向父类构造函数传参2.继承单一。

缺点：只能继承父类构造函数的属性。每次用每次都要重新调用
组合继承

优点：可以继承父类原型上的属性，可以传参，可复用。

缺点：耗内存
原型式继承

优点：类似于复制一个对象，用函数来包装，函数就变成了个可以随意增添属性的实例或对象

缺点：无法实现复用。
寄生式继承

优点：没有创建自定义类型

缺点：无法实现复用。
寄生组合式继承（常用）

寄生：在函数内返回对象然后调用

所谓寄生组合继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。

for Each和map的区别

都是循环遍历数组

forEach(item,index,arr) 遍历数组没有返回值。不改变原有的数组

map(item,index,arr)映射出来一个新的数组，而对原数组没有影响

for in和 for of的区别

前端开发的优化问题

（1）减少 http 请求次数：CSS Sprites, JS、CSS 源码压缩；CDN 托管，data 缓存，图片服务器。，图片预加载，

（2）前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端用变量保存 AJAX

请求结果，每次操作本地变量，不用请求，减少请求次数

（3）用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能

（4）当需要设置的样式很多时设置 className 而不是直接操作 style。

合并多个对象

object.assign()

会覆盖第一个对象中重复的字段

数组乱序

arr.sort(function(){

return Math.roundom()-0.5

})

HTTP协议

HTTP也叫作超文本传输协议，HTTP是无状态的：同一个客户端，连续发起多次请求，对HTTP服务器来说，都是新的请求，HTTP是无连接的：限制每次连接只处理一个请求，服务器处理完客户的请求，并收到客户的应答后，即断开连接。

HTTP请求报文由3部分组成（请求行+请求头+请求体）：Response Headers 响应头 Request Headers 请求头， request line 请求行，Body：响应体，一般是HTML文件。如果是get请求，是没有响应体的。

HTTP协议的请求方法有GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT。

http 状态码有那些？分别代表是什么意思？

100-199 用于指定客户端应相应的某些动作。

2XX类型的状态码代表着请求已经被服务器接收、理解、并接受

3XX这类状态码代表着客户端需要采取进一步的操作才能完成请求，通常，这些状态码是用来重定向的

4XX类型的状态码代表着客户端可能发生了错误，阻碍了服务器的处理，

　400 Bad Request — 服务器未能理解请求或是请求参数有误。

　401 Unauthorized — 被请求的页面需要用户名和密码

404 Not Found — 服务器无法找到被请求的页面。

408 Request Timeout — 请求超出了服务器的等待时间。

5XX服务器错误

　501 Not Implemented — 请求未完成。服务器不支持所请求的功能。

*** 从网站上输入url到用户展示界面，中间都发生了什么？

DNS解析
TCP连接(三次握手)
客户端向服务端发送http请求
服务器处理请求，返回http报文
浏览器解析和渲染页面
连接结束

tcp和udp的区别

TCP是面向连接的协议，而UDP是无连接的协议

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么

HTTP通信过程：

DNS解析获取相应的ip 浏览器先在自身的DNS缓存搜索，如果浏览器未从自身的DNS缓存中搜索到，那么浏览器会搜索操作系统自身的DNS缓存；
TCP连接与浏览器建立tcp，也就是三次握手

三次握手

通俗地讲，通信连接的建立需要经历以下三个过程：

主机向服务器发送一个建立连接的请求

服务器接到请求后发送同意连接的信号

主机接到同意连接的信号后，再次向服务器发送了确认信号
握手成功，浏览器向服务器发送http请求，请求数据包
服务器处理请求并返回HTTP报文
浏览器解析渲染页读取页面内容，解析html源码，生成DOm树，最终把一个完整的页面呈现给用户
连接结束：

四次挥手：

主机向服务器发送一个断开连接的请求

服务器接到请求后发送确认收到请求的信号

服务器向主机发送断开通知

主机接到断开通知后断开连接并反馈一个确认信号，服务器收到确认信号后断开连接
主机向服务器发送一个断开连接的请求

get，post区别

GET把参数包含在URL中，POST通过request body传递参数。

get对传递的数据长度是受到URL大小的限制，URL最大长度是2048个字符。post没有长度限制

get请求可以被缓存，post不可以被缓存

get只支持ASCII字符，post没有字符类型限制

作用域

1.就是在顶层环境中申明的变量都是全局作用域，他们的属性都在window对象下面。

2.在函数内部定义的变量都是函数作用域，只能在函数中访问到，当然也可以通过闭包来访问。除此之外，在其他地方是没法访问函数内部的变量的。

3.局部作用域。es6中新增的特性，弥补了以前只能使用匿名及时运行函数来创建局部变量的缺陷。使用很简单，直接用let来申明变量就行。也可以使用const来申明变量，表明这是常数。

4.作用域链。

vue 的双向绑定原理

Vue采用数据劫持结合发布者-订阅者模式的方法，通过Object.defineProperty()来劫持各个属性的setter,getter属性，在数据变动话，通知订阅者，触发更新回调函数，重新渲染视图

Vue.js的实现方式，对数据（Model）进行劫持，当数据变动时，数据会出发劫持时绑定的方法，对视图进行更新

MVVM的原理

MVVM 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象

MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；

（vue 2.0 和 vue 3.0，两种实现的优缺点）

vue 的 nexttick 原理

diff 算法

vue 的key 作用原理：

当状态的数据发生改变时，react会根据新数据生成新的虚拟dom，然后react进行新虚拟dom与旧dom的diff比较，旧dom找到新虚拟dom相同的key，若虚拟dom没变，用之前的真实dom，变了，生成新的真实dom

没有找到相同key，根据创建的真实dom，渲染到页面

虚拟DOM

通过创建与 DOM 的数据结构映射的 Virtual DOM 虚拟数据结构，我们只操作虚拟数据结构，先比较虚拟 DOM 的异同，再将最终操作结果反应到真实 DOM 中。 在整个过程中，DOM 只操作了一次，其他改变的操作，我们都通过操作虚拟 DOM：当页面元素需要发生变化，原本我们需要通过 DOM 操作，重新渲染页面，而现在，我们只需要操作虚拟 DOM ，由虚拟 DOM 对比之前操作，把页面变化部分反馈给 DOM，此时 DOM 只需要渲染变化的一部分，不用再次渲染整个页面，大大提高效率和性能。

判断数组：

1.array is array，

2.toString.call(）

arguments是数组吗，类数组转数组的方法

不是，是伪数组，可以用【展开运算符】【array.from】转为数组

typeof&instanceof

typeo用来检测一个变量的类型，在判断null，array，object以及函数实例（new + 函数）时，得到的都是object

instanceof用来判断对象，检测的是原型

obj1 instanceof obj2，如果obj2的原型属性存在obj1的原型链上，值为true。

判断方法是根据对象的原型链依次向下查询，

obj2必须为对象，否则会报错！其返回值为布尔值。

cookie、localStorage、sessionStorage区别

localStorage是永久存储，除非手动删除。

sessionStorage当会话结束（当前页面关闭的时候，自动销毁）

cookie 如果不设置过期时间会在结束当前回话数据就会消失

存储数据大小

localStorage，sessionStorage是：5MB

cookie为4KB

与服务器端通信

cookie 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题

localStorage，sessionStorage 不参与和服务器的通信

应用场景：

localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

使用new调用一个函数，函数内部发生了什么

首先创建一个全xin的对象
将新对象内部的prototype属性指向定义的这个函数的prototype
函数内部的this指向这个新对象
如果函数没有返回其他对象，就返回这个新对象

原型

原型链

解决跨域：

使用window.name来进行跨域

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源

jsonp原理

利用script标签的src属性来实现跨域。
ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链接可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是调用callback回调，在src中进行了调用，这样实现了跨域。
cors 克服了AJAX只能同源使用的限制，只要服务器实现了CORS接口，就可以跨源通信。CORS支持所有类型的HTTP请求，浏览器将CORS请求分成两类：简单请求和非简单请求

什么是同源策略？

地址里面的协议、域名和端口号均相同则属于同源，同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

ajax

axax就是可以在页面不刷新的情况下跟服务器进行数据交互。

原理：通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

垃圾回收机制

堆和栈

栈：（线性结构，后进先出的数据结构）基础变量的值是存储在栈中，

而引用变量存储在栈中的是指向堆中的数组或者对象的地址，这就是为何修改引用类型会影响到其他指向这个地址的引用变量。

深拷贝/浅拷贝

浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址，，

深拷贝是开辟一块新的内存地址用于存放复制的对象。使这个新的的指针指向这个新的内存地址

Object.assign()

Array.prototype.concat()

深拷贝

JSON.parse(JSON.stringify())

函数库lodash deepclone

递归去复制所有层级属性

重绘回流

回流

当渲染树中元素的尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候

重绘

不会影响页面布局的，比如给一个元素换颜色，这样的行为DOM树不会变化，但颜色变了，渲染树得重新渲染页面，这就是重汇绘

回流必将引起重绘，而重绘不一定会引起回流。

防抖节流

防抖：在事件触发n秒后再执行回调，如果在这n秒内有被触发，就重新计时。

应用场景：1.给按钮加函数防抖阻止表单多次提交。

2.对于输入框连续输入进行ajax验证时，用函数防抖能减少请求次数。

let timeout=null
function debounce（fn,wait）{
		return(args)=>{
		if(timeout!==null)
		}
		timeout=setTimeout(()=>{
		fn(args,wait)
		})
function handle(args){
log(args)
}
}
debounce(handle,1000)({id:'name'})

节流：在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

当持续触发事件时，保证隔间时间触发一次事件。

应用场景：dom元素拖拽

git命令

git init 初始化版本库

git add 添加到暂存区

git commit ‘备注’ 提交到本地仓库

git remote add origin url 关联到远程仓库

git push orgin master 推送本地master分支

git pull 从远程分支拉取到本地分支

git push 推送到远程版本库

git branch 分支管理 branch-a查看所有分支 branch-r查看本地所有分支

git marge 分支名合并分支

git squash 合并分支之前将多个提交记录合并为一个

git checkout 切换或者创建分支

git clone 克隆版本库

git config 查询修改配置

git stetus显示工作区文件状态

继承

《JavaScript高级程序设计》提到了6中继承方式：

原型链继承

父类的实例作为子类的原型

优点：父类的新增的实例与属性子类都能访问

缺点：可以在子类中增加实例属性，如果要新增加原型属性和方法需要在new 父类构造函数的后面
.借用构造函数继承

用.call()和.apply()将父类构造函数引入子类函数

优点：解决了原型链继承缺点 1.新实例无法向父类构造函数传参2.继承单一。

缺点：只能继承父类构造函数的属性。每次用每次都要重新调用
组合继承

优点：可以继承父类原型上的属性，可以传参，可复用。

缺点：耗内存
原型式继承

优点：类似于复制一个对象，用函数来包装，函数就变成了个可以随意增添属性的实例或对象

缺点：无法实现复用。
寄生式继承

优点：没有创建自定义类型

缺点：无法实现复用。
寄生组合式继承（常用）

寄生：在函数内返回对象然后调用

所谓寄生组合继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。

for Each和map的区别

都是循环遍历数组

forEach(item,index,arr) 遍历数组没有返回值。不改变原有的数组

map(item,index,arr)映射出来一个新的数组，而对原数组没有影响

前端开发的优化问题

（1）减少 http 请求次数：CSS Sprites, JS、CSS 源码压缩；CDN 托管，data 缓存，图片服务器。，图片预加载，

（2）前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端用变量保存 AJAX

请求结果，每次操作本地变量，不用请求，减少请求次数

（3）用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能

（4）当需要设置的样式很多时设置 className 而不是直接操作 style。

合并多个对象

object.assign()

会覆盖第一个对象中重复的字段

数组乱序

arr.sort(function(){

return Math.roundom()-0.5

})

HTTP协议

HTTP协议的请求方法有GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT。

http 状态码有那些？分别代表是什么意思？

100-199 用于指定客户端应相应的某些动作。

2XX类型的状态码代表着请求已经被服务器接收、理解、并接受

3XX这类状态码代表着客户端需要采取进一步的操作才能完成请求，通常，这些状态码是用来重定向的

4XX类型的状态码代表着客户端可能发生了错误，阻碍了服务器的处理，

　400 Bad Request — 服务器未能理解请求或是请求参数有误。

　401 Unauthorized — 被请求的页面需要用户名和密码

404 Not Found — 服务器无法找到被请求的页面。

408 Request Timeout — 请求超出了服务器的等待时间。

5XX服务器错误

　501 Not Implemented — 请求未完成。服务器不支持所请求的功能。

***一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

HTTP通信过程：

DNS解析获取相应的ip 浏览器先在自身的DNS缓存搜索，如果浏览器未从自身的DNS缓存中搜索到，那么浏览器会搜索操作系统自身的DNS缓存；
TCP连接与浏览器建立tcp，也就是三次握手

三次握手

通俗地讲，通信连接的建立需要经历以下三个过程：

主机向服务器发送一个建立连接的请求

服务器接到请求后发送同意连接的信号

主机接到同意连接的信号后，再次向服务器发送了确认信号
握手成功，浏览器向服务器发送http请求，请求数据包
服务器处理请求并返回HTTP报文
浏览器解析渲染页读取页面内容，解析html源码，生成DOm树，最终把一个完整的页面呈现给用户
连接结束：

四次挥手：

主机向服务器发送一个断开连接的请求

服务器接到请求后发送确认收到请求的信号

服务器向主机发送断开通知

主机接到断开通知后断开连接并反馈一个确认信号，服务器收到确认信号后断开连接
主机向服务器发送一个断开连接的请求

get，post区别

GET把参数包含在URL中，POST通过request body传递参数。

get对传递的数据长度是受到URL大小的限制，URL最大长度是2048个字符。post没有长度限制

get请求可以被缓存，post不可以被缓存

get只支持ASCII字符，post没有字符类型限制

作用域

1.就是在顶层环境中申明的变量都是全局作用域，他们的属性都在window对象下面。

2.在函数内部定义的变量都是函数作用域，只能在函数中访问到，当然也可以通过闭包来访问。除此之外，在其他地方是没法访问函数内部的变量的。

4.作用域链。

vue 的双向绑定原理

Vue.js的实现方式，对数据（Model）进行劫持，当数据变动时，数据会出发劫持时绑定的方法，对视图进行更新

MVVM的原理

MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；

vue 的key 作用原理：

没有找到相同key，根据创建的真实dom，渲染到页面

vue按需引入项目优化

babel.config 文件夹进行配置 element.js中依次引入

弹窗类的话是vue.prototype...

虚拟DOM

虚拟dom就是一个真实dom的 Js 对象

如果没有虚拟dom 我要去比页面的差异是需要比对dom的差异的里边绑定的有事件属性各种各样的方法是非常消耗性能的

于是把dom对象变成 js 对象 js对象上边就没有dom对象上边的那些特性单纯的比较js对象是比较快的真实dom的比对变成了 js对象的比对从而提升了代码性能

表示颜色的色值有哪些方法？

rgb、rgba、十六进制、单词、hsl、hsla

css中常见的定位方式

固定定位,fixed，是相对于整个浏览器窗口进行定位
绝对定位,absolute,是基于离它最近的一个非默认定位的元素进行定位
相对定位,relative,是相对于自身应该出现的位置做偏移

true和false的问题

在js中true转换为数字是1

false转换为数字是0

对象中如何删除一个属性

var obj = { name: 'Tom', age: 18, 'a-b': '哈哈哈，我是一个特别的属性，你看，属性名不一样' }
console.log(obj.name)
console.log(obj['a-b'])
delete obj.name // 删除指定的属性

事件代理

事件委托是指将事件绑定到目标元素的父元素上，利用冒泡机制触发该事件

js中的事件传播流程分为三个阶段：捕获、事件源、冒泡

js中的事件传播流程分为三个阶段：捕获、事件源、冒泡
捕获：是从html标签开始，逐层往内进行传递，直到触发事件的标签为止
事件源:是在触发事件的标签之上传递··
冒泡：是从触发事件的标签开始，逐层往外进行传递
事件传播流程 是先捕获 再冒泡 在事件源上传递是按照添加顺序执行

addEventListener表示事件委托，接收三个参数
可以多次添加事件，每一个都会执行
	参数一 事件名字
	参数二 事件的处理函数
	参数三 布尔值，默认是false表示在冒泡阶触发
	
事件阻止 
stopImmediatePropagation 立即阻止 阻止事件的继续传播 在当前标签上也不会继续传递
stopPropagation 阻止事件的继续传播 但是当前标签之上的传递会继续完成
	
onXX是属性赋值的方法添加事件，后面的会覆盖前面的

点击事件只能点击一次 onclick = null
就是click事件被执行的时候，让它把这个事件本身给清空  或者是jq的事件one方法

vue中 v-on
.once <!-- 点击事件将只会触发一次 -->

target和currentTarget的区别

event对象中的target表示触发事件的标签,

currentTarget表示绑定事件的标签。默认情况下两人是相等的

URL中根据参数名直接获取参数值

URLSearchParams

计算数组中每个元素出现的次数

 const arr = [1, 2, 1, 3, 4, 5, 7, 1, 3, 4, 3, 99, 21, 98, 33, 98];
      function demo(n) {
        return arr.filter((item) => item == n).length;
      }
console.log(demo(1));

字典排序

var obj = { name: "Tom", age: 18, skills: "抓老鼠" };
	  // 属性名的字典排序
      console.log(Object.keys(obj).sort());

	 // 属性名排序顺序的属性值显示
      Object.keys(obj)
        .sort()
        .forEach((k) => console.log(obj[k]));

startsWith() 方法

startsWith() 方法用于检测字符串是否以指定的子字符串开始。

如果是以指定的子字符串开头返回 true，否则 false。

startsWith() 方法对大小写敏感。

页面上线需要做的优化

（1）代码压缩

（3）文件合并

（2）图片懒加载

（3）精灵图（css精灵图）

精灵图片

用法：background-position: x坐标 y坐标;
css精灵图也叫做css雪碧图
好处：减少了图片的质量，减少服务器的请求次数

Vue和JQ的区别

从jquery到vue的转变是一个思想上的转变是将原有直接操作dom思想转变为操作数据
传统前端开发模式中是以jq为核心而vue的话是一个精简的MVVM
jq是使用选择器（$）选取DOM对象
vue则是通过vue对象将数据和view（视图）完全分离开了
二者也可结合使用 vue侧重数据绑定而jq则侧重样式操作动画效果等

JQ常用的插件

轮播图放大镜 ...

JQ中自定义插件

extend( ) 和 fn.extend( )

伪数组转换真数组

定义一个空数组循环遍历伪数组之后 push到空数组中

Array.from

关于get和post 的区别

传递参数的位置不同，get请求在url中传递，post在请求体中传递
get传递的参数长度小，post传递的参数长度大
post请求传递的数据有长度限制，是由服务器端决定的
get请求传递的数据量小，是因为通过url进行参数传递的
get请求可以被缓存和加入收藏夹，post不行
post请求相对于get请求会稍微安全一些

Object.keys

参数：要返回其枚举自身属性的对象

返回值：一个表示给定对象的所有可枚举属性的字符串数组

CSS3新增的属性

border-radius
text-shadow box-shadow
3D 2D 动画

sass和less？哪个用的多一点？

从功能出发，Sass较Less略强大一些

sass有变量和作用域。变量有全局和局部之分，并且有优先级

平时怎么使用ajax？默认传数据格式是？

创建xhr对象：XMLHttpRequest()

请求处理: xhr.readystate4 请求状态 : xhr.status200

jQuery发起ajax请求的时候，请求体中的数据是url编码的
axios发起请求的时候，请求体中的数据默认是json编码的
form表单提交post请求的时候，请求体中的数据默认是url编码的

px和rem区别？

px是固定的 rem是根据html的字体大小而决定默认是16px

怎么在请求发起之前执行一个方法？

beforesend 方法

在用ajax请求时，没有返回前会出现前出现一个转动的loading小图标或者“内容加载中…”，用来告知用户正在请求数据。这个就可以用beforeSend方法来实现。

jquery发起请求如何设置超时时间？

timeout

如何从1000个元素的数组中随机取一个元素？

通过随机数获取数组长度中的随机下标

var index = Math.floor((Math.random()*arr.length));

alert(arr[index]);

如何获取数组中最后一个元素

//方法一
var arr = new Array("js","JavaScript","jQuery");
var end = arr.pop()
console.log(end);//jQuery
console.log(arr);//["js", "JavaScript"]
//方法二
var arr = new Array("js","JavaScript","jQuery");
var end = arr[arr.length-1]
console.log(end);//jQuery

数据实时更新

在页面中写一个定时器，不停的向服务器发送请求，获取最新的数据

常见案例：数据大屏/实时更新数据显示/智能设备（快递柜）/聊天室

多人协同工作时，代码如何同步？

Git

如何防止用户多次表单提交？将按钮置为不可用

点击事件只能点击一次 onclick = null 就是click事件被执行的时候，让它把这个事件本身给清空或者是jq的事件one方法

vue项目上线打包的时候如何做优化

如何解决首页白屏？打包的时候需要注意什么？打包的时候如何做性能优化？

1.对代码进行优化，删除无用的代码

2.使用v-show代替v-if

3.使用CDN的方式引入第三方资源文件，减少打包后的文件大小

4.路由懒加载，把每一个页面打包生成单独js文件在访问时进行记载

解决跨域方案

1.终极方案，服务器端解决

2.vue或者react项目可以在项目中配置proxy代理

3.浏览器插件cors

4.nginx服务器配置反向代理

jsonp原理

script src属性 src属性中写访问的网址

react生命周期钩子函数

class定义的组件

- 组件生命周期和性能优化

  分为四个阶段：

  - 初始化

    创建state和获取属性信息

    constructor 初始化的时候执行

  - 挂载

    创建dom节点

    componentWillMount 将要挂载

    render	渲染

 ***componentDidMount 挂载完成，这个是很重要的一个生命周期函数，可以获取当前组件的dom元素和进行api接口调用

  - 更新

    当属性或者数据改变的时候执行更新

    - 属性更新

      componentWillReceiveProps 将要接收新的属性,有一个参数(nextProps)

   ***   shouldComponentUpdate 组件是否需要更新,两个参数(nextProps,nextState)。此方法返回一个bool值，如果为falsename组件不会执行后面的更新操作，如果为true会触发后续的更新操作。此方法主要用来在组件性能优化的时候使用

      componentWillUpdate 将要更新

      render	更新

      componentDidUpdate 更新完成

    - state更新

      shouldComponentUpdate 

      componentWillUpdate 

      render	

      componentDidUpdate 

  - 销毁

    销毁

    componentWillUnmount 组件卸载
    
  
  组件嵌套问题:
  如果出现组件嵌套，那么在父组件render的时候会执行子组件的创建到挂载完成的生命周期

  需要一定会的就是两个函数componentDidMount、shuoldComponentUpdate

  以上生命周期为react16.3之前的生命周期函数，在16.3之后删除了componentWillReceiveProps和componentWillUpdate两个函数，作为了解。知道就行

vue生命周期函数

创建 挂载 更新 销毁
beforecreate  created  创建成功 主要用来获取数据 调用接口的
beforeMount   mounted  挂载成功 主要用来获取当前dom元素
                        ***所谓挂载就是将虚拟dom转为真实的dom节点
beforeUpdate  updated  更新
beforeDestroy  destoryed  销毁

组件嵌套问题:
外部组件的挂载之前 生命周期函数执行完成之后 会执行子组件的创建到挂载完成的生命周期函数 当子组件挂在完成之后 会执行父组件的挂在完成

更新阶段的钩子函数是重复执行的 只要数据或者属性改变 这两个函数就会跟着触发 在更新阶段不能修改data这个数据 否则就会出现死循环
除了更新阶段的钩子函数 其他函数都是在当前组件的存在周期内只执行一次

虚拟dom

就是用js表达的一个dom树结构它的优势可以实现真实的dom局部更新和快速替换（加快渲染速度）

react和vue区别

react使用的jsx语法vue用的是单文件组件
react是单项数据流的，vue实现的时候使用的是数据双向绑定
react对原生js的要求会更高会使用到很多es6的写法，vue相对来说上手比较容易
react学好了可以直接使用react-navtive做原生开发
react是一个针对视图层的库，vue是一个完整的框架。vue提供一套完整的开发模式，但是react需要借助很多的第三方插件进行封装
react目前是facebook在支持，vue的话是一个个人项目

class和function定义的组件有什么区别

class定义的组件中有自己的局部状态和生命周期
class定义的组件代码量更多，有this指向问题
目前官方推荐的写法是使用function定义组件
在react16.8之后的版本中加入了hooks可以在function组件中模拟局部状态和生命周期

什么是无状态组件？

function定义的组件又叫无状态组件

function组件的useEffect是和class定义组件的生命周期函数有什么关联

componentDidMount 挂载完成

componentDidUpdate 更新完成

componentWillUnmount 组件卸载

usEffect第二个参数为空数组的时候表示组件创建成功之后执行，如果有参数表示更新之后执行，useEffect有返回值 返回一个回调函数，这个回调函数会在组件销毁的时候执行

useEffect(()=>{
   //...做了很多事情
    return ()=>{
        console.log('此方法在组件销毁的时候执行')
    }
},[])

antd如何在网页中直接使用

可以直接页面中cdn引用

img标签图片加载不出来什么属性可以显示默认图

onerror 事件

onerror = "this.src='..图片地址..'"

数据可视化

1.echarts
固定的px 不自适应也不考虑兼容
vue 或者 react 等任何项目框架使用
默认使用canvas进行绘制 在移动设备上为了解决图标不清晰的问题 一般使用svg渲染
(canvas：画图,图表插件/图片压缩 图片上传时canvas实现图片压缩【drawimag/FileReader】)

2.highcharts 图片插件 可以兼容到ie6

3.react项目 antV 蚂蚁出的数据可视化
数据大屏的轮询跑久了会造成cpu卡顿，怎么解决？
requestAnimationFrame 动画帧
Websocket

BFC

BFC 块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

怪异盒模型和标准盒模型区别？

标准盒模型的margin/padding/border是包括在宽高内的

怪异盒模型的padding/border是包括在宽高内的不会改变总长

h5中新增的标签有哪些？什么是语义化标签？有什么好处

好处：可读性好 便于seo优化
新增的标签：main / section / nav / heater / footer
语义化标签：通过标签名字就知道它的作用或者用途

什么是seo优化？

seo叫 搜索引擎优化   国内主流的是百度 （竞价排名）

前端开发的时候常用的seo技巧

设置meta标签 设置网站的keywords关键字 desctiption表述信息

1.不要在页面中出现空连接 
 
2.为图片添加 title 和 alt属性

3.设置页面中的h几 标题

4.定期更新网站内容

5.购买外链接   6.优化网站性能，提高网站加载速度

网站的性能优化

js和css文件压缩合并 
减少http请求次数
对网页中使用的图片资源进行压缩
css中使用精灵图片
使用cdn资源加速
优化代码 删除无用的标签
开启服务器的gzip压缩
开启服务器的缓存

浏览器兼容性

目前国内来讲需要注意的浏览器兼容性主要是360的极速模式和兼容模式
电脑中浏览器的兼容性(360浏览器，qq浏览器，搜狗浏览器，ie老版本的一些)
手机浏览器兼容性(一般手机，小米手机，ios手机)，微信浏览器
解决办法：
针对不同的场景有不同的方法
通用方法：
1.加浏览器内核前缀(ie,火狐，谷歌)
2.使用jQuery的低版本 解决js兼容性问题
3.避免使用h5中新增的语义化标签
4.避免使用css3中新增的样式
5.为所有的浏览器设置通用的css样式

块元素和行内元素有哪些？

块级元素：div , p , form, ul, li , ol, dl, form

行内元素：span, strong, em, br, img , input, label

清楚浮动

clear:both
为什么会出现浮动:
flot引起的脱离文档流

如何实现页面自适应

rem单位
媒体查询
flex结合百分比布局

在开发得时候如何使用css实现一个鼠标移上之后图片放大0.5倍的效果

:hover 鼠标移过
方法动画 transform：scale(几倍)

Css3中新增的伪类

:after 在元素内部最前添加内容
:before 在元素内部最后添加内容
:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:first-child
:last-child
:only-child

display:none 和 visibility:hidden 有什么区别?

同样都是隐藏 
visibility：hidden 是依旧会占位置的

怎样添加、移除、移动、复制、创建和查找节点？

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

2)添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

3)查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id，唯一性

都有哪些方式实现回到顶部功能?

使用锚点，页面顶部放置一个锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置。

//锚点方式
<body style="height:2000px;">
    <div id="topAnchor"></div>
    <a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到顶部</a>
</body>

监听浏览器的scollTop事件,当用户滚动到页面底部时，出现回到顶部按钮，点击之后重置浏览器滚动条的高度.

//兼容性获取并监听浏览器滚动条
var osTop=document.documentElement.scrollTop|| document.body.scrollTop;
document.documentElement.scrollTop=document.body.scrollTop = 0;

3.第三方插件，例如jquery中:

$('html,body').animate({srollTop:0},500);

js常用插件

lodash 是一个js工具类库封装了常见的js方法

lodash常用的

_.deepclone 深拷贝

_.uniquBy数组去重 u内q

（抽奖使用）

_.sample 随机一个元素 sun 波

_.sampleSize集合中获得n个随即元素

qs 是一个用来格式化url参数的插件

moment 是一个用来做日期处理的

jQuery 是一个元素选择器

面试名词

OA 办公自动化（学员管理这类）

ERP 企业资源管理系统

CRM 客户资源管理系统

CMS 资源(内容)发布系统 wordPress 全球最知名的一个cms系统国内的有织梦

BBS 论坛目前国内的论坛大部分是用dz论坛是一套PHP写的开源代码

项目管理软件

禅道 -- 收费的项目管理软件

teambition 团队工具

redmine 免费开源项目管理软件

代码管理托管平台 --- gitlab

JavaScript概览

Part 1

javaScript是一种什么样的语言？

数据类型

es6新增内容

1.let&const

2.解构赋值

3.箭头函数：this指向

如何改变this指向（区别）

4.扩展运算符

5.Set（所有元素都是唯一的）

6.模板字符串

7.promise

Promise是什么，它的API有哪些？

Promise.all()

Promse.race()

Promise与async/await有什么区别？

axios请求和ajax请求区别

js的执行机制？微任务和宏任务 EventLoop

异步队列中牵扯到一个概念

什么是异步加载？异步加载和延迟加载有什么区别？

前端和服务器端进行交互都有哪些方式？

常用的ajax插件传递数据的区别

fetch

如何判断用户的设备来源？

js中forEach和map的区别？

为什么操作dom会消耗性能

什么是重排和重绘？

浏览器渲染引擎的工作原理和工作流程？

有哪些操作会导致内存泄漏

link和import的区别

你做的页面都在哪些浏览器测试过，这些浏览器的内核分别是什么？

HTML文件开头的Doctype的作用？

渐进增强和优雅降级如何理解？

src和href的区别？

你在开发过程中都用过什么格式的图片？

网页上图片非常多，加载会比较慢，如何优化？

如何水平垂直居中一个盒子？

Part 2

对象的相关操作

字符串相关操作

js中字符串和对象的转换

介绍http请求报文

dataset数据集？

ajax如何做一个loading效果？

什么是虚拟dom？有什么优势？

diff算法是什么？

OSI七层模型？

CSS常见的布局方式？

介绍一下css的盒模型？

介绍一下XSS攻击和CSRF？

判断数据类型的几种方法？

call/apply/bind区别和原理？

如何清除浮动？

判断一个数据是不是数组？

防抖和节流？

共同点：

js中的设计模式？

浏览器缓存？

js会不会阻塞dom的解析？css会吗？

跨域解决方案

JS中的继承？

原型链继承

构造函数继承

混合继承

ESlass继承，constructor()和super()关键字。

你的项目如何实现支付功能的？

网页上：

手机App：

你的项目如何获取位置信息？

判断数组：

arguments是数组吗，类数组转数组的方法

typeof&instanceof

instanceof用来判断对象，检测的是原型

cookie、localStorage、sessionStorage区别

存储数据大小

与服务器端通信

应用场景：

使用new调用一个函数，函数内部发生了什么

原型

1.`let&const`

2.`解构赋值`

3.`箭头函数：this指向`

4.`扩展运算符`

5.`Set（所有元素都是唯一的）`

6.`模板字符串`

7.`promise`

`Promise与async/await有什么区别？`

`axios请求和ajax请求区别`