前端面试复习题（1）

这周末要参加字节的一面了，小白有点慌。。
总之先记录一下目前学到的，为以后继续打下基础。

1.如何设置水平垂直居中

实现一个元素水平居中的方法

• ①设置父元素relative，子元素absolute，top：50％，left：50％，margin-top：宽高的负1/2 ：兼容性好，缺点需要知道元素宽高
• ②设置父元素relative，子元素absolute，top：50％，left：50％，transform: translate(-50%, -50%);
• ③设置父元素relative，子元素absolute，top、left、right、bottom为0，margin为auto
• ④设置父元素display:flex（弹性盒），justify-content:center,align-items:center

ps：
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

2.W3C盒子模型和IE盒子模型区别

W3C盒模型和IE盒模型的区别

• ①w3c盒子模型即flex盒子模型
• ②w3c的width就是padding内部，而IE的width包含了padding和border，即margin内部
• ③避免触发IE盒模型的方法是使用声明，告诉IE采用W3C盒子模型即可

3.flex有哪些属性

Flex 布局教程：语法篇

①容器的属性

• ①flex-direction ：决定主轴的方向
  row、row-reverse、column\column-reverse
• ②flex-wrap：设置元素是否换行（类似于overflow）
  nowrap、wrap、wrap-reverse
• ③flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
• ④justify-content:项目在主轴（横轴）上的对齐方式
  flex-start、flex-end、center、space-between、space-around
• ⑤align-items：定义项目在交叉轴上如何对齐
  flex-align、flex-end、center、baseline、stretch
• ⑥align-content：定义多根轴线的对齐方式,如果项目只有一根轴线则不起作用
  flex-start、flex-end、center、space-between、space-around、strech

②项目的属性

• ①order
  定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• ②flex-grow
  定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• ③flex-shrink
  定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值无效。
• ④flex-basis
  定义了在分配多余空间之前，项目占据的主轴空间，默认值auto即项目本来的大小。
• ⑤flex
  flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
• ⑥align-self
  允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

4.状态码

HTTP常见状态码（14种）

HTTP状态码表示客户端HTTP请求的返回结果、标记服务器端的处理是否正常或者是出现的错误，能够根据返回的状态码判断请求是否得到正确的处理很重要。

数字中的第一位指定了响应类别，后两位无分类。

状态码	类别	原因短语
①1xx	Informational（信息性状态码）	接受的请求正在处理
②2xx	Success （成功状态码）	请求正常处理完毕
③3xx	Redirection （重定向）	需要进行附加操作以完成请求
④4xx	Client error (客户端错误)	客户端请求出错，服务器无法处理请求
⑤5xx	Server Error (服务器错误)	服务器请求出错

200 OK
204 No Content
206 Patial Content
301 Moved Permanently
302 Found
303 See Other
304 Not Modified
307 Temporary Redirect
400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found
500 Inter Server Error
503 Server Unavailable

5.Vue生命周期

详解vue生命周期
Vue - 生命周期详解

开始创建、已创建、compile、“虚拟”替换真实、beforeCreate、created、beforeMount、mounted、beforeUpdate、update、beforeDestory、destoryed

这一块还需要再学

6.ES6新特性

ES6中常用的10个新特性讲解

• ①const和let

const声明局部常量、let声明局部变量、var声明全局变量
如果const是一个对象，对象所包含的值是可以被修改的，即对象所指向的地址没有变就行。
student.name = ‘yy’;// 不报错 student = { name: ‘yy’ };// 报错
几个注意点：
let 关键词声明的变量不具备变量提升（hoisting）特性，即不能在声明变量前使用它
let 和 const 声明只在最靠近的一个块中（花括号内）有效
当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING
const 在声明时必须被赋值

• ②模板字符串

之前：使用“\”和“+”
ES6：反引号（``）和${}

• ③箭头函数

var add = function(a,b){return a+b};
var add = (a,b) => a+b;
三个最直观的特点：
不需要function
省略return
继承当前上下文的this关键字

默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。
要比较数字而非字符串，比较函数可以简单的以 a 减 b
var arr = [10, 20, 1, 2];
arr.sort((x, y) => {
x-y
});
console.log(arr); // [1, 2, 10, 20]

• ④函数的参数默认值

ES6之前：
function printText(text) {
text = text || ‘default’;
console.log(text);
}
ES6：
function printText(text = ‘default’) {
console.log(text);
}

• ⑤Spread和Rest操作符…

当被用于迭代器中时，它是一个 Spread 操作符
function foo(x,y,z) {
console.log(x,y,z);
}
let arr = [1,2,3];
foo(…arr); // 1 2 3

当被用于函数传参时，是一个 Rest 操作符：当被用于函数传参时，是一个 Rest 操作符：
function foo(…args) {
console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

• ⑥二进制和八进制字面量

let oValue = 0o10;
console.log(oValue); // 8

let bValue = 0b10; // 二进制使用 0b 或者 0B
console.log(bValue); // 2

• ⑦对象和数组解构

申明一个student对象或数组
// 对象
const student = {
name: ‘Sam’,
age: 22,
sex: ‘男’
}
// 数组
// const student = [‘Sam’, 22, ‘男’];

解构：
const{name,age,sex} = student;
console.log(name+’ — ‘+age+’—’ +sex);

• ⑧允许在对象中使用super方法

super关键字用于访问和调用一个对象的父对象上的函数。

• ⑨for…of 和 for…in

let letters = [‘a’, ‘b’, ‘c’];
letters.size = 3;
for (let letter of letters) {
console.log(letter);
}

• ⑩ES6中的类

extends 允许一个子类继承父类，需要注意的是，子类的constructor 函数中需要执行 super() 函数。
也可以在子类方法中调用父类的方法，如super.parentMethodName()。

7.匿名函数

js中的匿名函数

指的是没有名字的函数

(function (str){
//此时会输出陈文彬好帅！
console.log(“陈文彬”+str);
})(“好帅！”)

作用：
1、通过匿名函数可以实现闭包，闭包是可以访问在函数作用域内定义的变量的函数。若要创建一个闭包，往往都需要用到匿名函数。
2、模拟块级作用域，减少全局变量。执行完匿名函数，存储在内存中相对应的变量会被销毁，从而节省内存。再者，在大型多人开发的项目中，使用块级作用域，会大大降低命名冲突的问题，从而避免产生灾难性的后果。自此开发者再也不必担心搞乱全局作用域了。

8.闭包

闭包就是能够读取其他函数内部变量的函数，可以简单理解为“定义在一个函数内部的函数”。
“链式作用域”：子对象会一级一级地向上寻找所有父对象的变量。

作用：
①是前面提到的可以读取函数内部的变量。
②是让这些变量的值始终保持在内存中。

9.JS中的垃圾回收机制

前端面试：谈谈 JS 垃圾回收机制
几种垃圾回收算法

根的概念：（无法删除）
①本地函数的局部变量和参数
②当前嵌套调用链上的其他函数的变量和参数
③全局变量
④还有一些其他的内部的

什么是垃圾：
一般来说没有被引用的或不再引用的对象就是垃圾，就是要被清除，有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。

如何检索垃圾：
标记-清除算法：从跟结点开始一直访问它的子代并标记，直到无法迭代，再删除不可从根访问到的对象。
优化：
①分代回收–对象分为“新对象”和“老对象”，许多对象出现，完成它们的工作并迅速被清理干净。而活的足够久的对象，会变“老”，很少接受检查
②增量回收–将垃圾回收分解为多个部分，各个部分分别执行，需要额外的标记来跟踪变化，延迟较小。
③空闲时间收集–垃圾回收器只在CPU空闲时运行，以减少对执行的可能影响。

10.原型链

javascript——原型与原型链

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。假如让原型对象等于另一个类型的实例，此时原型对象将包含一个指向另一个原型的指针，相应的，另一个原型也包含着一个指向另一个构造函数的指针。假如令一个原型又是另一个类型的实例，那么层层递进，就构成了实例与原型的链条。