没有合适的资源？快使用搜索试试~ 我知道了~

首页前端面试宝典：覆盖JS至系统设计全领域知识点

前端面试宝典：覆盖JS至系统设计全领域知识点

javascript

前端web

需积分: 16 8 下载量 168 浏览量更新于2024-07-18 收藏 3.54MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

试读

99页

前端面试指南是一份全面且实用的参考资料，旨在帮助前端开发者在面试过程中提升技能和信心。作者 YuChengKailuoguangcong 和 SeanBillyygmind 穆尔集合了大厂面试题库，经过精心筛选和整理，整理出近百个高频知识点。这份图谱涵盖了JavaScript、网络、浏览器原理、性能优化、安全知识、常用框架（如Vue和React）、版本控制工具Git、数据结构和算法等内容，旨在满足不同层次的学习者需求，无论是基础巩固还是进阶探索，甚至是深入理解源码，都能在此找到答案。该图谱强调实战与理论相结合，认为单纯记忆面试题效果有限，关键在于理解和应用知识点。它强调了知识点的系统性和实用性，帮助面试者在实际面试场景中游刃有余。目前的内容已经包括了基本的内置类型，如null、undefined、boolean、number（包括浮点数，JavaScript不支持整型，而是基于IEEE754标准）、string和symbol，这些都是理解JavaScript语言核心的重要基石。随着图谱的不断更新，未来还会加入更多高级主题，例如系统设计、区块链技术、运维以及后端开发等，这表明作者不仅关注前端，也认识到整个技术栈的完整性对面试者的重要性。通过这个面试图谱，开发者可以在求职季的挑战中更加从容，更好地准备应对各种面试问题，提高自身的竞争力。

资源详情

资源推荐

前端面试指南

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 了

、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

前端面试指南

当然我们也可以通过展开运算符（…）来解决

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,

}

、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: undened,

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

}}

注意该方法是异步的

可以处理

undened

和循环引用对象

const clone = await structuralClone(obj);

模块化

在有 Babel 的情况下，我们可以直接使用 ES6 的模块化

前端面试指南

// 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页未读，继续阅读

Web-interview:《前端面试小册》从面试前简历的准备到知识点的总结，全面复盘大前端面试知识点（实时更新，实时补充）:writing_hand::writing_hand::writing_hand:

:fire: 《前端面试小册》 :books:更新日志 2020/1/7开始决定写近几十万字前端面试系列，规划整个系列目录提纲。 2020/1/8写完部分“面试官到底考察你什么”的内容。 2020/1/9继续完善”面试官到底考察你什么”内容。 2020/1/11开始写准备简历部分。 2020/1/13完善面试前的准备内容。 2020/1/14对面试准备内容做一次整体的优化。 2020年1月15日开始写JavaScript基础知识部分。 2020/1/16写数据类型中的七大模块部分。 2020/1/17写这篇，闭包等重点部分。 2020/1/30写消息循环机制的原理 2020/02/02补充new的实现原理 2020/02/03补充继承等知识内容，以及一些参考文献 2020/02/04补充垃圾回收机制等知识内容 2020/02/05补充深浅拷贝等知识内容会持续更新中... :open_book:目录

粉丝: 0
资源: 2

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前端面试宝典：覆盖JS至系统设计全领域知识点

Web-interview:《前端面试小册》从面试前简历的准备到知识点的总结，全面复盘大前端面试知识点（实时更新，实时补充）:writing_hand::writing_hand::writing_hand:

前端面试资料（包含web前端优化方法和js面试常见内容以及一些面试常见问题）

前端面试笔记

Vue前端面试指南：高频面试题与算法解析

前端面试指南：ES6核心语法与继承对比详解

前端工程化入门指南

前端地图库选型指南

现代前端框架比较与选择指南

前端面试准备与常见问题解答

前端性能优化指南：加速网页加载

阿里主管面试前端面试题

前端面试题 43578943

解锁前端面试体系核心攻略.rar

2023web前端面试手册

天津安鑫一家前端面试题

2023前端面试上岸手册精选.pdf

2022前端面试csdn

2021前端面试真题pdf

前端面试宝典pdf 2022

前端面试题javascript

最新资源