深信服-初试记录
框架部分
vue的生命周期
每个Vue实例在被创建时都要经过一系列的初始化过程，同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
生命周期钩子的this上下文指向调用它的实例函数。
注意：不要在选项或回调上使用箭头函数，比如created: () => console.log(this.a)或vm.$watch('a',newValue => this.myMethod())。因为箭头函数并没有this，经常导致一些错误。
vue中watch和computed的区别
wacth和computed都是vue的内置方法，和props、data、methods是一样的，他们之间的生成顺序是：
props=>methods=>data=>computed=>watch;
watch选项
需要一个自定义侦听器，用于响应数据变化。
当需要在数据变化时执行异步或开销较大的操作时，这个方法最有用。
没有缓存,每次监听的值发生变化时都会执行回调
监听某一个值的变化
不是必须要return返回
computed选项
使用场景：某个属性的值需要来自多个属性的简单计算或者复杂的逻辑计算得出的值时
计算属性是基于它们的响应依赖关系缓存的，只在相关响应式依赖发生改变时他们才会重新求值。
使用方法也可以实现相同的效果，但相比之下，每当触发重新渲染时，调用方法将会再次执行函数。
必须要用return返回
函数内部的数据改变也会触发
不支持异步，当内部有异步操作时无效
命令式vm.$watch API
$watch(expOrFn,callback,[options])是一个实例方法，侦听组件实例上的响应式 property 或函数计算结果的变化。回调函数得到的参数为新值和旧值。
只能将顶层的data/props/computedproperty名作为字符串传递，对于更复杂的表达式，用一个函数取代。
当侦听的值是一个对象或者数组时，对其属性或元素的任何更改都不会触发侦听器，因为它们引用相同的对象/数组。
$watch 返回一个取消侦听函数，用来停止触发回调
选项：deep和immediate
$refs用来访问子组件的方法，调用时会导致数据的延迟滞后之后问题，出现bug。
解决方法：
采用异步回调，然后传参进去。如使用es6的promise：
handleAsync(){
reutrn new Promise(resolve=>{
const res ="";
resolve(res)
})
}
async handleShow() {
await this.handleAsync().then(res=>{
this.$refs.child.show(res);
})
}
JS部分
for in 和 for of 的用法与区别
for in的用法
以任意顺序遍历一个对象的除Symbol以外的可枚举属性，用来循环带有字符串key的对象的方法。
不推荐用来循环一个数组，数组的index跟普通的对象属性不同，是重要的数字序列指标。
因为是遍历所有可枚举属性，这意味着如果你为数组原型添加任意属性，这些属性将会出现在循环之中。
**常用于调试，可以更方便地检查对象属性。**处理有key-value的数据。
var obj = {a:1,b:2,c:3};
for(var prop in obj)(
console.log("obj." + prop + " = " + obj[prop]);
)
for of
在可迭代对象上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句
优点：
比传统的for循环简洁，同时弥补了forEach和for-in的循环短板。
可以在停止或者任意时刻中断循环。
不需要提前固定指数。
const array1 = ['a','b','c'];
for(const element of array1){
console.log(element);
}
//expected output: "a","b","c"
//迭代String
let iterable = "boo";
for(let value of iterable){
console.log(value);
}
//"b","o","o"
for…of和for…in的区别
区别在于他们的迭代方式。
for…in语句以任意顺序迭代对象的可枚举属性。
它不记录数组元素，因为这些不是枚举属性，但他记录数组索引以及自身属性和继承的属性。
for…of语句遍历可迭代对象定义要迭代的数据。
数组的foreach方法 和 Map方法 、filter方法以及 reduce方法的区别
foreach方法对数组的每个元素执行一次给定的函数。
map()方法创建一个新的数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
如果你不打算使用返回的新数组，或/且没有从回调函数中返回值，则不该使用map，可以使用foreach或for…in代替。
除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。
filter,和map数组一样返回一个新数组，这个新数组是过滤过的
语法差异
foreach和map、语法相同，每次执行匿名函数都支持三个参数，item当前每一项，index索引值、arr原数组，还有thisArg。thisArg有值时this指向thisArg参数，如果省略，或其值为null或undefined，this指向全局对象。
reduce的语法不同，回调函数支持四个参数，accumulator是上次调用回调时返回的累积值，currentValue,index,array调用reduce()的源数组。
返回值差异
foreach返回值是undefined，map的返回值是一个新数组，由原数组每个元素执行回调函数的结果组成，reduce返回函数累积处理的结果（即把数组缩减为一个值）
速度差异
map()速度比forEach()快
let不会变量提升的原理
他们的作用域被限制在块级内，而不是函数内。var声明的变量不是函数作用域就是全局作用域的，而使用let或const声明的变量，会被困在暂时性死区内直到它的declare(声明)被执行。
值相等和绝对相等
var a = b = 1; a=== b //true
var a = 1,b = 1; a=== b // true
var a = b = {} ;a == b //true
var a = b = {}; a=== b //true
var a = {};b = {}; a == b // false
var a = {};var b = {};a===b; //false
[2]==[2] //false
//相当于 var a = [2];var b = [2];a == b
对于string,number,boolean等基础类型，和=是不同的。
==会将两个操作对象转换成同一类型，再比较值，如果值相等则返回true
===如果两个操作对象类型不同，直接返回false.
var a = 1; var b = '1'; a == b; //true
var a = 1; var b = '1'; a === b; //false
var a = false; var b = 0;a == b; //true
var a = false; var b = 0;a === b; //false
对于Array,Object等高级类型。和=没有区别。
直接比较指针地址，是否在内存中同一个位置，如果不是，则不是同一个对象，即使值相等也不相等
基础类型与高级类型比较。
==，先将高级类型转换为基础类型，再进行值比较，（对象不适用）
===，类型不同，所以直接返回false。
[]==0 //true
[]===0//false
var a = {};var b =0 ;a==b;a===b//false
注意：NaN==NaN //返回false，NaN和所有值包括自己都不相等。
特殊的例子
null == undefined //true
null instanceof Object //false
false == undefined //false
关于Promise
console.log('Hello World!');
function test () {
//定义一个函数，函数提升
return new Promise((resolve, reject) => {
console.log(2)
resolve(true)
console.log(3)
})
console.log(4)
}
setTimeout(function() {
//setTimeout不会立刻执行，属于第二轮宏任务
test().then(res => {
console.log(7)
//then的回调函数需要在resolve执行之后触发
})
console.log(5);
}, 0)
console.log(6)
//Hello World,6,2,3,5,7
//执行第一轮Hello World,6,没有微任务
//第二轮,2,3,5,微任务 7
CSS部分
标准的盒模型和IE的有什么区别
标准的盒模型包括 margin、border、padding、content，并且 content 部分不包含其他部分。
IE盒模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding。
伪元素有哪些
CSS伪元素用于向某些选择器设置特殊效果。
| 属性 | 描述 |
|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式。 |
| :first-line | 向文本的首行添加特殊样式。 |
| :before | 在元素之前添加内容。 |
| :after | 在元素之后添加内容。 |
CSS伪类
| 属性 | 描述 |
|---|---|
| :active | 向被激活的元素添加样式 |
| :focus | 向拥有键盘输入焦点的元素添加样式 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
| :link | 向未被访问的链接添加样式 |
| :visited | 向已被访问的链接添加样式 |
| :first-child | 向元素的第一个子元素添加样式 |
| :lang | 向带有指定lang属性的元素添加样式 |
几种定位方式和他们的区别
| 相对定位 | 绝对定位 | 固定定位 |
|---|---|---|
| 相对于元素原来的位置偏移 | 相对于祖元素（元素（父元素没有设置定位时）或其最近的定位祖先）偏移 | 相对于浏览器视口本身 |
| 它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。 | 绝对定位的元素不再存在于正常文档布局流中。相反，它在它自己的层独立于一切。 | 工作方式与绝对定位完全相同。 |
使元素水平居中margin: 0 auto
关于flexbox
flexbox是一种一维的布局模型，一次只能处理一行或者一列的元素布局。与之相对的是二维布局Grid，可以同时处理行和列上的布局。
主轴和交叉轴
主轴使用flex-direction定义，交叉轴垂直于主轴:
设定为row/row-reverse，主轴沿着inline方向延伸，则交叉轴方向沿着列向下。
设定为column/column-reverse，主轴沿着block排列的方向延伸，交叉轴是水平方向。
创建flex容器
使用display:flex或display:inline-flex来创建flex容器。flex容器中的所有flex元素会有下列行为：
元素排列为一行（flex-direction初始值为row），从主轴的起始线开始，不会在主维度方向上拉伸，但可以缩小。元素被拉伸来填充交叉轴大小。flex-basis属性为auto，flex-wrap属性为nowrap。
如果有太多元素超出容器，它们会溢出而不会换行。
更改flex方向flex-direction
flex-direction改为column,主轴和交叉轴交换，改为column-reverse，起始线和终止线交换。
使用flex-wrap实现多行Flex容器
设置flex-wrap:wrap
flex-direction和flex-wrap组合为简写属性flex-flow
用法：flex-flow: row wrap;
align-items和justify-content
align-items可以使元素在交叉轴方向对齐。
初始值为stretch，所以元素会被拉伸到最高元素的高度–即容器的高度。
flex-start，元素从容器的交叉轴的起始线排列对齐。
flex-end，元素从容器的交叉轴的终止排列对齐。
若元素方向为row,则交叉轴的起止点是从上到下。
相反，若元素方向为column,则交叉轴的起止点是从左到右。
center，居中对齐。
justify-content用来使元素在主轴方向上对齐。
space-between,平均分配空间，元素之间间隔相等。
space-around,每个元素的左右空间相等。
CSS GRID LAYOUT
css网格布局擅长于将一个页面划分为几个主要区域，以及定义他们的大小、位置、层次等关系。
适用于布局页面主要的区域布局或小型组件。
使用display:grid或display:inline-grid来创建一个网格容器。
网络与数据结构
http状态码有哪些？
200 OK
301重定向（永久转移到另一个地址）
302 Found（Moved Temporarily，该资源临时改变了位置）:对于服务器，通常会给浏览器发送HTTP Location头部来重定向到新的新位置。
304 Not Modified（浏览器缓存机制）
400 Bad Request
401 Unauthorized 需要进行身份验证，未经许可，一般是用户名或口令字输错会返回
403 Forbidden访问权限问题，一般已经经过认证，只是该用户没有访问权限。
404 Not Found无法找到请求资源
500 Inter Server Error
503 Server Unavailable
二叉树的最大深度
单链表的排序
display:inline-grid`来创建一个网格容器。
网络与数据结构
http状态码有哪些？
200 OK
301重定向（永久转移到另一个地址）
302 Found（Moved Temporarily，该资源临时改变了位置）:对于服务器，通常会给浏览器发送HTTP Location头部来重定向到新的新位置。
304 Not Modified（浏览器缓存机制）
400 Bad Request
401 Unauthorized 需要进行身份验证，未经许可，一般是用户名或口令字输错会返回
403 Forbidden访问权限问题，一般已经经过认证，只是该用户没有访问权限。
404 Not Found无法找到请求资源
500 Inter Server Error
503 Server Unavailable
4436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
