HTML
如何理解HTML语义化
HTML语义化就是使用正确的HTML标签，比如说段落标签使用p标签，文章标签使用article标签，章节标签使用action标签，视频标签使用video标签。
meta viewport是做什么的
viewport表示独立设备，device-width表示独立设备的像素宽度，initial-scale表示页面初始缩放比例，maximum表示页面放大比例，minimum表示页面缩小比例。
你用过哪些HTML5标签
举例：
- article标签
- header标签
- footer标签
- section标签
H5是什么
H5是基于HTML5实现的，通俗地讲，H5是移动端页面，就像一个很大的容器，里面可以放文本、图片、音视频等媒体格式的文件。
CSS
两种盒模型
分别是border-box和content-box。border-box，width和weight表示border以内的宽度。content-box，width和height表示元素content的宽高。
两者不同的是计算最大尺寸是否包含边距，用起来border-box更好一些，用起来更方便。
如何垂直居中
如果.parent的height不写死
.parent{
padding:50vh 0;
}如果.parent的height写死
第一种：table自带功能
//HTML
文字内容
//CSS
.parent{
height: 600px;
}第二种：100%高度的befort、after，加上inline block
//HTML
文字内容
//CSS
.parent{
height: 600px;
}
.child{
display: inline-block;
width: 300px;
vertical-align: middle;
}
.parent .before{
display: inline-block;
height: 100%;
vertical-align: middle;
}
.parent .after{
display: inline-block;
height: 100%;
vertical-align: middle;
}第三种：div装成table
//HTML
一串文字
//CSS
div.table{
display: table;
height: 600px;
}
div.tr{
display: table-row;
}
div.td{
display: table-cell;
vertical-align: middle;
} 第四种：margin-50%
//HTML
一串文字
//CSS
.parent{
height: 600px;
position: relative;
}
.child{
position: absolute;
top: 50%;
}第五种：translate-50%
//HTML
一串文字
//CSS
.parent{
height: 600px;
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}第六种：absolute，margin:auto
//HTML
一串文字
//CSS
.parent{
height: 600px;
position: relative;
}
.child{
position: absolute;
height: 100px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}第七种：flex
//HTML
一串文字
//CSS
.parent{
height: 600px;
display: flex;
align-items: center;
}flex布局怎么用？常用的属性有哪些？
flex用来对页面进行布局。常用的属性有：
- flex-direction——子元素的排列方向
- flex-wrap——控制子元素是否换行
- justify-content——子元素横向对齐方式
- align-items——子元素纵向对齐方式
- order——控制子元素的排列顺序
- flex-grow，flex-shrink——控制子元素的空间
BFC是什么？
BFC的全称是块级格式化上下文。触发条件包括：
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block）
- overflow 值不为 visible 的块元素
- 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
CSS选择器的优先级？
- ！import的优先级最高
- 内联样式>内部样式>外部样式
- 优先级相同，写到后面的覆盖前面的
如何清除浮动
//把.clearfix加到父元素上
.clearfix:after{
content: '';
display: block; /*或者 table*/
clear: both;
}
.clearfix{
zoom: 1; /* IE 兼容*/
}原生JS
ES6语法
- 块级变量有let 、const；
- 箭头函数
- 默认参数值：函数默认值允许在没有值或者undefined被传入时，使用默认形参。
- 剩余参数：允许我们将一个不定数量的参数表示为一个数组。
- 展开运算符：可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。
- 多行字符串
- 字符串插值
- 带标签的模板字面量
- 对象属性定义支持短语法 obj = { x, y }
- 对象属性名支持表达式 obj = {["baz" + quux() ]: 42}
- 对象添加__proto__属性
- 数组匹配 [ b, a ] = [ a, b ]
- 对象匹配 let { a, b, c } = objABC
- 参数匹配 function g ({ name: n, val: v }) {}
- import导入
- export导出
- export default默认导出
手写函数防抖和函数节流
函数节流：理解成冷却时间
//放技能
function fn(){}
let cd=false
button.onclick=function(){
if(cd){
//not to do
}else{
fn()
cd=true
let timerId=setTimeout(()=>{
cd=false
},3000)
}
}函数防抖
//一个外卖小哥等到一单外卖，再等五分钟，如果没有单子，就去送。如果有单子，接单之后，再等五分钟。
let timerId=null
button.click=function(){
if(timerId){
window.clearTimeout(timerId)
}
timerId=setTimeout(()=>{
fn()
timerId=null
},5000)
}手写AJAX
完整版
var request = new XMLHttpRequest()
request.open('GET', '/xxx');
request.onreadystatechange = function () {
if(request.readyState === 4 ) {
console.log('请求完成')
if(request.response.status>=200){
console.log('请求成功')
}
}};
request.send();简化版
var request = new XMLHttpRequest()
request.open('GET', '/xxx')
request.onload = ()=> console.log('请求成功')
request.send()如何实现深拷贝？
关键点：
- 递归
- 判断类型
- 检查循环引用
- 需要忽略原型（__proto__）
如何用正则实现trim()？
String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g, '')
}
//或者
function trim(string){
return string.replace(/^\s+|\s+$/g, '')
}不用class如何实现继承？用class如何实现继承？
不用class实现继承
function Animial(){
this.a=1
}
Animial.prototype.move=function(){}
//Dog继承Animial的类
function Dog(){
//考察点一，在Dog函数调用Animial函数，同时把所有参数传过去
Animial.apply(this,argument)
this.d=2
}
//下面三句话是考察点二，让Dog的原型继承Animial的原型
let f=function(){}
f.prototype=Animial.prototype
Dog.prototype=new f()
//考察点三
Dog.prototype.constructor=Dog
Dog.say=function(){}用class实现继承
class Animal{
constructor(color){
this.color = color
}
move(){}
}
class Dog extends Animal{
constructor(color, name){
super(color)
this.name = name
}
say(){}
}如何实现数组去重
第一种：哈希
//数组去重
function arrSame(arrSame){
var hash = {};
var result = [];
for(var i = 0, len = arrSame.length;i < len; i++){
if(!hash[arrSame[i]]){
result.push(arrSame[i]);
hash[arrSame[i]] = true;
}
}
return result;
}测试一下：
//数组去重
function arrSame(arrSame){
var hash = {};
var result = [];
for(var i = 0, len = arrSame.length;i < len; i++){
if(!hash[arrSame[i]]){
result.push(arrSame[i]);
hash[arrSame[i]] = true;
}
}
return result;
}
var array1=[1,1,2,3,4,5,5];
var result1=arrSame(array1);
console.log(result1)控制台打印：
[1,2,3,4,5]
第二种：Set[...new Set(array)]