看看这些前端面试题，带你搞定高频知识点（六）-js教程-PHP中文网

看看这些前端面试题，带你搞定高频知识点（六）

青灯夜游

发布： 2023-02-24 19:19:37

转载

1643人浏览过

看看这些前端面试题，带你搞定高频知识点（六）

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

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

我：呃~，好的，三者的作用区别总结如下：

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

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

登录后复制

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

let a=10;
console.log(a) // 不存在变量提升，所以值为：10
console.log(window.a) // 不会造成全局污染，所以值为 undefined
for(let i =0;i<p><span style="color:#be191c;"><strong>const</strong></span>：es6新增命令，用于声明常量且值无法被修改；声明常量必须立刻初始化，否则后期赋值报错；不能重复声明；const指向变量的地址, 只要变量名所引用的地址不变就不会报错</p><pre class="brush:php;toolbar:false">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

登录后复制

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

// 标准的深拷贝 =&gt; 引用数据类型(数组,对象)
function deepClone(source){
    const targetObj = source.constructor === Array ? [] : {}
    for(let keys in source){
        if(source.hasOwnProperty(keys)){
            // 引用数据类型
            if(source[keys] &amp;&amp; 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可以用来监测用户是否是刷新进入页面，如音乐播放器恢复进度条功能