2024年最新零基础入门Node(3)，附Web前端面经

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2.2.3 判断文件是否读取成功

可以判断 err 对象是否为 null，从而知晓文件读取的结果：

const fs = require(‘fs’)

fs.readFile(‘./files/11.txt’, ‘utf8’, function (err, dataStr) {

if (err) {

return console.log(‘读取文件失败！’ + err.message)

}

console.log(‘读取文件成功！’ + dataStr)

})

---

2.3 向指定的文件中写入内容

2.3.1 fs.writeFile() 的语法格式

使用 fs.writeFile() 方法，可以向指定的文件中写入内容，语法格式如下：

fs.writeFile(file, data[, options], callback)

参数解读：

• 参数1：必选参数，需要指定一个文件路径的字符串，表示文件的存放路径。

• 参数2：必选参数，表示要写入的内容。

• 参数3：可选参数，表示以什么格式写入文件内容，默认值是 utf8。

• 参数4：必选参数，文件写入完成后的回调函数。

😆温馨提醒😆：

• fs.writeFile() 方法只能用来创建文件，不能用来创建路径；

• 重复调用 fs.writeFile() 写入同一个文件，新写入的内容会覆盖之前的旧内容；

2.3.2 fs.writeFile() 的示例代码

向指定的文件路径中，写入文件内容：

// 1. 导入 fs 文件系统模块

const fs = require(‘fs’)

// 2. 调用 fs.writeFile() 方法，写入文件的内容

fs.writeFile(‘./files/2.txt’, ‘Hello’, function (err) {

// 2.1 如果文件写入成功，则 err 的值等于 null

// 2.2 如果文件写入失败，则 err 的值等于一个 错误对象

console.log(err)

})

2.3.3 判断文件是否写入成功

可以判断 err 对象是否为 null，从而知晓文件写入的结果：

// 1. 导入 fs 文件系统模块

const fs = require(‘fs’)

// 2. 调用 fs.writeFile() 方法，写入文件的内容

// 参数1：表示文件的存放路径

// 参数2：表示要写入的内容

// 参数3：回调函数

fs.writeFile(‘./files/3.txt’, ‘okok123’, function (err) {

// 2.1 如果文件写入成功，则 err 的值等于 null

// 2.2 如果文件写入失败，则 err 的值等于一个 错误对象

// console.log(err)

if (err) {

return console.log(‘文件写入失败！’ + err.message)

}

console.log(‘文件写入成功！’)

})

---

2.4 练习 - 考试成绩整理

要求：使用 fs 文件系统模块，将素材目录下成绩.txt文件中的考试数据，整理到成绩-ok.txt文件中；

整理前，成绩.txt文件中的数据格式如下：

整理完成之后，希望得到的成绩-ok.txt文件中的数据格式如下：

核心实现步骤：

1. 导入需要的 fs 文件系统模块；

2. 使用 fs.readFile() 方法，读取素材目录下的 成绩.txt 文件；

3. 判断文件是否读取失败；

4. 文件读取成功后，处理成绩数据；

5. 将处理完成的成绩数据，调用 fs.writeFile() 方法，写入到新文件 成绩-ok.txt 中；

完整代码演示如下：

// 1. 导入 fs 模块

const fs = require(‘fs’)

// 2. 调用 fs.readFile() 读取文件的内容

fs.readFile(‘…/素材/成绩.txt’, ‘utf8’, function (err, dataStr) {

// 3. 判断是否读取成功

if (err) {

return console.log(‘读取文件失败！’ + err.message)

}

// console.log(‘读取文件成功！’ + dataStr)

// 4.1 先把成绩的数据，按照空格进行分割

const arrOld = dataStr.split(’ ')

// 4.2 循环分割后的数组，对每一项数据，进行字符串的替换操作

const arrNew = []

arrOld.forEach(item => {

arrNew.push(item.replace(‘=’, ‘：’))

})

// 4.3 把新数组中的每一项，进行合并，得到一个新的字符串

const newStr = arrNew.join(‘\r\n’)

// 5. 调用 fs.writeFile() 方法，把处理完毕的成绩，写入到新文件中

fs.writeFile(‘./files/成绩-ok.txt’, newStr, function (err) {

if (err) {

return console.log(‘写入文件失败！’ + err.message)

}

console.log(‘成绩写入成功！’)

})

})

😆温馨提醒😆：大家看代码的时候一定要注意路径问题哦❗️❗️

---

2.5 fs 模块 - 路径动态拼接的问题

1️⃣ 在使用 fs 模块操作文件时，如果提供的操作路径是以 ./ 或 …/ 开头的相对路径时，很容易出现路径动态拼接错误的问题；

2️⃣ 原因：代码在运行的时候，会以执行 node 命令时所处的目录，动态拼接出被操作文件的完整路径；

3️⃣ 解决方案：在使用 fs 模块操作文件时，直接提供完整的路径，不要提供 ./ 或 …/ 开头的相对路径，从而防止路径动态拼接的问题

完整代码演示如下：

const fs = require(‘fs’)

fs.readFile(‘./files/1.txt’, ‘utf8’, function (err, dataStr) {

if (err) {

return console.log(‘读取文件失败！’ + err.message)

}

console.log(‘读取文件成功！’ + dataStr)

})

// __dirname 表示当前文件所处的目录

// console.log(__dirname)

fs.readFile(__dirname + ‘/files/1.txt’, ‘utf8’, function (err, dataStr) {

if (err) {

return console.log(‘读取文件失败！’ + err.message)

}

console.log(‘读取文件成功！’ + dataStr)

})

---

（3）path 路径模块

3.1 什么是 path 路径模块

path 模块是 Node.js 官方提供的、用来处理路径的模块。它提供了一系列的方法和属性，用来满足用户对路径的处理需求。

• path.join()方法，用来将多个路径片段拼接成一个完整的路径字符串；

• path.basename() 方法，用来从路径字符串中，将文件名解析出来；

如果要在 JavaScript 代码中，使用 path 模块来处理路径，则需要使用如下的方式先导入它：

const path = require(‘path’)

---

3.2 路径拼接

3.2.1 path.join() 的语法格式

使用 path.join() 方法，可以把多个路径片段拼接为完整的路径字符串，语法格式如下：

path.join([…paths])

参数解读：

• ...paths <string> 路径片段的序列；

• 返回值：<string>；

3.2.2 path.join() 的代码示例

使用 path.join() 方法，可以把多个路径片段拼接为完整的路径字符串：

完整代码演示如下：

const fs = require(‘fs’)

// 注意： …/ 会抵消前面的路径

// const pathStr = path.join(‘/a’, ‘/b/c’, ‘…/’, ‘./d’, ‘e’)

// console.log(pathStr) // \a\b\d\e

// fs.readFile(__dirname + ‘/files/1.txt’)

fs.readFile(path.join(__dirname, ‘./files/1.txt’), ‘utf8’, function(err, dataStr) {

if (err) {

return console.log(err.message)

}

console.log(dataStr)

})

😆温馨提醒😆：今后凡是涉及到路径拼接的操作，都要使用 path.join() 方法进行处理。不要直接使用 + 进行字符串的拼接；

---

3.3 获取路径中的文件名

3.3.1 path.basename() 的语法格式

使用 path.basename() 方法，可以获取路径中的最后一部分，经常通过这个方法获取路径中的文件名，语法格式如下：

path.basename(path[, ext])

参数解读：

• path <string> 必选参数，表示一个路径的字符串；

• ext <string> 可选参数，表示文件扩展名；

• 返回：<string> 表示路径中的最后一部分；

3.3.2 path.basename() 的代码示例

使用 path.basename() 方法，可以从一个文件路径中，获取到文件的名称部分：

完整代码演示如下：

const path = require(‘path’)

// 定义文件的存放路径

const fpath = ‘/a/b/c/index.html’

const fullName = path.basename(fpath)

console.log(fullName) // 输出 index.html

const nameWithoutExt = path.basename(fpath, ‘.html’)

console.log(nameWithoutExt) // 输出 index

---

3.4 获取路径中的文件扩展名

3.4.1 path.extname() 的语法格式

使用 path.extname() 方法，可以获取路径中的扩展名部分，语法格式如下：

path.extname(path)

参数解读：

• path <string>必选参数，表示一个路径的字符串；

• 返回：<string> 返回得到的扩展名字符串；

3.4.2 path.extname() 的代码示例

使用 path.extname()方法，可以获取路径中的扩展名部分：

完整代码演示如下：

const path = require(‘path’)

// 这是文件的存放路径

const fpath = ‘/a/b/c/index.html’

const fext = path.extname(fpath)

console.log(fext) // 输出 .html

---

（4）http 模块

4.1 什么是 http 模块

http 模块是 Node.js 官方提供的、用来创建 web 服务器的模块。通过 http 模块提供的 http.createServer() 方法，就能方便的把一台普通的电脑，变成一台 Web 服务器，从而对外提供 Web 资源服务。

如果要希望使用 http 模块创建 Web 服务器，则需要先导入它：

const http = require(‘http’)

4.2 进一步理解 http 模块的作用

1️⃣ 服务器和普通电脑的区别在于，服务器上安装了 web 服务器软件，例如：IIS、Apache 等。通过安装这些服务器软件，就能把一台普通的电脑变成一台 web 服务器；

2️⃣ 在 Node.js 中，我们不需要使用 IIS、Apache 等这些第三方 web 服务器软件。因为我们可以基于 Node.js 提供的 http 模块，通过几行简单的代码，就能轻松的手写一个服务器软件，从而对外提供 web 服务；

---

4.3 创建最基本的 web 服务器

4.3.1 创建 web 服务器的基本步骤

1. 导入 http 模块；

2. 创建 web 服务器实例；

3. 为服务器实例绑定 request 事件，监听客户端的请求；

4. 启动服务器；

完整代码演示如下：

// 1. 导入 http 模块

const http = require(‘http’)

// 2. 创建 web 服务器实例

// 调用 http.createServer() 方法，即可快速创建一个 web 服务器实例

const server = http.createServer()

// 3. 为服务器实例绑定 request 事件，监听客户端的请求

server.on(‘request’, function (req, res) {

console.log(‘Someone visit our web server.’)

})

// 4. 启动服务器

// 调用服务器实例的 .listen() 方法，即可启动当前的 web 服务器实例

server.listen(8080, function () {

console.log(‘server running at http://127.0.0.1:8080’)

})

4.3.2 req 请求对象

只要服务器接收到了客户端的请求，就会调用通过 server.on() 为服务器绑定的 request 事件处理函数。

如果想在事件处理函数中，访问与客户端相关的数据或属性，可以使用如下的方式：

const http = require(‘http’)

const server = http.createServer()

// req 是请求对象，包含了与客户端相关的数据和属性

server.on(‘request’, (req, res) => {

// req.url 是客户端请求的 URL 地址

const url = req.url

// req.method 是客户端请求的 method 类型

const method = req.method

const str = Your request url is ${url}, and request method is ${method}

console.log(str)

// 调用 res.end() 方法，向客户端响应一些内容

res.end(str)

})

server.listen(80, () => {

console.log(‘server running at http://127.0.0.1’)

})

4.3.3 res 响应对象

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总