2024-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---Vue篇

60 阅读5分钟

★★★ Node.js 有哪些特点?

★★★ setImmediate 和 setTimeOut 区别在哪里?

★★★ 如何更新 Node.js 的版本?

★★ 为什么 Node.js 是单线程的?

★★ 什么是回调函数?

★★★ 什么叫做回调地狱? 如何阻止回调地狱?

★★ Node.js 和 ajax 的区别是什么?

★★★ nextTick 和 setImmediate 的区别是什么?

★★ 请使用 Node.js 原生的 HTTP 模块创建一个 web Server。

★★★★ koa 中间件的实现原理

★★★ 请使用 Node.js 编写代码实现遍历文件夹并输出所有的文件名

★★★★ 图片上传到服务器的过程

★★★ token 存储在 localStorage 里,当过期时过期的 token 怎么处理?

★★★★★ koa 和 express 的区别

★★★ MySQL 和 MongoDB 的区别,他们都是怎么查询语句的,具体讲讲怎么查询的?

★★★★ 了解 eggjs 吗?

★★★ 什么是服务端渲染,服务端渲染的优点?

★★★ 如何在 Node.js 中操作 MongoDb 数据库

★★★ 谈谈 socket 的三种常见使用方式

★★★ 前后端数据交互的常见使用方式

★★★ Node.js 优缺点以及适用场景

Node.js 面试真题

★★★ 如何使用原生 Node.js 操做 cookie?

  • 获取 cookie: req.headers.cookie
  • 设置 cookie: res.writeHead(200, { 'Set-Cookie': 'myCookie=test', 'Content-Type': 'text/plain' }) 参考链接

★★ 什么是 Node.js?我们在哪里使用它?

  • 是什么:Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。是一个让 JavaScript 运行在服务器端的开发平台,它让 JavaScript 的触角伸到了服务器端。但与 PHP、JSP、.net 等相比,Node.js 跳过了 Apache、Naginx、Tomcat、IIS 等 HTTP 服务器,它不需要建设在任何服务器软件之上。
  • 在哪里使用:Web 全栈开发、聊天室、Web 爬虫等 (?,不确定)

★★ 为什么要使用 Node.js?

  • nodejs 会让我们的编程工作变得简单,它主要包含如下几点几个好处:

1). 执行快速 2). 永远不会阻滞。 3). 异步处理机制。 4). 避免并行所带来的问题。

★★★ Node.js 有哪些特点?

特点:单线程、事件驱动、非阻塞 I/O

★★★ setImmediate 和 setTimeOut 区别在哪里?

  • setImmediate 和 setTimeOut 都是延迟加载。而当这两个定时器同时运行在主模块时,运行顺序是不一定的。setTimeOut 受进程性能的约束,有可能比 setImmediate 快,也有可能慢于 setImmediate。 而在 I/O 事件的回调中,setImmediate 方法的回调永远在 setTimeOut 的回调前执行。

★★ 如何更新 Node.js 的版本?

  • npm install npm -g (在命令行中将 npm 在重新安装一遍,如需指定版本需要加上 @版本数字 )

★★ 为什么 Node.js 是单线程的?

  • 回答一:怼:如果不幸遇到面试官问这个问题,你反问他 nodejs 为什么叫做 nodejs.
  • 翻资料组织了一下,非官方,仅供参考:
    • 回答二:苟:您好,贵公司的面试题还挺有深度的,这让我越来越期待加入贵公司了。关于 ndoejs 是单线程的,刚好前段时间阅读过有关 node 的文章。node 的作者在设计之初选择语言时,评估过当时的流行语言,最终选择了存在多年在后端却一直没有市场的 js,正是 js 的不被关注,使得使用 js 没有额外阻力,而 js 在浏览器中有广泛的事件驱动方面的应用,正符合作者的喜好。于是 node 使用了 js 作为开发语言,node 的作者在开发时保持了 js 单线程的特点,所以 nodejs 是单线程的。
    • 这题太诡异,原谅我三句话说不清楚,手动狗头
    • 参考网址

★★★ 什么是回调函数?

  • 回调函数是指用一个函数作为参数传入另一个函数,这个函数会在某个时机被调用。

★★ 什么叫做回调地狱? 如何阻止回调地狱?

  • 回调地狱:回调地狱是由嵌套的回调函数导致的。这样的机制会导致有些函数无法到达,并且很难维护。
  • 阻止回调地狱 1)Promise 2)async/await 3)Generator

Node.js 和 ajax 的区别是什么?

  • Nodejs 和 ajax 都是通过 JavaScript 来表现的,但是他们的目的截然不同。
  • Ajax 是设计用来动态的更新页面的某个区域,从而不需要更新整个页面。
  • Nodejs 是用来开发客户服务器类型应用的。

★★★ nextTick 和 setImmediate 的区别是什么?

  • nextTick 和 setImmediate 都是延迟加载。但是 nextTick 是放在当前队列的最后一个执行,setImmediate 是在下一个队列的队首执行

★★ 请使用 Node.js 原生的 HTTP 模块创建一个 web Server。

/* 示例代码 */
const http = require('http')
const port = 3000

const server = http.createServer((req, res) => {
    res.statusCode = 200
    res.setHeader('Content-Type', 'text/plain')
    res.end('Hello World')
})

server.listen(port, () => {
    console.log(`Server is running on http://127.0.0.1:${port}/`)
})

★★★★ koa 中间件的实现原理

  1. 每个中间件默认接受两个参数,第一个参数是 Context 对象,第二个参数是 next 函数。只要调用 next 函数,就可以把执行权转交给下一个中间件。
  2. 如果中间件内部没有调用 next 函数,那么执行权就不会传递下去。
  3. 多个中间件会形成一个栈结构,以“先进后出”的顺序执行。整个过程就像,先是入栈,然后出栈的操作。

★★★ 请使用 Node.js 编写代码实现遍历文件夹并输出所有的文件名

const fs = require('fs')
const path = require('path')
const getAllFile = function (dir) {
    function traverse(dir) {
        fs.readdirSync(dir).forEach(file => {
            const pathname = path.join(dir, file)
            if (fs.statSync(pathname).isDirectory()) {
                traverse(pathname)
            } else {
                console.log(file)
            }
        })
    }
    traverse(dir)
}

★★★★ 图片上传到服务器的过程

  • 前端业务

    • 根据后台接口发送请求,图片作为参数,需要带上一个 name 字段
  • 后台业务

    • 后台接收图片可以使用 ndoe 的 fs、path 文件系统加上 multer 的 npm 包实现。主要思想是通过 multer 创建一个临时空间用来接收并存储前端发送过来的二进制图片数据。通过 fs 模块读取临时空间的数据,并使用 pipe 方法注入到 fs 模块创建 path 模块指向的服务器文件夹下
  • 后台代码试例,express 环境

var express = require('express')
var router = express.Router()
var fs = require('fs')
var path = require('path')
/* 用于处理非表单的文件数据流 */
var multer = require('multer')
// 配置数据流向的文件,绝对路径,相对于根目录
var upload = multer({ dest: 'upload/' })
// 创建一个接收为编码的二进制数据流的方法实例 接收 name 为 newimg 字段的上传文件,最大接收为 1
var cpUpload = upload.fields([{ name: 'newimg', maxCount: 1 }])

// 接口
router.post('/add', cpUpload, (req, res) => {
    // 前端发送请求后,服务器已经接受到了前端传递过来的图片数据,保存在 files 对象下
    // 加上 cpUpload,数据就会从这个方法所设置的地址流过来,生成一个本地临时空间,类似于虚拟 DOM
    // 获取这段数据
    var img = req.files.newimg[0]

    // fs 模块读取临时空间的数据
    var readStream = fs.createReadStream(img.path)
    // 设置图片存入的路径,并给文件名前面加上一个时间轴,防止命名重复
    var imgpath = `/cdn/${Date.now()}-${img.originalname}`
    // 创建一个写入图片数据的地址
    var writeStram = fs.createWriteStream(
        path.resolve(__dirname, `../public${imgpath}`)
    )
    // 设置一个 pipe 管道,将读取的数据解析并注入到写入地址
    readStream.pipe(writeStram)
    // 监听注入地址的 close 事件,表示注入完毕
    writeStram.on('close', () => {
        // 返回给前端一个图片地址
        res.json({ err: 0, msg: 'success', data: { img: imgpath } })
    })
})
module.exports = router

★★★ token 存储在 localStorage 里,当过期时过期的 token 怎么处理?

  • 当前端进行页面跳转或者需要鉴权的操作时,会发送请求到后台,而 token 会跟随请求头一起发送,后台通过请求头接收到 token 时会进行判断,若是过期了,应该返回一个 401 的状态码给前端,前端接收到以后,应该重定向到登录页要求用户重新登陆。

总结

三套“算法宝典”

28天读完349页,这份阿里面试通关手册,助我闯进字节跳动

算法刷题LeetCode中文版(为例)

人与人存在很大的不同,我们都拥有各自的目标,在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人,但是我深刻知道自己想要的是一年比一年有进步。

最后,我想说的是,无论你现在什么年龄,位于什么城市,拥有什么背景或学历,跟你比较的人永远都是你自己,所以明年的你看看与今年的你是否有差距,不想做咸鱼的人,只能用尽全力去跳跃。祝愿,明年的你会更好!

由于篇幅有限,下篇的面试技术攻克篇只能够展示出部分的面试题,详细完整版以及答案解析,有需要的可以关注

开源分享:docs.qq.com/doc/DSmRnRG…