前端面试题整理

前端面试题整理部分

h5和css部分

1.清除浮动的方式：

​ （1）父级div定义height。

（2）结尾处加空div标签clear:both。

（3）父级div定义伪类:after和zoom。

（4）父级div定义overflow:hidden。

（5）父级div定义overflow:auto。

（6）父级div也浮动，需要定义宽度。

（7）父级div定义display:table。

（8）结尾处加br标签clear:both。

2.行内元素和块级元素有哪些：

行内元素：a b br i span input select strong

块级元素：div p h1—h6 from ul ol li

3.行内元素和块级元素的区别：

行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。

4.BFC 是什么?（Block Formatting Context）

BFC（块级格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。

在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠的问题

BFC 是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

5.CSS3新特性

CSS3实现圆角（border-radius），阴影（box-shadow），

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

增加了更多的CSS选择器 多背景 rgba

在CSS3中唯一引入的伪元素是 ::selection.

媒体查询，多栏布局

border-image

6.浏览器标准模式和怪异模式之间的区别是什么？

1）在严格模式中 ：width是内容宽度 ，元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;

在怪癖模式中 ：width则是元素的实际宽度 ，内容宽度 = width - ( padding-left + padding-right + border-left-width + border-right-width)

2）可以设置行内元素的高宽

在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

3）可设置百分比的高度

在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

4）用margin:0 auto设置水平居中在IE下会失效

使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:

body{text-align:center};#content{text-align:left}

5）quirk模式下设置图片的padding会失效

6）quirk模式下Table中的字体属性不能继承上层的设置

7）quirk模式下white-space:pre会失效

8）盒模型解释不同

7.html5布局的方式：

弹性布局的优点：

1 适应性强，在做不同屏幕分辨率的界面时非常实用

2 可以随意按照宽度、比例划分元素的宽高

3 可以轻松改变元素的显示顺序

4 弹性布局实现快捷，易维护

1.浮动

2.定位

3.分栏布局

4.弹性布局

5.响应式布局

8.rem 和 em的区别？

em相对于父元素，rem相对于根元素

9.渐进增强和优雅降级

渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

javascrip部分

1.JS里的基本引用类型与数据引用类型有哪些，引用类型和基本类型的区别

基本数据类型：number string undefined null boolean
引用数据类型：Object
区别：
1)基本数据类型的变量存储在栈中。
2)引用数据类型的变量存储在堆中 引用类型数据的地址也存在栈中。
3）当访问基础类型变量时，直接从栈中取值。当访问引用类型变量时，先从栈中读取地址，在根据地址到堆中取出数据。

2.null和undefind区别

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
undefined：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
null：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。

3.js中的 == 和===区是什么

三等是数据和类型都相等， == 会尝试进行类型转换

4.Let ，const.var的区别[越详细越好)扩展;它们的存储位置

（1）块级作用域

块作用域由 { }包括，let和const具有块级作用域，var不存在块级作用域。

块级作用域解决了ES5中的两个问题：

内层变量可能覆盖外层变量
用来计数的循环变量泄露为全局变量
（2）变量提升

var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否在会报错。

（3）给全局添加属性

浏览器的全局对对象是window，Node的全局对象是global。var声明的变量为全局变量，同时会将该变量添加为全局对象的属性，但是let和const就不会。

（4）重复声明

var声明变量时，可以重复声明变量，const和let不能重复声明。

（5）暂时性死区

在代码块内，使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。

（6）初始值设置

在变量声明时，var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。

（7）指针指向

let和const都是ES6新增的用于创建变量的语法。 let创建的变量是可以更改指针指向（可以重新赋值）。但const声明的变量是不允许改变指针的指向。

5.const变量，说绑定一个函数或者数组，那他可以变吗？为什么什么原理，const 定义一个数组，改变下标0的值，会报错吗

不可以，因为const修饰的变量是只读的

改变下标的值不会报错，因为存储数据的 地址 没变

6.for循环里let换成var会发生什么

①for 循环定义的迭代变量会渗透到循环体外部,因为let是块级作用域，外部访问不到

②let在循环里会暂存变量，每次循环向外输出的是当前的迭代变量，换成var每次循环向外输出的都是循环结束的结果

7.this的指向，箭头函数的this

this的四种场景（不同的场景代表不同的意思）
1）、当this所在函数是事件处理函数时，this代表事件源
2）、当this所在函数是构造函数时，this代表new出来的对象
3）、当this所在函数时类的方法时，this代表调用方法的对象。
4）、当this所在函数没有所属对象，this代表window对象。

8.call, apply,bind的区别[说一说基本原理

相同点：三个函数都会改变this的指向（调用这三个函数的函数内部的this）
不同点：
1)、bind会产生新的函数，（把对象和函数绑定死后，产生新的函数）
2)、call和apply不会产生新的函数，只是在调用时，绑定一下而已。
3)、call和apply的区别，第一个参数都是要绑定的this，apply第二个参数是数组（是函数的所有参数），call把apply的第二个参数单列出来。
箭头函数根本没有自己的this，导致内部的this就是外层代码块的this

9.普通函数和箭头函数的区别

1）外形不同：箭头函数使用箭头定义，普通函数中没有。

2）箭头函数全部是匿名函数，普通函数可以使匿名函数也可以是具名函数。

3）箭头函数不能用于构造函数，普通函数可以用于构造函数，以此创建对象实例。

4）箭头函数中this指向不同，在普通函数中，this总指向调用它的对象，如果做构造函数，它指向创建的对象实例。

5）箭头函数不具有arguments对象，每一个普通函数调用后都有一个arguments对象，用来存储实际传递的参数。但是箭头函数并没有此对象。

6)其他区别：箭头函数不具有prototype原型对象。箭头函数不具有super。箭头函数不具有new.target。

10.箭头函数的作用（跟普通函数的区别） 简要描述下ES6中的箭头函数以及其使用场景

①.箭头函数使表达更加简洁

②.最主要的目的就是解决this指针的问题

使用场景：

1.简单的函数表达式，内部没有this引用，没有递归，事件绑定，解绑定

2.内层函数表达式，需要调用this，且this应与外层函数一致时（保证指向vue实例）

11.原型和原型链

1）原型：任何对象都有一个原型对象，这个原型对象由对象的内置属性_proto_指向它的构造函数的prototyoe指向的对象，即任何对象都是由一个构造函数创建的，被创建的对象都可以获得构造函数的prototype属性，这个构造函数就是原型

2）原型链：当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

12.作用域和作用域链

1）作用域，就是变量起作用的区域。或者说，js代码执行时，查找变量的范围。
2）作用域链：简单说就是作用域集合 当前作用域 -> 父级作用域 -> … -> 全局作用域 形成的作用域链条
当js编译器在寻找变量时，现在最近的作用域里面找（花括号{}）里面找，如果找不到，去他的父级（上一级）作用域（花括号）里面找。以此类推，直到找到或找不到为止。着我们称为作用域链

13.Ajax的步骤与封装Ajax中的200和4分恩别是什么意思

ajax的流程，readyState和status的意思

1、创建XMLHttpRequest

let xhr = new XMLHttpRequest()

2、设置（请求方式，请求路径，请求参数）

xhr.open(“get”, “regSave.php?username=jzm&userpass=123”, true)

3、设置回调函数（后端有响应时，调用的回调函数）

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

​ xhr.responseText //后端响应的内容，如：php中的echo 后面跟的内容

}}

4、发送

xhr.send();

//readyState:请求响应的状态（请求响应进行到哪一步了）

//status:响应结果的描述，是个状态码（数字）

200 请求成功
4 请求失败

14.深浅拷贝的区别以及如何进行深拷贝

浅拷贝：在未定义显示拷贝构造函数时，系统默认调用拷贝构造函数（浅拷贝），够完成成员的复制。当数据成员中没有指针时，浅拷贝是可行的。

如果有指针，浅拷贝(只是拷贝了指针指向的地址)，则类中的两个指针会指向同一块空间，当对象快结束时，会调用两次析构函数释放同一块空间，而导致指针悬挂现象。
所有，这时，必须采用深拷贝。

深拷贝：所谓深拷贝，就是为新对象开辟一块新的空间，并将原对象的内容拷贝给新开的空间，释放时就不会牵扯到多次析构的问题

手写深拷贝：

// 定义一个深拷贝方法
function deepClone(obj = {
    }){
   
	// 判断传入的数据是否是引用类型(一般为对象或者数组)
	if(typeOf obj !== 'object' || obj == null){
   
		// 如果不是，那么返回该数据
		return obj;
	}
	// 定义一个拷贝后的结果，用来当返回值
	let result;
	// 判断结果值为数组还是对象
	if(obj instanceOf Array){
   
		result = []
	}else{
   
		result = {
   }
	}
	// 遍历传入的对象，并赋值
	for(let key in obj){
   
		// 判断是否为自己本身的属性
		if(obj.hasOwnProperty(key)){
   
			// 如果是，赋值(递归复制深层)
			result[key] = deepClone(obj[key])
		}
	}
	// 返回结果数据
	return result
}

15.es6 promise promise都有哪几种状态 其执行状态

概念：是 ES6(ES2015) 原生中对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可以用console.dir(Promise)查看

promise构造函数的参数是个函数，该函数的参数有两个：resolve，reject

作用：
1.可以解决回调地域的问题

2.Promise 对象可以将异步操作以同步操作的流程表达出来，避免了层层

嵌套的回调函数

Promise的理解

. Promise是一种异步操作的解决方案，将写法复杂的传统的回调函数和监听事件的异

步操作，用同步代码的形式表达出来。避免了多级异步操作的回调函数嵌套。

o主要用于异步计算

o可以将异步操作队列化，按照期望的顺序执行．返回符合预期的结果o可以在对象之间传递和操作promise，帮助我们处埋队列

Promise是一个对象，它的内部其实有三种状态。

初始状态 （ pending )。

已完成（ resolve): resolve方法可以使Promise 对象的状态改变成成功o 已拒绝（ reject ): reject方法则是将 Promise对象的状态改变为失败Promise常用的三种方法

第一种: then表示异步成功执行后的数据状态变为resolveo第二种: catch表示异步失败后执行的数据状态变为reject

第三种: all表示把多个没有关系的Promise 封装成一个Promise对象使用

then返回一个数组数据。

Promise 构造函数有两个变量resolve 用于返回异步执行成功的函数reject用于返

回异步执行失败的函数,配合then 与catch一起使用

16.数组去重的方法

for循环嵌套，利用splice去重

function newArr(arr){
   
    for(var i=0;i<arr.length;i++){
   
        for(var j=i+1;j<arr.length;j++){
   
            if(arr[i]==arr[j]){
    
            //如果第一个等于第二个，splice方法删除第二个
            arr.splice(j,1);
            j--;
            }
        }
    }
    return arr;
}
 
var arr = [1,1,2,5,6,3,5,5,6,8,9,8];
 
console.log(newArr(arr))

利用indexOf去重

 
function newArr(array){
    
    //一个新的数组 
    var arrs = []; 
    //遍历当前数组 
    for(var i = 0; i < array.length; i++){
    
        //如果临时数组里没有当前数组的当前值，则把当前值push到新数组里面