高频web前端面试题实例分析

本篇内容主要讲解“高频web前端面试题实例分析”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“高频web前端面试题实例分析”吧! 我：呃~，好的，三者的作用区别总结如下：var：最常用的变量；允许重复声明，但会导致数据被覆盖；会产生变量提升；局部变量挂载到全局对象上，会造成全局对象的污染。

console.log(a)//因变量提升,vara;提到前面但是没有赋值，所以值为undefined
vara=1
vara='你好'//var声明的变量会被重新赋值
console.log(a)//a会打印被重新赋值的值
console.log(window.a)//var声明的局部变量会被挂载到全局变量上，造成全局变量的污染。

let：es6新增命令，用法类似var；不允许重复声明；不存在变量提升；常作用于块级作用域而避免局部变量造成全局变量的污染。

leta=10;
console.log(a)//不存在变量提升，所以值为：10
console.log(window.a)//不会造成全局污染，所以值为undefined
for(leti=0;i

const：es6新增命令，用于声明常量且值无法被修改；声明常量必须立刻初始化，否则后期赋值报错；不能重复声明；const指向变量的地址, 只要变量名所引用的地址不变就不会报错

constarr=['小张','小王','小李','小赵']
arr[0]='小明'
console.log(arr)//['小明','小王','小李','小赵']
constarr=[]//报错

我：呃~，好的，对两者的理解总结如下：深拷贝：新数据与原数据互不打扰。

//扩展运算符在一维数组中是属于深拷贝，在多维数组中属于浅拷贝
letarr=[1,2,3]
letnewArr=[...arr]
newArr.push(4)
console.log(arr,newArr)//[1,2,3],[1,2,3,4]

//深拷贝用法
letlist=[
{id:1,name:'张三',age:18},
{id:2,name:'李四',age:28},
{id:3,name:'王五',age:38},
]
letnewList=JSON.parse(JSON.stringify(list))
newList.pop()
console.log(list.length,newList.length)//32

当然，深拷贝也有一种标准写法，如下：

//标准的深拷贝=>引用数据类型(数组,对象)
functiondeepClone(source){
consttargetObj=source.constructor===Array?[]:{}
for(letkeysinsource){
i免费云主机、域名f(source.hasOwnProperty(keys)){
//引用数据类型
if(source[keys]&&typeofsource[keys]==='object'){
targetObj[keys]=source[keys].constructor===Array?[]:{}
//递归
targetObj[keys]=deepClone(source[keys])
}else{
//基本数据类型,直接赋值
targetObj[keys]=source[keys]
}
}
}
returntargetObj
}

letobj={
name:'张三',
age:18,
hobby:['抽烟','喝酒','烫头'],
action:{
am:'敲代码',
pm:'睡觉'
}
}
letnewObj=deepClone(obj)
newObj.name='李四'
console.log(obj.name,newObj.name)//张三李四

浅拷贝：新数据会影响原数据。

letarr=[1,2,3]
letnewArr=arr
//对新数据做出改变，原数据也会发生改变，这种就叫做浅拷贝
newArr.push(4)//[1,2,3,4]
console.log(arr,newArr)//[1,2,3,4]

说白了，深拷贝是重新获得一个新的数据，且和原来的数据没有任何关系；浅拷贝虽然能得到一个新的数据，但是和原来的数据仍有一定的联系。我：呃~，URL是由以下几部分组成：https: 传输协议（http和tcp之间加了一层 TSL 或者 SSL 的安全层）www：服务器baidu.com：域名DNS域名系统会匹配真实的IP，第一次访问正常，第二次访问会将域名解析的IP存在本地用来读取浏览器缓存。输入URL的那一刻经历了：域名 -> DNS域名系统 -> 拿到真实IP -> 建立连接(TCP的三次握手) -> 拿数据，渲染页面 -> 四次挥手具体实现过程：1. url解析：判断是搜索内容还是请求URL2. 查找本地缓存：如果有缓存直接返回给页面，没有缓存则进入网络请求阶段3. DNS解析4. 通过三次握手建立TCP连接5. 合成请求头信息，发送http请求6. 处理响应信息7. 通过四次挥手断开TCP连接8. 如果响应状态码301，则重定向9. 浏览器进行页面渲染：1）解析html，生成DOM树；2）根据css计算节点样式，生成stylesheet；3）生成布局树；4）为特定的元素生成独立图层我：呃~，好的，他们之间的关系如下：相同点：都是浏览器存储，都存储在浏览器本地。区别：1.cookie由服务器或前端写入， sessionStorage以及localStorage都是由前端写入2.cookie的生命周期由服务器端写入时就设置好的，localStorage是写入就一直存在，除非手动清除，sessionStorage是由页面关闭时自动清除3.cookie存储空间大小约4kb， sessionStorage及localStorage空间比较大，大约5M4.3者的数据共享都遵循同源原则，sessionStorage还限制必须是同一个页面5.前端给后端发送请求时，自动携带cookie, session 及 local都不携带6.cookie一般存储登录验证信息或者token，localStorage常用于存储不易变动的数据，减轻服务器压力，sessionStorage可以用来监测用户是否是刷新进入页面，如音乐播放器恢复进度条功能我：呃~，JS数据类型分为两类：一类是基本数据类型，另一类是引用数据类型，如下：基本类型：string、number、boolean、null、undefined、symbol、bigInt引用类型： object、array基本类型存储在栈中，空间小，操作频繁引用类型存储在堆中，空间大，在栈中存储了指针，指向在堆中的起始地址注意：Symbol具有唯一性， 不可枚举 使用getOwnPropertySymbols获取我：呃~，内层函数引用外层函数中变量，这些变量的集合就是闭包。形成的原理：作用域链，当前作用域可以访问上级作用域中的变量。解决的问题：能够让函数作用域中的变量在函数执行结束之后不被销毁，同时也能在函数外部可以访问函数内部的局部变量。带来的问题：由于垃圾回收器不会将闭包中变量销毁，于是就造成了内存泄露，内存泄露积累多了就容易导致内存溢出。闭包的应用，能够模仿块级作用域，能够实现柯里化，在构造函数中定义特权方法、Vue中数据响应式Observer中使用闭包等。我：呃~，好的，总结如下：1. typeof（根据二进制判断），不能判断数据类型：null和object2. intanceof(根据原型链判断)，原生数据类型不能判断3. constructor.name(根据构造器判断)，不能判断null数据类型4. Object.prototype.toString.call()（用Object的toString方法判断）所有类型数据都能判断,记住判断结果打印为：'[object Xxx]’我：呃~，null 是定义 并赋值null undefined是定义未赋值。我：呃~，轮询、长轮询、 iframe流、WebSocket、SSE。我：呃~，好的，总结如下：伪数组的特点：类型是object、不能使用数组方法、可以获取长度、可以使用for in遍历伪数组可以转换为数组的方法：Array.prototype.slice.call()、Array.from()、[…伪数组]有哪些是伪数组：函数的参数arguments，Map和Set的keys()、values()和entires()到此，相信大家对“高频web前端面试题实例分析”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: vue如何禁止返回到上一页

本文小编为大家详细介绍“vue如何禁止返回到上一页”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue如何禁止返回到上一页”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 vue禁止返回到上一页的方法：1、通过“npm instal…