首页 > 其他 > 详细

22道前端面试题

时间:2020-05-11 19:59:20      阅读:69      评论:0      收藏:0      [点我收藏+]

###一些比较简洁的描述

一、响应式布局(RWD)

1、百分比布局(%)

? 重点:font-size,border这些标签不可以使用百分比布局

? width,height,margin,padding,是可以使用百分比布局

2、媒体查询(@media)

? 根据可视窗口的宽度调配不同的布局方案

3、vw,vh,max-vw,max-vh布局

? 根据可视窗口的宽度高度,进行自适应调配

? 1vw表示可视窗口的100%宽度

4、rem响应式布局

? 根据设备的可是宽度去改变根元素的font-size属性从而达到自适应的效果;

5、flex弹性盒子自适应布局

? 使用display属性的flex;进行布局,它可以自动计算并排布元素与元素之间的间距;

二、rem响应式布局的原理和计算

function rem() {
document.documentElement.style.fontSize = document.documentElement.clientWidth/7.5 + ‘px‘;
}
rem();
window.onresize = rem;

通过将根元素的font-size属性赋值为clientWidth可视宽度除以设计图宽度连接上单位,那么通过屏幕大小发生变化是触发的onresize方法去调用rem函数,从而更新rem的计算结果;

首次onresize不被调用,所以需要手动调用一次

三、数据类型判断

基本数据类型(存于栈中)有:

number、string、boolean、undefined、null、object

ES6:symbol

ES10:bigint

1、typeof

? 重点:对于基本数据类型没有问题,对于引用数据类型(Array,Object)不起作用

2、instanceof(于typeof相反)

? 重点:对于基本数据类型会有问题,对于引用数据类型没有问题;


console.log(‘1‘ instanceof String)//false
console.log(new String(‘1‘) instanceof String)//true
console.log({} instanceof Object)//true

3、constructor

重点:constructor基本可以应对引用数据类型和基本数据类型,

有一种情况会不太灵敏(声明一个构造函数,并且把它的原型指向了Array的原型)


function Fn() {};
Fn.prototype = new Array();
var f = new Fn();
console.log(f.constructor===Fn)//false
console.log(f.constructor===Array)//true

4、Object.prototype.toString.call()

重点:最完美解决方案


var a = Object.prototype.toString;
console.log(a.call(需要判断的数据类型))//精准输出每一种数据类型

四、原型和原型链

原型

js规定每一个函数都有一个proto属性,指向另一个对象(自身的原型),函数对象除了proto之外还有prototype属性,当函数作为构造函数创建实例时,该属性就被作为实例对象的原型

原型链

当一个对象调用自身不存在的属性和方法时就回去自己的proto的前辈prototype对象上去找,如果没找到就会去prototype的前辈上去找 知道找到或者返回undefiend 这个链式查找的过程就是原型链

五、闭包

1、什么是闭包:

? 一个函数的返回值是另一个函数,二返回的那个函数如果调用了其父函数的内部变量,且返回的那个函数在外部被执行,就产生了闭包;简而言之:####函数嵌套函数####(严禁直接说)

闭包是一个环境,具体指的就是外部函数--高阶函数


function add(){
var count = 0
return function() {
  count += 1;
  console.log(count)
}
}
add()//1
add()//2
add()//3

2、特点、优点、缺点

? 特点:

? 1、函数套函数;

? 2、内部函数可以访问外部数的变量或参数;

? 3、变量或参数不会被垃圾回收机制回收

? 优点:

? 1、变量长期驻扎在内存中;

? 2、避免全局变量污染;

? 3、私有成员存在;

? 缺点:

? 常驻内存,增大内存使用量 使用不当会造成内存泄漏

六、继承

1、继承的概念

? 为什么要使用继承?有些对象会有方法(动作、行为),而这些方法都是函数,如果把这些方法和函数都放在构造函数中声明就会导致内存的浪费;

? 继承:通过【某种方式】让一个对象可以访问到另一个对象中的属性和方法,我们把这种方法称为继承;

2、ES5实现继承(6种)


###### 1、原型链继承

? 写法:子原型new父函数(children.prototype = new F())

? 缺点:当一个实例被操作,另一个实例也会被改变(类似于被调用实例的内存地址单一指向了一个地方)

2、借用构造函数

? 在子类型的构造函数中调用超类型(父)的构造函数

? 优点:可以向超类型(父)传递参数,解决了原型中包含引用类型被所有实例共享的问题

? 缺点:方法都在构造函数中定义,无法进行函数复用

3、组合继承(原型链+借用构造函数)

? 组合继承结合了原型链继承和构造函数继承,取二者之长;

? 优点:可以向父类传递参数;

? 每个实例都有自己的属性

? 实现了函数复用


##### 4、原型式继承

? 借助原型可以基于已有的对象创建新对象,同时不必因此创建自定义类型

? 缺点:通原型链继承一样;所有实例都会被共享


##### 5、寄生式继承

? 寄生式继承与原型式继承密切相关:

? 寄生式继承的思路与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数,该函数的内部以某种方式来增强对象,最后再像真的是他做了所有工作一样

缺点:不能做函数复用


##### 6、寄生组合式继承

? 在组合继承的基础上加了一个寄生的写法

? 优点:只调用了一次超累构造函数,效率更高,避免在Subertype、proptotype上面创建不必要的,多余的属性,与此同时原型链还能保持不变。因此寄生组合继承是最理性的继承方式

3、ES6实现继承

? 两个类之间的继承

? class关键字创建两个类,extends关键字可以让子类继承父类,在子类总利用super方法可以继承父类的父类的constructor函数和新建父类的this

七、深拷贝与浅拷贝

1、值与地址传递

? 基本数据类型主要在赋值的时候是通过值传递的方式,存于栈内存

? 引用数据类型是通过地址传递,地址指向堆内存中存储着该数据的位置

2、浅拷贝shallowCopy

? 只是增加了一个指针指向已存在的内存地址,

3、深拷贝deepCopy

是增加了一个指针并且申请了一个新的内存,使这个增加的指针指向这个新的内存,

八、事件冒泡,事件捕获

第一种:事件冒泡

IE 提出的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点P

第二种:事件捕获

网景公司提出的事件流叫事件捕获流。

事件捕获流的思想是不太具体的 DOM 节点应该更早接收到事件,而最具体的节点应该最后接收到事件(与事件冒泡相反)

九、什么是css3和html5

? 新增了语义化标签和炫酷的样式

? 利用css3可以实现炫酷的3D效果


###### 比较重要的是:

? 他可以使用重力感应

? 以获取地理位置

? 高级绘图标签Canvas

? 可以很好的用于App开发

十、Axios拦截

Axios 拦截分为请求拦截和响应拦截,

请求拦截就是在你请求的时候会进行触发!它可以用于设置loding动画;

响应拦截就是后端返回数据的时候触发,主要就用于对请求到的数据进行一些操作;

十一、sessionStorage、localStorage、cookie三者的区别

1、localStorage可以永久保存,除非操作UI页面写好的删除方法,有5M的储存空间

2、sessionStorage是临时的数据缓存,当页面关闭或者浏览器关闭sessionStorage的数据都会被清除,有5M的储存空间

3、cookie只有4K的储存空间,数据可以设置生命周期,关闭页面或者浏览器都不会被清除(一般用于一些短时间内免登录的操作)

十二、什么是图片懒加载

? 因为现在的网页一般比较大,如果一下子加载所有图片,那么等页面加载完成是需要很长时间的,这样就会有很差的用户体验,那么问了解决这个问题,我们就可以使用图片懒加载;他的原理就是利用img标签的scr属性,因为图片加载主要是依靠src属性;依据这个我们可以不给视图以外的img标签添加src属性,等到他进入可视区域的时候再去进行加载;这样的行为看上去很懒,所以就叫做懒加载;;

十三、瀑布流原理

? 瀑布流的实现原理就是通过比较每一列的高度,如果这一列高度低的话就在这一列进行添加,如果可视区距离和滚动距离想加的话比你当前页面的高度还要高的时候,页面就开再次加载多个,这个主要也是页面布局,如果你的布局实现的不好的话!也会出现问题,首先每一列的高度,都是需要自适应的,不能设置高通过每一块内容将每一列撑起来

十四、解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)"

解构赋值就是从数组过着对象中提取值,解构赋值可以让我们快速的抓取到我们想要的数据

解构赋值有

基本结构赋值

忽略赋值

不完全解构

字符串解构

解构默认值

剩余运算符赋值

十五、async/await

async加在函数的前边会将普通函数变成一个异步函数,该函数会返回一个promise对象;

await会先阻塞代码执行,等它自身的代码执行完毕之后再执行后边的代码;

十六、ES6新增了哪些拓展

1、新增了块级作用域(const.let)

2、提供了定义类的语法糖(class)

3、新增了基本数据类型(symbol)

4、新增了变量的解构赋值

5、函数的参数允许设置默认值,引入了rest参数,新郑了箭头函数

6、数组新增了一些API,如isArray、from、of,数组的实例新增了entries()、keys()、values()等方法

7、对象和数组新增了扩展运算符

8、ES6新增了模块化(import 和 export)

9、ES6新增了set和map数据结构

10、ES6原生提供了proxy构造函数,用来生成proxy实例

11、ES6新增了生成器(Generator)和遍历器(Iterator)

十七、请写出在vue中使用promise封装项目api接口的思路

创建一个文件(request),引入axios,创建一个函数,return出promise实例并且在里面用axios预接收请求地址和值

再创建一个api文件,引入刚刚创建的文件(requrst)用来向封装好的函数传参;

这样当我们的请求接口多的时候就方便管理

十八、promise是什么?有哪些状态和参数?如何使用

promise是一个异步编程的解决方案,总共有3个状态(正在进行,已经完成,已经失败)

resolve是操作成功之后调用的函数,返回值将被当做该函数的参数传递出去

reject是操作失败只调用的函数,会将异步操作报出的错误当做参数返回出去

十九、for...in和for...of有什么区别

1、一般在循环对象属性的时候用for...in,在遍历数组的时候使用for...of;;

2、for...in循环出的是key,for...of循环出的是value

3、for..of是es6新增的遍历方法,修复ES5引入的for...in的不足

4、for...of 不能循环普通的对象,需要通过Object.keys()搭配使用

二十、generator(异步编程、yield、next()、await、async)

gennertor是一个迭代器生成函数、其返回值是一个迭代器(Iterator),可用于异步调用

定义时function后边会多一个*,可以用yield关键字规定输出的内容,通过next()方法进行一步步执行

二十一、Ajax是什么?如何创建Ajax?

Ajax主要用来实现客户端与服务端的通信,并且可以实现页面的局部刷新;

首先实例化XMLHttpRequest,将它赋值给变量xhr;然后使用xhr的open来初始化请求,使用xhr的setRequestHeader来设置http头信息,使用xhr的onreadystartchange来等待服务区器响应变化

var xhr = new window.XMLHttpRequest||new ActiveXObject("Microsoft.XMLHTTP")

xhr.open("方式",“地址”,"标志位")//初始化请求

xhr.setRequestHeader("","")设置http头信息

xhr.onreadystatechange=function(){等服务器响应变化

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

}

二十二、Ajax请求的时候,get和post方法的区别;

get请求,发往服务端的数据会被添加到url地址栏中,且传输长度有限制;

post请求,发往服务端的数据会被放在body请求体中,没有传输长度的限制;

 

 

22道前端面试题

原文:https://www.cnblogs.com/rebackl/p/12870303.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!