css

CSS

问题一：CSS盒子模型，CSS绝对定位和相对定位？

答案：1、盒子模型是由margin、padding、border、content组成的一个div盒子，所有的html元素都可以当作一个盒子模型来处理；
2、相对定位是不脱离文档流的定位方式，设置偏移量相相对于自身的位置；
3、绝对定位是脱离文档流的定位，设置偏移量相对于已被定位（绝对&相对）的最近父级元素（如果没有被定位的父元素就是最外层的html）。

问题二：什么时候需要清除浮动，清除浮动有哪些方法？

答案：当父元素因为子元素的浮动出现高度为0的问题需要清除浮动。清除浮动可以：
1、在浮动元素后新增一个div元素设置样式clear:both；
2、父元素设置overflow:hidden；
3、父元素使用after伪元素；
.clearfix: after{
content: “”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom: 1; /ie6-7不支持伪元素：after，使用zoom:1触发hasLayout/
}

4、父元素使用before和after双伪元素。
.clearfix:after,.clearfix:before{
content: “”;
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}

问题三：如何保证一个div水平垂直居中？

答案：1、利用绝对定位和transform
.centerDiv{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
2、利用flexbox布局
.parent{
display: flex;
align-item: center;
justify-content: center;
}

问题四：px、em、rem的区别；CSS中link和@import的区别？

答案：1、px是像素，相对长度单位，相对于显示器屏幕分辨率，不能适应浏览器的变化而缩放；em是相对尺寸，相对于当前对象内文本的尺寸；rem也是相对尺寸，相对于最外层父元素的尺寸。
2、link是Html标签，进入页面就会加载，无兼容性，可以通过js动态改变；@import属于css只有页面加载完才加载，兼容IE5+；link的权重高于@import。

问题五：简述position和display？

答案：1、position: static、absolute、relative、fixed、inherit(z-index只针对定位属性有效)。
2、display: none、inline、inline-block、block、flex

问题六：canvas和svg的区别？

答案：canvas输出的是一幅标量画布，放大会失真或者锯齿；svg绘制的每一个图形都是独立的DOM节点，矢量图形，能够绑定事件或者用来修改，可以任意修改大小。

Javascript

问题一：简述数据类型？

答案：JavaScript分为基本数据类型和引用数据类型。基本数据类型的值是按值访问的，保存在栈内存中，包括：number、boolean、string、null、undefined，判断类型用indexof；引用数据类型的值是按引用访问的，保存在堆内存中，包括object、array、date、regexp、function，判断类型用instanceof。

问题二：prototype、原型链的理解？

答案：1、prototype是JavaScript的一个属性，指原型对象，集中存储一类对象的共有成员的父对象称为原型对象；
2、原型链（prototype chain）指由各级父元素连续继承形成的链式结构。

问题三：什么是this，apply()和call()的区别？

答案：1、this指当前函数的运行环境，可用于调用函数、事件监听等，apply()和call()可以改变this的指向；
2、apply()：B.apply(A, arguments)指A对象调用B的方法，最多两个参数，新this对象和数组;
3、call()：B.call(A, arg1, arg2)指A对象调用B的方法，可接收多个参数。

问题四：简述数组和对象的方法？

答案：数组方法：1、判断是否为数组：instanceof、isArray()；
2、转换为字符串：toLocaleString()、toString()、valueOf()、join()；
3、栈方法(LIFO)：push()、pop()；
4、队列方法(FIFO)：shift()、unshift()；
5、重排序方法：reverse()、sort()；
6、操作方法：concat()、slice()、splice();
7、位置方法：indexof()、lastIndexof()；
8、迭代方法：every()、fifter()、forEach()、map()、some()；
9、归并方法：reduce()、reduceRight()。
对象方法：valueOf()、toString()、toLocaleString()、hasOwnProperty()、isPrototypeOf()

问题五：ES6箭头函数和ES5普通函数的区别？

答案：箭头函数：()=>{}，this指向固定，不可以改变
普通函数：function name(){}，this指向可改变（4种情况：window、被调用的对象、call或者apply指定的对象、new创建）

问题六：如何避免全局变量的污染？

答案：1、仅用一个全局变量，把其他变量包含；2、使用自执行函数。

代码实现

问题一：用js写一个防抖函数

答案：
function debounce(fn, delay) {
let timeout;
return function() {
let context = this // 保存this和参数
let args = arguments
if(timeout) {
clearTimeout(timeout) //频繁触发则清除上一次，只执行最后一次
}
timeout = setTimeout(() => {
fn.apply(context, args)
},delay)
}
}
// 这是需要防抖的事件
function fn(num){
console.log(num)
}
debounce(fn, 1000)(2) // 调用函数

问题二：用js写一个节流函数

答案：
function throttle(fn, threshhold) {
let timeout = null
let start = new Date()
return function() {
let context = this
let args = arguments
clearTimeout(timeout)
let curruent = new Date()
if(curruent - start >= threshhold) {
fn.apply(context, args)
start = curruent
} else {
timeout = setTimeout(() => {
fn.apply(context, args)
}, threshhold)
}
}
}
//测试，结果为每 5s 输出一个3，而不是 0.5s
let test = throttle((num) => {
console.log(num)
}, 5000)
setInterval(() => {
test(3)
}, 500)

问题三：用canvas绘制一个圆形

答案：

浏览器不支持

问题四：找到字符串中所有的’abc’

答案：
var str = ‘abbaabcbccbabcba’;
var arr = new Array();
var res = str.indexof(‘abc’);
while(res > -1){
arr.push(res);
res = str.indexof(‘abc’,res+1)
}

网络基础

问题一：cookies、sessionStorage和localStorage的区别

答案：1、都存储在客户端，但存储数据时，cookies存储数据大小不能超过4k，sessionStorage和localStorage存储数据大小在5M甚至更大；
2、localStorage存储数据的时间最久，除非手动删除数据；sessionStorage存储数据会在关闭浏览器后自动删除；cookies存储数据会设置存储时间，存储时间内一直有效；
3、cookies存储的数据会自动传到服务器，服务器也可以写cookies到客户端；sessionStorage和localStorage只会存储在本地，不会发送给服务器。

问题二：http状态码

答案： 分为五个大类别
1** 信息，服务器收到请求，需要请求者继续执行操作；
2** 成功，操作被成功接收并处理；
3** 重定向，需要进一步操作以完成请求；
4** 客户端错误，请求包含语法错误或无法完成请求；
5** 服务端错误，服务器在请求过程中发生了错误。