前端基础面试题
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了前端基础面试题，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5554字，纯文字阅读大概需要8分钟。
内容图文
一.HTML和CSS
1.每个HTML文件开头都有很重要的东西，Doctype，是干什么的？
此标签是用来告诉浏览器用哪一种（HTML或XHTML）格式来解析页面
2.src和href的区别
src是source的缩写，指向是外部的资源，指向的内容会在当前文档的标签下载并加载出来（当浏览器解析当前资源时，会暂停其他资源的加载，知道该资源加载，编译，执行完毕为止）
href是hypertext reference，指向当前网络资源所在位置，建立当前元素或文档链接之间的链接
3.px、em、rem和vh/vw区别
px：相对于显示器屏幕分辨率而言，em：相对于font-size而言， rem：相对于根元素而言（HTML）vw/vh：视窗的高度而言（宽用百分比，高用vh更合适）
4.sass和less
css的预处理器，特殊的语法/语言编译的css
例如less：动态样式语言，赋予css动态语言的特性（变量，继承，运算，函数）既可以在客户端运行也可以在服务端运行（借助node.js）
5.display：none和visibility:hidden的区别
dispaly:隐藏该元素不挤占该元素的空间 visibility:隐藏对应元素，但是挤占该元素的空间
6.css中link和@import的区别
link：属于HTML标签，页面加载时。link会被同时加载 @import是css中提供的，会在页面加载完成后再加载@import引用的css，link因为是HTML标签，不存在浏览器兼容性问题，link的权重大于@import引用
7.cookies，sessionStorage和localStorage的区别
cookies：保存在浏览器，存储大小只有几KB，默认浏览器关闭则失效，可以自己设置失效时间（安全性差）
sessionStorage：这些数据只会在同一个回话页面才能访问，且这个回话结束后，这些数据就会被销毁，所以不是一种持久化的本地存储（保存在客户端，大小5MB，存储字符串类型）
localStorage:是一种持久化的本地存储，除非主动删除，否则数据是永远不会过期的（保存在客户端，大小5MB，存储字符串类型）
8.let、var 和 const的区别
1.var声明可以挂载在window上
2.var声明变量存在变量声明和暂存性死亡（在变量声明前访问变量，则报undefined）
3.let和const声明变量形成块级作用域
4.统一作用域let和const不可重复声明同名变量
5.const定义常量必须初始化，一旦被赋值则不可再次改变
9.如何清除浮动
1.在父级元素添加overflow：hidden
2.在浮动元素的最后添加一个块级元素，并添加clear:both
3.在父级元素添加伪类after
父级类名::after{
content: '';
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}4.使用双伪类元素
.类名:after,
.类名:before {
content: "";
display: block;
clear: both;
}10.如何垂直水平居中
1.使用flex布局
.class{
display:flex;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center;
}2.在容器内使用相对定位和绝对定位
.Center-Container {
position: relative;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}3.display:table-cell
.box {
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
}
二.JavaScript
1.防抖（debounce）和节流（throttling）
防抖：当事件被触发，设定一个周期延迟执行动作，若期间被触发则重新设定周期，直到周期结束，执行动作
节流：固定周期内，只执行一次动作，若新事件触发，不执行，周期结束后，又有事件触发，开始新的周期
2.深拷贝和浅拷贝
浅拷贝：只复制指向某个对象的指针，而不是复制对象本身，新旧对象还是共享同一个内存
深拷贝：另外创造了一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改变原对象
-----赋值和浅拷贝的区别
赋值：只是把对象在栈中的地址给了新变量，而不是堆中的数据，连个对象指向的是同一个存储空间
浅拷贝：是按位拷贝对象，会创建一个新对象，这个对象有原始对象属性值的一份精确拷贝，如果属性是基本类型，拷贝的是基本类型的值，如果属性是引用类型（内存地址），拷贝的是内存地址。如果一个对象改变了地址，则就会影响到另一个对象
浅拷贝的实现方式：
1.object.assign()
var obj = {a:{a:"kobe",b:24}}
var initalObj = Object.assign({},obj)
initalObj.a.a="bryant"
console.log(obj.a.a)//bryant
//注意 当object只有一层的时候是深拷贝
let obj = {username:'kobe'}
let obj2 = Object.assign({},obj)
obj2.username = 'bryant'
console.log(obj)//{username:'kobe'}2.Array.prototype.concat()
let arr = [1,3,{username:'kobe'}]
let array = arr.concat()
array[2].username = 'bryant'
console.log(array) // [1,3,{username:'bryant'}]3.Array,prototype.slice()
let arr = [1,3,{username:'kobe'}]
let array = arr.slice()
array[2].username = 'bryant'
console.log(array) // [1,3,{username:'bryant'}]深拷贝实现方式：
1.JSON.parse(JSON.stringify())
let arr = [1,3{username:'kobe'}]
let A = JSON.parse(JSON.stringify(arr))
A[2].username = 'lalisa'
console.log(arr,A)//[1,3,{username:'kobe'}] [1,3，{username:'lalisa'}]2.递归方法实现深度克隆原理
3.三种强制类型转换，两种隐式类型转换
强制转换：parseInt() , parseFloat(), Number()
隐式转换：1=='1' null == undefinded
4.join()和split()的区别
join（）将数组转换成字符串形式 split（）切割成数组的形式
5.数组的方法
pop() 尾部删除 push()尾部添加 unshift() 头部添加 shift()头部删除
6.this---当前对象的引用
方法中：this指向调用它所在方法所属的对象
单独使用：指向全局对象 var x = this
对象函数中绑定：指的是对象，对象是函数的所有者
函数中：this表示全局对象，严格模式下是未定义的
apply 和 call就是函数对象的方法，他们允许切换函数执行的上下文环境，即this绑定的对象
7.闭包
指的是内层作用域可以访问到外层作用域的变量（定义一个函数即是开辟了一个局部作用域）
8.箭头函数
箭头函数：相当于匿名函数，简化了函数定义有两种格式，一种是包含表达式，一种包含多条语句
基本用法：
var f = v => v;
//等价于
var f = function(a){
return a;
}
f(1); //1当没有参数或者多个参数用（）
var f = (a,b) => a+b;
f(6,2); //8当有多行语句，用{}
var f = (a,b) => {
let result = a+b;
return result;
}
f(6,2); // 81.箭头函数本身不创建this，但是声明时可以捕获其上下文的this供自己使
用，普通函数this指向调用它的对象
var webName="捕获成功";
let func=()=>{
console.log(this.webName);
}
func();2.箭头函数没有arguments对象，且不能作为构造函数，不能被new，没有property
9.promise
作用：解决回调地狱问题，处理异步请求
用法：链式调用，成功和失败的回调，三个状态。pending状态改变时触发。状态一旦改变就不会在变
内容总结
以上是互联网集市为您收集整理的前端基础面试题全部内容，希望文章能够帮你解决前端基础面试题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。