web前端面试题

web前端面试题(●’◡’●)

**
一如前端深似海,回头无岸 .

1.盒模型 box-model margin-border-padding-content width:height都为content的值 设计边框大小时需要减去content的值

怪异盒模型 width：height（content+boder+padding) 设计边框大小不需要减去content的值

vue 双向绑定原理 object.defineProperty 观察者监听数据发生变化就返回给订阅者给

H5新增属性 canvas audio video output embed article aside footer header meter section datalist

css3 新增属性

伪元素和伪类元素之间的区别

同：都是给选择器添加不同的效果

区别：

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

箭头向左的三角形
span{
display:block;
width:0;
height:0;
border:10px solid transparent;
border-right-color:red;
}

css定位

1.静态定位
2.绝对定位
3.相对定位
4.固定定位（fixed）固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。

一、高度塌陷：清除浮动：

1.额外标签法：

2.老司机法：
overflow:hidden;
3.after伪元素法：
.clearafix:fter{
contant:"";
display:block;
height:0;
visibility:hidden;
clear:both;
}
4.双伪元素法：
.clearfix:before,.clearfix:after{
contant:"";
display:block;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}

二、元素居中（水平，垂直）：

1.水平/垂直：
align=“center”
valign=“middle”
2.转换单元格法：
display:table-cell;
vertical-align:middle;
3.定位法：
a.
margin:0 auto;
b.
top:50%;
left:50%;
margin-top:-自身高度一半;
margin-left:-自身宽度一半;
c.
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
4.弹性盒法：
display:flex;
justify-contant:center;
align-items:center;

localStroage,sessionStroage,cookie区别

Cookie

（1） cookie的存储是限制大小，约4k左右，不适合存储业务数据，尤其是数据量较大的值；
（2） cookie会每次随http请求一起发送，浪费宽带。
（但也有场景可能需要到（2）这个特性：比如在项目中你可能需要访问很多接口，而且为了保证安全，你需要传一个标识让你的后端知道这次访问是你发出的，而不是别人的网站发出的，防止非本项目的人随意调接口，你可以在cookie中保存一个标识，项目每次发http请求都会将标识传到后台认证）

localstroage：

（1） 存储数据量大；
（2） 不会随http请求一起发送；
（3） 在浏览器的隐私模式下不能读取；
（4） 不能被爬虫读取

localStorage与sessionStroage区别

（1）localStroage是将信息存储在硬件设备中的，关闭浏览器或网页也不会消失；
（2）sessionStroage的有效期只是网页在浏览器打开到关闭的时间段
（3）sessionStroage不能在不同的浏览器窗口共享，即使是同一个页面；localStroage在所有的同源窗口中都是共享的；cookie也是在所有的同源窗口中共享的；

深拷贝（数组：for+copy,splice,concat,对象：jsonparse,json.stringify，递归）与浅拷贝(object.assign,解构赋值)

检测数据类型 typeof instanceof constrcutor(这个最好，能够区分数组和对象，前面两个认为数组和null都是object)

数据结构 数组 栈 （先进后出）堆 树 队列（先进先出）

原型链

每个对象都可以有一个原型_proto_，这个原型还可以有它自己的原型，以此类推，形成一个原型链。查找特定属性的时候，我们先去这个对象里去找，如果没有的话就去它的原型对象里面去，如果还是没有的话再去向原型对象的原型对象里去寻找… 这个操作被委托在整个原型链上，这个就是我们说的原型链了。
proto:

__proto__ 是原型链查询中实际用到的，它总是指向 prototype，换句话说就是指向构造函数的原型对象，它是对象独有的。注意，为什么Foo构造也有这个属性呢，因为再js的宇宙里万物皆对象，包括函数；

结论：

    1、__proto__ 是原型链查询中实际用到的，它总是指向 prototype；

    2、prototype 是函数所独有的，在定义构造函数时自动创建，它总是被 __proto__ 所指。

所有对象都有__proto__属性，函数这个特殊对象除了具有__proto__属性，还有特有的原型属性prototype。prototype对象默认有两个属性，constructor属性和__proto__属性。prototype属性可以给函数和对象添加可共享（继承）的方法、属性，而__proto__是查找某函数或对象的原型链方式。constructor，这个属性包含了一个指针，指回原构造函数。

闭包

有权访问另一个函数作用域变量的函数 作用：保护变量 能够在外部访问，却不能修改变量 用全局变成局部

递归 函数自己调用自己，会有终止条件，不会陷入死循环

http协议

微任务，宏任务 js是单线程语言，从上往下执行，就不好，需要异步，宏任务相当于银行排队办理业务，上一个没有完，下一个无法执行，微任务就相当于promise,在宏任务里面添加其他的任务，只有这些任务完成，才会往下一个宏任务走

三次握手，四次挥手

数组

(concat()连接两个或更多的数组，并返回结果。
join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()删除并返回数组的最后一个元素
push()向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()颠倒数组中元素的顺序。
shift()删除并返回数组的第一个元素
slice()从某个已有的数组返回选定的元素
sort()对数组的元素进行排序
splice()删除元素，并向数组添加新元素。
toString()把数组转换为字符串，并返回结果。
toLocaleString()把数组转换为本地数组，并返回结果。
unshift()向数组的开头添加一个或更多元素，并返回新的长度。

字符串方法

charAT（index） 通过索引找字符
charCodeAt（index） 通过索引找到字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。

方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。

indexOf（） 从前往后找，找到返回内容的索引，找不到返回-1；

lastIndexOf（） 从后往前找，找到返回内容的索引，找不到返回-1；

slice（n，m） 从索引n 查找到索引m 但不包括m，slice可以取负值

substring（n，m） 从索引n 查找到索引m ，但不包括m， 不可以取负值

substr（n，m） 从索引n开始截取m 个

split（切割形式） 把一个字符串分割成字符串数组。

toUpperCase（） 转大写字母

toLowerCase（） 转小写字母

3.Math对象

Math.floor（） 向下取整

Math.ceil（） 向上取整

Math.random（） 取0-1之间的随机小数

Math.round（） 四舍五入

Math.abs（） 取绝对值

Math.pow（x，y） x的y次幂
Math.sqrt（） 开平方

Math.max（） 取最大值

Math.min（） 取最小值

4.Date日期对象

new Date（） 创建一个日期对象

getFullYear（） 返回年份

getMonth（） 返回月份数（0-11），想要得到几月，需要加一

getDay（） 返回一周的第几天（0-6），想要得到星期几，需要加一

getDate（） 返回日

getHours（） 返回时

getMinutes（） 返回分

getSeconds（） 返回秒

getTime（） 返回从1970年1月1日00：00到现在的毫秒数（格林尼治时间），也就是时间戳

setYear(yearInt) 设置年份.2位数或4位数

setFullYear(yearInt) 设置年份.4位数

setMonth(monthInt) 设置月份(0-11)

setDate(dateInt) 设置日(1-31)

setHours(hourInt) 设置小时数(0-23)

setMinutes(minInt) 设置分钟数(0-59)

setSeconds(secInt) 设置秒数(0-59)

setMilliseconds(milliInt) 设置毫秒(0-999)

事件委托 利用事件冒泡，只需要指定一个事件处理程序，就可以处理同一个事件。而且每个函数都是一个对象，对象存储在堆里面，对象越多，性能越差

阻止默认行为 e.preventDefault

造成内存泄漏 闭包，拷贝，意外的全局变量，没有清楚的DOM元素

改变this指向

call apply bind 总结
相同点： 都可以改变函数内部的this指向
不同点 ：
1.call和apply会调用函数,并且改变函数内部this的指向
2.call和apply传递的参数不一样,call传递参数a,2,3…形式 , apply必须数组形式
3.bind 不会调用函数,可以改变函数内部this指向
主要应用场景
1.call经常做继承
2.apply经常跟数组有关系,比如借助于数学对象实现数组最大值最小值
3.bind不调用函数,但是还想改变this指向,比如改变定时器内部的this指向
vue 传参

路由传参

查询参数：path？key=val&key=val 获取 this.$route.query

动态路径 ：path:参数内容（值） 获取 this.$route.params

组件传参

父传子 props：[属性] 有驼峰命名法时用-隔开 比如 user-name

子到父

1.父组件定义一个函数，接受子组件传来的值 this.$event接受传来的值

2.将方法以自定义事件传给子组件

3.子组件触发调用这个方法 this.$emit(“事件名”，“值”)

任意组件

1.创建中央事件总线bus （window.bus=new Vue()）

2.发送消息的组件 bus.$emit(“type”,内容)

3.接消息的组件 bus.$on(“type”,回调函数)

cookie设置有效路径

http请求头

webpack

请求拦截

箭头函数 没有prototype,所以没有this指向，箭头函数的 this 指向在定义的时候继承自外层第一个普通函数的this，不能直接修改箭头函数的 this 指向，去修改被继承的普通函数的 this 指向，然后箭头函数的 this 指向也会跟着改变，箭头函数外层没有普通函数，严格模式和非严格模式下它的 this 都会指向 window(全局对象)，

vuex

vue全家桶 vuex,router,vue-cli,vue-resource

router route一条路由，routes一组路由，router管理路由

自定义组件 父组件通过props传递数据给子组件,子组件接收，并将父组件方法注入到子组件，子组件通过$emit调用

匿名函数

跨域 jsonp,node.js做中间件代理跨域，cros

什么情况会出现内存泄漏

react

生命周期: 分3 挂载时 更新时 卸载时 api 错误处理

挂载时 :

	1.constructor
	2.render
	3.componentDidMount

##更新:
1. render
2. componentDidUpdate

##卸载
1.componentWillUnmount

#错误处理
1.static getDerivedStateFromError
2.componentDidCatch

react中key的正确使用方式

key 可以在DOM中的某些元素被增加删的时候帮助react识别那些元素发生了变化因此你应当给数组中的每一个元素赋予一个确定的标识。
react利用key来识别组件，它是一种身份标识标识
index item 不要用index作为组件的key