前端常见面试题总结

一、如何理解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')
请描述event loop(事件循环 / 事件轮训)的机制

promise进阶

promise有哪三种状态?如何变化?

async/await

宏任务和微任务

什么是宏任务和微任务,两者有什么区别
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页