【全球聚看点】看看这些前端面试题,带你搞定高频知识点(六)

时间:2023-02-24 21:15:03       来源:转载

每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。


(相关资料图)

面试官:请你简述 var、let、const 三者之间的区别?

我:呃~,好的,三者的作用区别总结如下:

var:最常用的变量;允许重复声明,但会导致数据被覆盖;会产生变量提升;局部变量挂载到全局对象上,会造成全局对象的污染。

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

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

let a=10;console.log(a) // 不存在变量提升,所以值为:10console.log(window.a) // 不会造成全局污染,所以值为 undefinedfor(let i =0;i<3;i++){ // 会生成块级作用域,i 的值只能在块级作用域中使用    console.log(i)}console.log(i) // 因为拿不到块级作用域中的值,所以报错。
登录后复制

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

const arr = ["小张","小王","小李","小赵"]arr[0]="小明"console.log(arr) // ["小明", "小王", "小李", "小赵"]const arr = [] // 报错
登录后复制

面试官:请你谈谈对深拷贝与浅拷贝的理解

我:呃~,好的,对两者的理解总结如下:

深拷贝:新数据与原数据互不打扰。

// 扩展运算符在一维数组中是属于深拷贝,在多维数组中属于浅拷贝let arr = [1,2,3]let newArr = [...arr]newArr.push(4)console.log(arr,newArr) // [1, 2, 3],[1, 2, 3, 4]// 深拷贝用法let list = [    {id:1,name:"张三",age:18},    {id:2,name:"李四",age:28},    {id:3,name:"王五",age:38},]let newList = JSON.parse(JSON.stringify(list))newList.pop()console.log(list.length,newList.length) // 3 2
登录后复制

当然,深拷贝也有一种标准写法,如下:

// 标准的深拷贝 => 引用数据类型(数组,对象)function deepClone(source){    const targetObj = source.constructor === Array ? [] : {}    for(let keys in source){        if(source.hasOwnProperty(keys)){            // 引用数据类型            if(source[keys] && typeof source[keys] === "object"){                targetObj[keys] = source[keys].constructor === Array ? [] : {}                // 递归                targetObj[keys] = deepClone(source[keys])            }else{                // 基本数据类型,直接赋值                targetObj[keys] = source[keys]            }        }    }    return targetObj}let obj = {    name:"张三",    age:18,    hobby:["抽烟","喝酒","烫头"],    action:{        am:"敲代码",        pm:"睡觉"    }}let newObj = deepClone(obj)newObj.name = "李四"console.log(obj.name,newObj.name)// 张三 李四
登录后复制

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

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

说白了,深拷贝是重新获得一个新的数据,且和原来的数据没有任何关系;浅拷贝虽然能得到一个新的数据,但是和原来的数据仍有一定的联系。

面试官:输入URL的那一瞬间浏览器做了什么?

我:呃~,URL是由以下几部分组成

https: 传输协议(http和tcp之间加了一层 TSL 或者 SSL 的安全层)

www:服务器

baidu.com:域名

DNS域名系统会匹配真实的IP,第一次访问正常,第二次访问会将域名解析的IP存在本地用来读取浏览器缓存。

输入URL的那一刻经历了:域名 -> DNS域名系统 -> 拿到真实IP -> 建立连接(TCP的三次握手) -> 拿数据,渲染页面 -> 四次挥手

具体实现过程

1. url解析:判断是搜索内容还是请求URL

2. 查找本地缓存:如果有缓存直接返回给页面,没有缓存则进入网络请求阶段

3. DNS解析

4. 通过三次握手建立TCP连接

5. 合成请求头信息,发送http请求

6. 处理响应信息

7. 通过四次挥手断开TCP连接

8. 如果响应状态码301,则重定向

9. 浏览器进行页面渲染:1)解析html,生成DOM树;2)根据css计算节点样式,生成stylesheet;3)生成布局树;4)为特定的元素生成独立图层

面试官:说一说cookie sessionStorage localStorage 区别?

我:呃~,好的,他们之间的关系如下:

相同点

都是浏览器存储,都存储在浏览器本地。

区别

1.cookie由服务器或前端写入, sessionStorage以及localStorage都是由前端写入

2.cookie的生命周期由服务器端写入时就设置好的,localStorage是写入就一直存在,除非手动清除,sessionStorage是由页面关闭时自动清除

3.cookie存储空间大小约4kb, sessionStorage及localStorage空间比较大,大约5M

4.3者的数据共享都遵循同源原则,sessionStorage还限制必须是同一个页面

5.前端给后端发送请求时,自动携带cookie, session 及 local都不携带

6.cookie一般存储登录验证信息或者token,localStorage常用于存储不易变动的数据,减轻服务器压力,sessionStorage可以用来监测用户是否是刷新进入页面,如音乐播放器恢复进度条功能

面试官:说一说JS数据类型有哪些,区别是什么?

我:呃~,JS数据类型分为两类:一类是基本数据类型,另一类是引用数据类型,如下:

基本类型:string、number、boolean、null、undefined、symbol、bigInt

引用类型: object、array

基本类型存储在栈中,空间小,操作频繁

引用类型存储在堆中,空间大,在栈中存储了指针,指向在堆中的起始地址

注意:Symbol具有唯一性, 不可枚举 使用getOwnPropertySymbols获取

面试官:说一说你对闭包的理解?

我:呃~,内层函数引用外层函数中变量,这些变量的集合就是闭包。

形成的原理:作用域链,当前作用域可以访问上级作用域中的变量。

解决的问题:能够让函数作用域中的变量在函数执行结束之后不被销毁,同时也能在函数外部可以访问函数内部的局部变量。

带来的问题:由于垃圾回收器不会将闭包中变量销毁,于是就造成了内存泄露,内存泄露积累多了就容易导致内存溢出。

闭包的应用,能够模仿块级作用域,能够实现柯里化,在构造函数中定义特权方法、Vue中数据响应式Observer中使用闭包等。

面试官:说一说JavaScript有几种方法判断变量的类型?

我:呃~,好的,总结如下:

1. typeof(根据二进制判断),不能判断数据类型:null和object

2. intanceof(根据原型链判断),原生数据类型不能判断

3. constructor.name(根据构造器判断),不能判断null数据类型

4. Object.prototype.toString.call()(用Object的toString方法判断)所有类型数据都能判断,记住判断结果打印为:"[object Xxx]"

面试官:说一说null 和 undefined 的区别,如何让一个属性变为null

我:呃~,null 是定义 并赋值null undefined是定义未赋值。

面试官:说一下有什么方法可以保持前后端实时通信?

我:呃~,轮询、长轮询、 iframe流、WebSocket、SSE。

面试官:说一说伪数组和数组的区别?

我:呃~,好的,总结如下:

伪数组的特点:类型是object、不能使用数组方法、可以获取长度、可以使用for in遍历

伪数组可以转换为数组的方法:Array.prototype.slice.call()、Array.from()、[...伪数组]

哪些是伪数组:函数的参数arguments,Map和Set的keys()、values()和entires()

【推荐学习:javascript高级教程】

以上就是看看这些前端面试题,带你搞定高频知识点(六)的详细内容,更多请关注php中文网其它相关文章!

关键词: 数据类型 局部变量 全局变量