前端常见面试题总结
一、如何理解HTML语义化？
<!--非语义化写法-->
<div>标题</div>
<div>
<div>一段文字</div>
<div>
<div>列表1</div>
<div>列表2</div>
<div>
</div>
<!--语义化写法-->
<h1>标题</h1>
<div>
<p>一段文字</p>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
</div>
让人更容易读懂、让搜索引擎更容易读懂（避免找不到重点）
二、默认情况下，那些HTML元素是块标签
块状元素（独占一行）：display:block/table 有div h1 h2 table ul ol p 等
内联元素：display：inline/inline-block；有spam img input button等
三、CSS问题
1）布局
盒模型的宽度如何计算
offsetWidth = (内容宽度+内边距+加边框)，无外边距
margin纵向重叠问题
相邻元素的margin-top和margin-bottom会发生重叠
空白内容的p标签也会重叠
magrin负值的问题
margin-top和margin-left负值，元素向上、向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移，自身不受影响
BFC的理解和应用
形成BFC的常见条件：
1、float不是none
2、position是absolute或fixed
3、overflow不是visible
4、display是flex或者inline-block
可以用来清除浮动
float布局的问题，以及clearfix
如何实现圣杯布局和双飞翼布局:
三栏布局，中间一栏最先加载渲染（内容最终要）
两侧内容固定，中间内容自适应（一般用于pc网页）
技术总结：1.使用float布局 2.两侧使用margin负值，以便和中间内容横向重叠 3.防止中间内容被两侧覆盖，一个用margin（双飞翼）一个用padding（圣杯）
手写clearfix
flex画色子
常用的语法：flex-direction flex-wrap justify-content align-self align-items
/* flex画三个点的色子 */
.box{
display:flex;/*flex布局*/
justify-content:space-between;/*两端对齐*/
}
.item{
/*背景色，大小，边框*/
}
.item:nth-child(2){
align-self:center; /*第二项居中对齐*/
}
.item:nth-child(3){
align-self:flex-end/*第三项尾对齐*/
}
2） 定位
absolute和relative分别依据什么定位
relative依据自身定位
absolute依据最近一层的定位元素定位
定位元素：relative、absolute、fixed
居中对齐有哪些实现方式
水平居中
inline元素：text-align:center
block元素：margin：auto
absolute元素：left：50%+margin-left负值
垂直居中
inline元素：line-height的值等于height值
absolute元素：top：50%+margin-top负值
absolute元素：transform(-50%,-50%)
absolute元素: top,left,bottom,right = 0+margin:auto
3） 图文样式
line-height的继承问题
写具体数值，如30px,则直接继承这个值
写比例，如2/15，则继承比例
写百分比，如200%，继承计算出来的值（考点）
4） 响应式
rem是什么
px绝对长度单位最常用
em相对长度单位，相对于父元素不常用
rem相对长度单位，相对于根元素，常用于响应式布局
如何实现响应式
media-query，根据不同的屏幕宽度设置根元素font-size
rem，基于根元素的相对单位
rem的不足：具有阶梯性
vw,wh
window.screen.height //屏幕高度
window.innerHeight //网页视口高度
document.body.clientHeight //body高度
5） CSS3
关于CSS3动画
四、变量类型和计算
1）typeof能判断哪些类型
识别所有值类型
识别函数
判断是否是引用类型（不可在细分）
2）何时使用 === 何时使用 ==
truly变量 ： !!a === true的变量
falsely变量： !!a ===false的变量
// falsely变量
!!0 === false
!!NaN === false
!!'' === false
!!null === fasle
!!undefined === false
!!false === false
//除了 == null 之外，其他都一律用 === ，
// ==
100 == '100' //true
0 == '' //true
0 == false //true
false == '' //true
null == undefined //true
//除了 == null 之外，其他都一律用 ===
const obj = {x:100}
if(obj.a = null){}
//相当于：
//if(obj.a === null || obj.a === undefined){}
3) 值类型和引用类型的区别
//应用类型
let a = { age:20 }
let b = a
b.age = 21
console.log(a.age) //21
//常见的引用类型
const obj = {x:100}
const arr = ['a','b','c']
//特殊引用类型，但不用于存储数据，所以没有‘拷贝，复制’这一说
function fn(){}
//值类型(不会相互干扰)
let a = 100
let b = a
a = 200
console.log(b) //100
//常见的值类型
let a //undegined
const s = 'abc' //string
const n = 100 //number
const b = true //Boolean
const s = Symbol('s')
4）手写深拷贝
const obj = {
age : 10,
name: 'xxx',
address:{
city:'beijing'
},
arr:['a','b','c']
}
const obj2 = obj1
boj2.address.city = 'shanghai'
console.log(obj1.address.city)
function deepClone(obj = {}){
if(typeof obj !== 'object' || obj = null){
//obj 是null，或者不是对象和数组，直接返回
return obj
}
let result
if(obj instanceof Array){
result = []
}else{
for(let key in obj){
//保证key不是原型的属性
if(obj.hasOwnProperty(key)){
//递归调用
result[key] = deepClone(obj[key])
}
}
}
//返回结果
return result
}
五、原型和原型链
每个class都有显示原型prototype
每个实例都有隐式原型_proto_
实例的_proto_指向对应class的prototype
1）如何准确判断一个变量是不是数组
类型判断instanceof
qlv instanceof Student //true
qlv instanceof People //true
qlv instanceof Object //true
[] instanceof Array //true
[] instanceof Object //true
{} instanceof Object //true
2） 手写一个简易的JQuery,考虑插件的可扩展性
3）class的原型本质，怎么理解？
class和继承
class Student {
constructor(name,number){
this.name = name
this.number = number
}
sayHi(){
console.log(`姓名${this.name},学号${this.number})`
}
}
//通过类new对象/实例
const xialuo = new Student('夏洛',100)
console.log(xialuo.name)
console.log(xialuo.number）
继承
//父类
class People{
constructor(name){
this.name = name
}
eat(){
console.log(`${this.name}` eat something)
}
}
//子类
class Student extends People{
constructor(name,number){
super(name)
this.number = number
}
sayHi(){
console.log(`姓名${this.name},学号${this.number})`
}
}
六、作用域和闭包
1.作用域和自由变量 2.闭包 3.this
自由变量：1.一个变量在当前作用域没有定义，但被使用了 2.向上级作用域，一层一层依次寻找，直至找到为止 3.如果全局作用域没有找到。则报 xx is not defined 所有的自由变量的查找，是在函数定义的地方，向上级作用域查找，不是在执行的地方
闭包
作用域应用的特殊情况，有两种表现：
1）函数作为参数被传递
2）函数作为返回值被返回
//函数作为返回值
function create(){
let a = 100
return function (){
console.log(a)
}
}
let fn = create()
let a = 200
fn()
//函数作为参数
function print (fn){
let a = 200
fn()
}
let a = 100
function fn () {
console.log(a)
}
print(fn)
1）this的不同应用场景，如何取值？
当做普通函数返回的时候指向的是window
通过call apply bind 传入什么调用什么
作为对象方法指向本身
在class的方法中调用 当前实例本身
箭头函数里面的this取值取得是当前对象的值（上级作用域）
2）手写bind函数
function.[rototype.bind1 = function(){
//将参数解析为数组
const args = Array.prototype.slice.call(arguments)
//获取this（取出数组第一项，数组剩余的就是传递的参数）
const t = args.shift()
const self = ths //当前函数
//返回一个函数
return function () {
//执行原函数，并返回结果
returnself.apply(t，args)
}
}
3）实际开发中闭包的应用场景，举例说明
1)闭包隐藏数据，只提供API
function createCache(){
const data = {} //闭包中的数据，被隐藏，不被外界访问
return{
set : funciton(key,val){
data[key]
},
get:function(key){
return data[key]
}
}
}
七、异步和单线程
1.js是单线程语言，只能同时做一件事 2.浏览器nodejs已支持j启动进程如web worker 3.JS和DOM渲染共用同一个线程因为JS可以修改DOM结构
1）同步和异步的区别？
基于js是单线程语言
异步不会阻塞代码执行
同步会阻塞代码执行
2）手写promise加载一张图片
const url = ''
function loadImg(src){
return new Promise(
(resolve,reject)=>{
const img = document.createElement('img')
img.onLoad = () =>{
resolve(img)
}
img.onerror = () =>{
reject(new Error('图片加载失败 ${src}'))
}
img.src = src
}
)
}
3）前端使用异步的场景有哪些
网络请求，如ajax图片加载
定时任务，如setTimeout
callBack hell（回调地狱）
//获取第一份数据
$.get(url1,(data1)=>{
console.log(data1)
//获取第二份数据
$.get(url2,(data2)=>{
console.log(data2)
//获取第三份数据
$.get(urls,(data3)=>{
console.log(datas)
//还可以获取更多数据
})
})
})
八、JS异步-进阶
event loop
JS是单线程运行的
异步要基于回调来实现
event loop就是异步回调函数的实现原理
就是如何执行
1） 从前到后，一行一行执行
2）如果某一行执行爆粗，则下面的代码停止执行
3）先把同步代码执行完，在执行异步
console.log('hi')
setTimeout(function cb1() {
console.log('cb1')
},5000)
console.log('bye')