没有合适的资源?快使用搜索试试~ 我知道了~
首页前端面试宝典:覆盖JS至系统设计全领域知识点
前端面试宝典:覆盖JS至系统设计全领域知识点
需积分: 16 8 下载量 168 浏览量
更新于2024-07-18
收藏 3.54MB PDF 举报
前端面试指南是一份全面且实用的参考资料,旨在帮助前端开发者在面试过程中提升技能和信心。作者 YuChengKailuoguangcong 和 SeanBillyygmind 穆尔集合了大厂面试题库,经过精心筛选和整理,整理出近百个高频知识点。这份图谱涵盖了JavaScript、网络、浏览器原理、性能优化、安全知识、常用框架(如Vue和React)、版本控制工具Git、数据结构和算法等内容,旨在满足不同层次的学习者需求,无论是基础巩固还是进阶探索,甚至是深入理解源码,都能在此找到答案。 该图谱强调实战与理论相结合,认为单纯记忆面试题效果有限,关键在于理解和应用知识点。它强调了知识点的系统性和实用性,帮助面试者在实际面试场景中游刃有余。目前的内容已经包括了基本的内置类型,如null、undefined、boolean、number(包括浮点数,JavaScript不支持整型,而是基于IEEE754标准)、string和symbol,这些都是理解JavaScript语言核心的重要基石。 随着图谱的不断更新,未来还会加入更多高级主题,例如系统设计、区块链技术、运维以及后端开发等,这表明作者不仅关注前端,也认识到整个技术栈的完整性对面试者的重要性。通过这个面试图谱,开发者可以在求职季的挑战中更加从容,更好地准备应对各种面试问题,提高自身的竞争力。
资源详情
资源推荐
![](https://csdnimg.cn/release/download_crawler_static/10665515/bg10.jpg)
16
前端面试指南
foo = new FunctionExpression;
foo.[[Scope]] = Scope;
specialObject.foo = foo; // {DontDelete}, {ReadOnly}
delete Scope[0]; // remove specialObject from the front of scope chain
闭包
闭包的定义很简单:函数 A 返回了一个函数 B,并且函数 B 中使用了函数 A 的
变量,函数 B 就被称为闭包。
function A() {
let a = 1
function B() {
console.log(a)
}
return B
}
你是否会疑惑,为什么函数 A 已经弹出调用栈了,为什么函数 B 还能引用到函数
A 中的变量。因为函数 A 中的变量这时候是存储在堆上的。现在的 JS 引擎可以通过
逃逸分析辨别出哪些变量需要存储在堆上,哪些需要存储在栈上。
经典面试题,循环中使用闭包解决 var 定义函数的问题
for ( var i=1; i<=5; i++) {
setTimeout( function timer() {
console.log( i );
}, i*1000 );
}˝
首先因为 setTimeout 是个异步函数,所有会先把循环全部执行完毕,这时候 i
就是 6 了,所以会输出一堆 6。
解决办法两种,第一种使用闭包
for (var i = 1; i <= 5; i++) {
(function(j) {
setTimeout(function timer() {
console.log(j);
}, j * 1000);
})(i);
}
第二种就是使用 setTimeout 的第三个参数
for ( var i=1; i<=5; i++) {
setTimeout( function timer(j) {
console.log( j );
}, i*1000, i);
}
第三种就是使用 let 定义 i 了
![](https://csdnimg.cn/release/download_crawler_static/10665515/bg11.jpg)
17
、InfoQ 中文站
for ( let i=1; i<=5; i++) {
setTimeout( function timer() {
console.log( i );
}, i*1000 );
}
因为对于 let 来说,他会创建一个块级作用域,相当于
{ //
形成块级作用域
let i = 0
{
let ii = i
setTimeout( function timer() {
console.log( i );
}, i*1000 );
}
i++
{
let ii = i
}
i++
{
let ii = i
}
...
}
深浅拷贝
let a = {
age: 1
}
let b = a
a.age = 2
console.log(b.age) // 2
从上述例子中我们可以发现,如果给一个变量赋值一个对象,那么两者的值会是同
一个引用,其中一方改变,另一方也会相应改变。
通常在开发中我们不希望出现这样的问题,我们可以使用浅拷贝来解决这个问题。
浅拷贝
首先可以通过 Object.assign 来解决这个问题。
let a = {
age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1
![](https://csdnimg.cn/release/download_crawler_static/10665515/bg12.jpg)
18
前端面试指南
当然我们也可以通过展开运算符(…)来解决
let a = {
age: 1
}
let b = {...a}
a.age = 2
console.log(b.age) // 1
通常浅拷贝就能解决大部分问题了,但是当我们遇到如下情况就需要使用到深拷贝
了
let a = {
age: 1,
jobs: {
rst: 'FE'
}
}
let b = {...a}
a.jobs.rst = 'native'
console.log(b.jobs.rst) // native
浅拷贝只解决了第一层的问题,如果接下去的值中还有对象的话,那么就又回到刚
开始的话题了,两者享有相同的引用。要解决这个问题,我们需要引入深拷贝。
深拷贝
这个问题通常可以通过 JSON.parse(JSON.stringify(object)) 来解决。
let a = {
age: 1,
jobs: {
rst: 'FE'
}
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.rst = 'native'
console.log(b.jobs.rst) // FE
但是该方法也是有局限性的:
• 会忽略 undefined
• 不能序列化函数
• 不能解决循环引用的对象
let obj = {
a: 1,
b: {
c: 2,
d: 3,
},
}
![](https://csdnimg.cn/release/download_crawler_static/10665515/bg13.jpg)
19
、InfoQ 中文站
obj.c = obj.b
obj.e = obj.a
obj.b.c = obj.c
obj.b.d = obj.b
obj.b.e = obj.b.c
let newObj = JSON.parse(JSON.stringify(obj))
console.log(newObj)
如果你有这么一个循环引用对象,你会发现你不能通过该方法深拷贝
在遇到函数或者 undefined 的时候,该对象也不能正常的序列化
let a = {
age: undened,
jobs: function() {},
name: 'yck'
}
let b = JSON.parse(JSON.stringify(a))
console.log(b) // {name: "yck"}
你会发现在上述情况中,该方法会忽略掉函数和 undefined 。
但是在通常情况下,复杂数据都是可以序列化的,所以这个函数可以解决大部分问
题,并且该函数是内置函数中处理深拷贝性能最快的。当然如果你的数据中含有以上三
种情况下,可以使用 lodash 的深拷贝函数。
如果你所需拷贝的对象含有内置类型并且不包含函数,可以使用 MessageChannel
function structuralClone(obj) {
return new Promise(resolve => {
const {port1, port2} = new MessageChannel();
port2.onmessage = ev => resolve(ev.data);
port1.postMessage(obj);
});
}
var obj = {a: 1, b: {
c: b
}}
//
注意该方法是异步的
//
可以处理
undened
和循环引用对象
const clone = await structuralClone(obj);
模块化
在有 Babel 的情况下,我们可以直接使用 ES6 的模块化
![](https://csdnimg.cn/release/download_crawler_static/10665515/bg14.jpg)
20
前端面试指南
// le a.js
export function a() {}
export function b() {}
// le b.js
export default function() {}
import {a, b} from './a.js'
import XXX from './b.js'
CommonJS
CommonJs 是 Node 独有的规范,浏览器中使用就需要用到 Browserify 解析了。
// a.js
module.exports = {
a: 1
}
// or
exports.a = 1
// b.js
var module = require('./a.js')
module.a // -> log 1
在上述代码中,module.exports 和 exports 很容易混淆,让我们来看看大致内部
实现
var module = require('./a.js')
module.a
//
这里其实就是包装了一层立即执行函数,这样就不会污染全局变量了,
//
重要的是
module
这里,
module
是
Node
独有的一个变量
module.exports = {
a: 1
}
//
基本实现
var module = {
exports: {} // exports
就是个空对象
}
//
这个是为什么
exports
和
module.exports
用法相似的原因
var exports = module.exports
var load = function (module) {
//
导出的东西
var a = 1
module.exports = a
return module.exports
};
再来说说 module.exports 和 exports,用法其实是相似的,但是不能对 exports
直接赋值,不会有任何效果。
对于 CommonJS 和 ES6 中的模块化的两者区别是:
• 前者支持动态导入,也就是 require(${path}/xx.js),后者目前不支持,但是
剩余98页未读,继续阅读
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/default.jpg!1)
z20081316023
- 粉丝: 0
- 资源: 2
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- 贵州煤矿矿井水分类与处理策略:悬浮物、酸性与非酸性
- 醛固酮增多症肾上腺静脉采样对比:ACTH后LR-CAV的最优评估
- 开源云连接传感器监控平台:农业土壤湿度远程监测
- 母婴用品企业年度生产计划线性规划优化模型:实证与应用
- 井下智能变电站:Rogowski线圈电流检测系统的研发与性能验证
- 霍州矿区煤巷稳定性分析及支护策略
- ARM嵌入式系统远程软件更新方案:基于TFTP协议
- 煤炭选煤中汞分布规律与洗选脱汞效果
- 提升码垛机器人性能:拉格朗日动力学模型与滑模模糊控制的应用
- 增强现实技术提升学前手写教学:设计与开发案例
- 不规则工作面沉陷三角剖分算法提升与应用
- 卡尔曼滤波在瞬变电磁干扰压制中的应用研究
- 煤矿安全能力研究:理论与系统构建
- LonWorks总线技术在斜巷运输车辆定位与跑车防护中的应用
- 神东煤炭集团高效煤粉锅炉系统:节能环保新实践
- Ti/SnO2+Sb2Ox/PbO2电极分形维数与电催化性能研究
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)