前端面试题(1)

讲讲浅拷贝,深拷贝之间的区别?

浅拷贝只是拷贝基本类型的数据,如果父对象的属性等于数组或者另一个对象,那么实际上,子对象获得的只是一个内存地址,因此存在父对象被篡改的可能,浅拷贝只复制指向某个对象的指针,而不是复制对象本身,新旧对象还是共存同一块内存
深拷贝是实现真正意义上的数组和对象的拷贝,递归调用'浅拷贝'(浅拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,新对象跟原对象不共享内存,修改新对象不会改到原对象)

如果想实现支持setter,getter特性的拷贝,改怎么实现?

Object.defineproperty定义属性

所有东西的原型链向上延伸到原型链的顶端,是什么?

Object.prototype.__proto__,结果是null

如何实现继承?

原型链继承  构造继承,实例继承,拷贝继承,组合继承,寄生组合继承

说到变量提升，class 声明一个类时，存在变量提升么？为什么？

不存在,因为方便类的继承,先声明子类再声明父类

const 声明一个对象，如何让对象内部的属性的值也无法改变？

使用Object.freeze()锁死
对数组等引用类型的值,还是能修改的

js有哪些基本数据类型?

Boolean   Null   undefined   Number  String  Object   Symbol

es6新增的原型数据累心Symbol,特点是什么

声明独一无二的值
声明的时候不使用new Symbol  而使用Symbol
可以传入参数作为描述
作为key不能遍历

如何声明两个相等的Symbol的变量?

使用Symbol.for参数相同时:
let a=Symbol.for('a');
let b=Symbol.for('a');
a===b;//true

Promise是什么?

是异步编程的一种解决方案,所谓promise,简单说就是一个容器,里面存着某个未来才会结束的事件(通常是一个异步操作)的结果,从语法上说,promise是一个对象,从他可以获取异步操作的消息

一般什么时候使用?

处理异步请求时使用,比如ajax请求

有哪些状态?

状态有pending  resolve    reject

怎么捕获他的错误?

最后写catch
then里面第二个参数可以捕获

如果内部报错,但是没有被捕获,这个没被捕获的错误接下来会发生什么事情

冒泡

能不能被try catch捕获,为什么?(try{}catch(e){}.finally是捕获异常的方法)

不能,因为是异步编程

能不能被window.onerror捕获?

不能

new Promise((resolve,reject)=>throw new Error(‘a’)).then(fn1).then(fn2,fn3).catch(fn4)这个函数会执行哪些函数

fn3

页面渲染:

解析html构建DOM树-->构建渲染树-->布局渲染树-->绘制渲染树

await,async的使用场景是什么?

连续的异步请求,下一步的异步请求依赖于前面的异步请求结果;
进阶一:
假如有a,b,c三个异步请求,异步请求c依赖于异步操作请求a和b的结果(即a和b完成后再发起c),那么你会如何实现它?
    promise.all();
设置状态分别标记a和b,a,b完成后会修改自己的完成标记,然后检查所有的完成标记,假如都是完成状态标记,然后去执行异步请求c

数字计算:请问在js中,输入表达式0.1+0.2的结果是什么?

0.30000000000000004(答出来不是0.3,而是0.3后有若干个0和一个数字即可)
原因是浮点数和整数,在存储时的方法是不同的,因此相加的规则也是不同的.

移动端开发的时候，一般怎么实现自适应？

rem
vw和vh
媒体查询(bootstrap)
流式布局

他们的特点是什么?

rem根据html的font-size
vw是浏览器窗口宽度,vh是高度
媒体查询是根据浏览器窗口或宽度,进行响应式选择显示哪个css

弹出输入框会发生定位错误，fixed布局，怎么解决？

1、如果使用的元素不是必须使用fixed布局的话可以不使用；

2、元素必须使用fixed布局时，在input获得焦点时将元素的position设置为static，失去焦点时再将元素的position设置为fixed；

在我们将开发好的页面，进入线上环境的时候，肯定要最大化性能优化，那么我们常见的做法有哪些？

gzip 雪碧图  减少http请求次数,减少DNS请求,避免重定向,缓存ajax请求,延迟加载,预加载,减少DOM数,使用框架react的虚拟DOM数,减少DOM操作,减少css里@import写法

图片使用雪碧图和base64字符串,你觉得哪个好,为什么?

雪碧图可以缓存
base64可以减少请求数

如果决定使用雪碧图/base64字符串,你会怎么做?

webpack配url-loader(base64)
webpack的雪碧图插件webpack-spritesmith

await为什么会出现.能够解决什么问题?和promise有什么区别?

await它是是异步代码看起来想同步操作,它是基于promise实现的,解决了promise里面的回调地狱,不停嵌套的一个情况,await使用的时候,她是需要一个async的关键字,只能在async的关键词中使用

写一个扁平化数组的方法

扁平化就是将一个多维数组变为一维数组

核心:遍历数组arr,若arr[i]为数组则递归遍历,直至arr[i]不为数组然后与之前的结果concat

1.reduce  
遍历数组每一项,若值为数组则递归遍历,否则concat
2.toString&split  
调用数组的toString方法,将数组变为字符串然后再用split分割还原数组
3.join&split
和上面一样,join也可以将数组转换为字符串
4.递归
递归数组每一项,若为数组则继续遍历,否则concat
5.扩展运算符
es6的扩展运算符能将二维数组变为一维数组  [].concat(...[1,2,[3,4]])  //[1,2,3,4]
根据这个结果可以做一个遍历,若arr中含有数组则使用一次扩展运算符,直至没有为止
arr=[].concat(...arr)

判断数组类型的方法有几种?

使用Array.isArray方法,最靠谱,一定可以查出来是不是数组
instanceOf运算符
typeOf()运算符(判断数组)得到object和对象,正则,null的判断结果都是一样的
constructor方法,由于这个属性可以改写,所以不一定准确
object.prototype.toString()方法,这个也是可以重写的,所以不建议

sesionstorage,localstorage的异同点及应用场景

localstorage的期限是永久的,关闭页面或者浏览器之后也不会消失,localstorage除非使用localstorage.removeItem()移除,否则会一直在
sessionstorage是仅在当前会话下有效,他引入了一个浏览器窗口的概念,只要这个浏览器窗口没有关闭,而是刷新或者进入了另一个同源页面,session都不会消失,但是在关闭了浏览器窗口之后就会被销毁,同时独立的打开同一个窗口同一个页面,essionstorage也是不一样的
储存大小
两者的储存最大数据大小一般都是5MB
储存位置
都在客户端,不与服务端进行通讯
储存内容类型
一般都只能保存字符串类型,对于复杂对象可以采用json的stringify和parse方法来处理
获取方式
window.localstorage和window.sessionstorage
应用场景
localstorage常用语长期登录(+判断用户的登录状态),适合长期保存在本地的数据
sessionstorage常用于敏感账号一次性登录,如关闭当前页面再次打开也买你就要重新登录

webstorage的优点

1.储存空间大
cookie为4kb  webstorage为5MB
2.节省网络流量
不用像cookie一样每次请求都要传送到服务器,减少客户端和服务端的交互,节省了网络流量
对于哪种用户浏览一组页面之后关闭浏览器数据就被丢失的场景,sessionstorage很方便
快速显示
从客户端本地取数据要比服务端取快
安全性
webstorage不用像cookie一样传送服务器,避免被截取,但是仍然存在伪造问题
webstorage提供了一些方法,数据操作比cookie方便
//本地储存的方法
setItem(key,value)
getItem(key)
removeItem(key)
clear()
key(index)

TypeError:object(…) is not a function

第一点:确认一下方法名是否重名了,重名会报这个错误,定义了data里面的(重复)变量名和方法名
import {  } form '@/api/index'
第二:地址
mounted调用mounted里面打印

写一个省略号

white-space=nowrap
overfolw:hidden
text-overflow:ellipsis;
word-break:break-all;

解决图片下间隙问题

//出现的原因
(vertical-align:baseline   基线对齐的所以会出现下间隙
父元素的默认行高也是受影响的)
//解决方法
1.浮动(可能导致父元素塌陷问题,注意父级元素清除浮动)
2.转换为块级元素
3.定位(使用定位时脱离文档流,注意父元素塌陷,定位完全脱离父元素)
4.修改父级元素的行高:line-height:0;
5.修改父级元素对齐方式:vertical-align:根据需求改为middle
top  bottom  text-bottom等值
6.修改父级元素的字体大小  font-size:0;

watch的使用

watch:{ctiy(newName,oldName){/**/}}
watch:{cityName:'name'}
首次绑定的时候就执行handle
watch:{
    city:{
        handler(new,old){
            immediate:true
        }
    }
}
深度侦听
deep:true

轮播图可以直接使用min-height解决,单位不用px,用vw,移动端常用的单位一般都是rem和vh,vw,百分比也可以,不过她是根据父级元素判断的