前端

面试那些事

根据最近找工作，把自己遇到的问题都记录了下来，跟大家一起分享

首先说一下技术之外的：
1.一般都会先让介绍自己
答：（过往重点工作经历{匹配求职意向的内容}，简单的未来规划）
eg:面试官您好，我加xxx,是xx届的毕业生，来自xx学校xx专业。
我有过x段实习经历。第一段是在xx公司 参与xx项目 ，第二段是在xx公司 参与xx项目，主要做那些工作，有做过xx项目的经验。
我这次面试的岗位是xx,因为对这个职业感兴趣，希望未来的工作能在这个方向有所深入，我积累了一些相应的经验，也比较符合公司的招聘需求，也希望能够有机会来公司任职，谢谢。

2.开发过程中遇到困难怎么解决的
答：技术做不到的就百度，技术做到的出现的bug，就在开发调试工具里面，找出原因

下面介绍HTML里面相关的知识

1.Html的行内元素和块元素
行内元素：span、img、input、a、label、button、select、textarea
块级元素：div、h1、hr、ul、ol、address、article、aside

2.HTML5中新增的标签
nav
article
figure(标题)
menu(列表或菜单)
hgroup(标题组)

(1)定义导航链接nav
并不是在某处加上这个标签就有了导航的样式了，这都是有意义的div而已，在头部header中加入菜单标签nav，nav标签可以和ul li标签合用

(2)定义文章标签article

(3)定义元素的细节details

3.HTML中盒子模型有两种

w3c的盒子模型： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型
可用属性 box-sizing:content-box;（width= width）转换成IE盒模型

IE的盒子模型： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 。
可用属性 box-sizing:border-box(width = width + border + padding)转换成W3C盒子模型

4.垂直居中的方法
方法一：display:flex
.parent {
width: 300px;
height: 200px;
border: 1px solid ;
display: flex;
justify-content: center; /水平居中/
align-items: center; /垂直居中/
}
.child {
width: 100px;
height: 100px;
border: 1px solid black;
}
方法二：定位的方法
(适用情况：知道子div的宽高，可以不知道父div的宽高。)
.parent {
width: 400px;
height: 300px;
border: 2px solid ;
position: relative;
}
.child {
width: 150px;
height: 100px;
border: 1px solid ;
position: absolute;
top: 50%;
left:50%;
margin-top: -50px; /这里是子div高的一半/
margin-left: -50px; /这里是子div宽的一半/
}
方法三：定位及margin: auto实现
.parent {
width: 500px;
height: 200px;
border: 1px solid ;
position:relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid ;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
方法四：display: table-cell
.parent {
width: 500px;
height: 200px;
border: 1px solid ;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
width: 100px;
height: 100px;
border: 1px solid ;
display: inline-block;
}
方法五：计算四周的间距设置子元素与父元素之间的margin-top和margin-left（不推荐）
.parent {
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 100px;
height: 100px;
border: 1px solid violet;
margin-top: 50px;
margin-left: 100px;
}
5.Css里的优先级
样式优先级：
行内样式>内部样式>外部样式
样式表的优先级
内联样式（行内样式）的优先级最高，内部样式与外部样式的优先级取决于样式书写的先后顺序，谁在后面谁的优先级高。

选择器优先级：
ID选择器>类选择器>标签选择器

下面介绍js里面相关的知识

1.let和const的区别？
let声明的变量可以改变，值和类型都可以改变，没有限制。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
如果声明的是复合类型数据，可以修改其属性

一、var声明的变量会挂载在window上，而let和const声明的变量不会
var a = 100;
console.log(a,window.a); // 100 100

let b = 10;
console.log(b,window.b); // 10 undefined

const c = 1;
console.log(c,window.c); // 1 undefined
二、var声明变量存在变量提升，let和const不存在变量提升
console.log(a); // undefined ===> a已声明还没赋值，默认得到undefined值
var a = 100;
console.log(b); // 报错：b is not defined ===> 找不到b这个变量
let b = 10;
console.log©; // 报错：c is not defined ===> 找不到c这个变量
const c = 10;
三、let和const声明形成块作用域
if(1){
var a = 100;
let b = 10;
}
console.log(a); // 100
console.log(b) // 报错：b is not defined ===> 找不到b这个变量
四、同一作用域下let和const不能声明同名变量，而var可以
五、暂存死区
var a = 100;
if(1){
a = 10;
//在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a，
// 而这时，还未到声明时候，所以控制台Error:a is not defined
let a = 1;
}
2.数组合并
var arr1 = [1, 2, 3];var arr2 = [“a”,“b”,“c”,“d”,“e”,“f”];
1、concat
var arr = arr1.concat(arr2); // [1, 2, 3, “a”, “b”, “c”, “d”, “e”, “f”]
Array对象提供的concat()方法，连接两个或更多的数组，并返回一个新数组，原数组不变。
但当我们需要连接多个数组的时候，效率很低，会造成很大的内存浪费，所以这个方法肯定不是最好的。

2、 通过for循环
for(let i in arr1){
arr2.push(arr[i]);
}
console.log(arr2) // [1, 2, 3, “a”, “b”, “c”, “d”, “e”, “f”]
这样写性能相对来说要高一点，但是会改变数组本身的值,而且很丑

3、通过map()
arr1.map(item=>{
arr2.push(item)
});
console.log(arr2) // [1, 2, 3, “a”, “b”, “c”, “d”, “e”, “f”]
这样写性能相对来说要高一点，但是也会改变数组本身的值，这样看起来逼格高一点啦~~~

4、apply
函数的apply方法有一个特性，那就是func.apply(obj,argv)，argv是一个数组。所以我们可以利用这点，直接上代码：

arr1.push.apply(arr1,arr2);
console.log(arr1) // [1, 2, 3, “a”, “b”, “c”, “d”, “e”, “f”]
2.
Array.prototype.push.apply(arr1,arr2);
console.log(arr1) // [1, 2, 3, “a”, “b”, “c”, “d”, “e”, “f”]
调用arr1.push这个函数实例的apply方法，同时把，arr2当作参数传入，这样arr1.push这个方法就会遍历arr2数组的所有元素，达到合并的效果。也会改变数组本身的值

5、ES6 – 扩展运算符
arr = […arr1,…arr2]
console.log(arr) // [1, 2, 3, “a”, “b”, “c”, “d”, “e”, “f”]
这个方法不会改变原数组的内容，返回新数组。
3.在数组中增加一个元素，删除一个元素用的方法
/ 往数组结尾添加元素
arr.push( 元素 );
Unshift插入到元素的头部
// 删除数组里索引是 index 的那个元素。第二个参数 1 表示删除一个元素
arr.splice( index, 1 );
4.js回掉函数
函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数。
5.js闭包
当内部函数 在定义它的作用域 的外部 被引用时,就创建了该内部函数的闭包 ,如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被 释放,因为闭包需要它们.
6.Call和Apply函数
使用Call和Apply函数来保存this
我们可以使用Call或者Apply函数来修复上面你的问题。到目前为止，我们知道了每个Javascript中的函数都有两个方法:Call 和 Apply。这些方法被用来设置函数内部的this对象以及给此函数传递变量。
call接收的第一个参数为被用来在函数内部当做this的对象，传递给函数的参数被挨个传递（当然使用逗号分开）。Apply函数的第一个参数也是在函数内部作为this的对象，然而最后一个参数确是传递给函数的值的数组。

关于React

1.React生命周期
第一次渲染生命周期：

更新state：
更新props：用forceUpdate更新：
新的生命周期：

getDerivedStateFromProps：作用是返回一个对象(必须得是对象或者数组)来更新state的数据。更新当前的state和新的即将要更新的新state。

getSnapshotBeforeUpdate：作用是返回一个数据，作为componentDidUpdate的第三个参数传入。

第一次渲染：
更新state：
更新props：
用forceUpdate更新：
componentWillMount：在第一次渲染时第一个运行的生命周期，可以修改state，修改的state将在下一个生命周期开始就可以直接用，它接下来的生命周期是render和componentDidMount，所以没法知道传入的参数。也可以修改props，修改了props以后重新运行生命周期。

render: 可以修改state和props，但是很危险的操作，都是重新运行一遍生命周期。

componentDidMount：在第一次渲染时，渲染结束运行的生命周期，修改state很安全，也可以修改props，都是重新运行一遍生命周期

componentWillReceiveProps：在更新props时运行的生命周期，可以修改state或者修改props。如果修改了state以后，之后的生命周期传入的state参数会更新。修改props在这个生命周期里是个很危险的操作，会重新运行一遍生命周期。

shouldComponentUpdate：在更新props或者state时运行的生命周期，返回true或者fase，一旦返回的是false，接下来的生命周期都不再运行。这里可以修改props或者state，但是很危险,都是重新运行一遍生命周期。

componentWillUpdate：在修改props或者state即将渲染时运行的生命周期。可以修改state或者props，但是很危险,都是重新运行一遍生命周期。

componentDidUpdate：在修改props或者state渲染完render运行的生命周期。可以修改state或者props，但是很危险,都是重新运行一遍生命周期。

getDerivedStateFromProps: 无论什么情况下都是第一个运行的生命周期。这个生命周期是类的静态方法，这个函数返回一个对象(必须得是对象或者数组)来更新state的数据。

更新当前的state和新的即将要更新的新state。不能访问实例，所以不能修改state和props。但是也可以给全局增加一个变量，在componentDidMount的时候赋值实例。这样子可以修改props和state，但是很危险。

这个生命周期在第一次渲染时代替了componentWillMount。

在修改state代替了componentWillUpdate。

在修改props时代替了componentWillReceiveProps和componentWillUpdate生命周期。

getSnapshotBeforeUpdate：在更新props或者state时，在rander渲染完之后在componentDidUpdate之前时运行这个生命周期。作用是返回一个数据，作为componentDidUpdate的第三个参数传入。

可以修改state和props，但是很危险的操作，都是重新运行一遍生命周期。

更新state或者props时，在render和componentDidUpdate之间加了这个生命周期。

componentDidCatch：抓捕错误的生命周期
前后端怎样调接口的
通过向后端接口路径发送请求，建立http连接后，再由后端对我需要的数据或内容进行操作处理后返回给前端，这就是一个接口的调用。
前后端怎样实现数据交互的
Ajax的promise二次封装
前端请求参数的形式
GET和POST两种方式
GET从指定的服务器中获取数据，POST提交数据给指定的服务器处理

前后端跨域问题

关于网络协议

http和https的区别
1、https协议需要到CA申请证书，一般免费证书较少，因而需要一定费用。(原来网易官网是http，而网易邮箱是https。)
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的。Https协议是由SSL+Http协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)
网络的七层协议
7应用层
6表示层
5会话层
4传输层
3网络层
2数据链路层
1物理层
http在哪一层请求
应用层

关于优化

减少页面加载时间方法
css、javascript改由外部调用
尽可能减少DCOM元素
Ajax调用尽量采用GET方法调用

关于其他

websocket了解
大数据技术
了解哪些新技术
前后端跨域问题