122. 面试官：为什么1['toString'].length的输出结果为1？-CSDN博客

本文链接：https://blog.csdn.net/qq_30811721/article/details/134389793

122期

1. 为什么1['toString'].length的输出结果为1？

2. 如何迁移仓库，同时保留原有的提交记录和分支？

3. NodeJs中require查找文件的策略是什么？

上面问题的答案会在第二天的公众号(程序员每日三问)推文中公布

也可以小程序刷题，已收录500+面试题及答案

121期问题及答案

1. SSR是什么？vue开发的应用如何实现ssr？

SSR（Server-Side Rendering，服务器端渲染）是一种将页面的初始渲染工作从客户端移至服务器端的技术。传统的单页面应用（SPA）通常在浏览器中通过 JavaScript 运行，由浏览器动态生成和渲染页面内容。相比之下，SSR 在服务器端生成完整的 HTML 页面，然后将其发送给客户端。这样，用户在加载页面时就能够获得完整的渲染内容，而不需要等待 JavaScript 的下载和执行。

在 Vue 中，实现 SSR 有两个主要的方面：Vue.js 本身提供了一套专门用于服务器端渲染的解决方案，同时你的应用代码也需要进行相应的调整。

以下是一般性的步骤，用于在 Vue 中实现 SSR：

安装 Vue SSR 插件： 首先，你需要安装 Vue SSR 的插件。你可以使用 Vue CLI 创建一个 SSR 项目，或者将 SSR 添加到现有的 Vue 项目中。
```
vue create my-ssr-app
```
或者，如果是已有项目，可以通过 Vue CLI 插件添加 SSR：
```
vue add ssr
```
调整项目结构： SSR 需要不同的项目结构。在 SSR 项目中，通常会有一个 src 目录和一个 server 目录，其中 src 包含共享的客户端和服务器端代码，而 server 包含服务器端独有的代码。

创建服务器入口文件： 在 server 目录中创建一个入口文件，通常是 server.js，用于启动服务器和处理 SSR。

const express = require('express');
const { createBundleRenderer } = require('vue-server-renderer');
const server = express();
const renderer = createBundleRenderer(/*...*/);

server.get('*', (req, res) => {
  renderer.renderToString({ url: req.url }, (err, html) => {
    res.send(html);
  });
});

server.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

这只是一个简单的示例，实际上你可能需要更多的配置，比如处理静态资源、路由等。

调整客户端代码： 在客户端代码中，你可能需要处理一些生命周期钩子，因为在 SSR 中，一些只在客户端生效的生命周期钩子（例如 mounted）在服务器端是不会执行的。
```
// 通常需要在组件中加入以下检测逻辑
if (typeof window === 'undefined') {
  // 在服务器端运行，可以进行服务器端特定的逻辑
} else {
  // 在客户端运行
}
```
构建和启动： 最后，你需要使用构建工具（通常是 Webpack）来构建服务器和客户端的 bundle，并启动服务器。
```
npm run build
npm run start
```

这只是一个基本的概述，实际上 SSR 还涉及到更多的内容，比如数据预取、状态管理、路由等

2. html页面DOCTYPE有什么用？

DOCTYPE（Document Type Definition）是一种文档类型定义，用于告知浏览器当前文档使用哪个 HTML 或 XHTML 规范。DOCTYPE声明位于 HTML 文档的最前面，紧随在<html>标签之前。

主要用途包括：

版本定义： DOCTYPE声明指定了 HTML 文档所使用的 HTML 版本。这有助于浏览器正确地解析和渲染文档，因为不同版本的 HTML 语法和规则可能有所不同。
渲染模式切换： DOCTYPE声明还影响浏览器的渲染模式。不同的文档类型可能触发不同的渲染模式，例如标准模式（standards mode）和怪异模式（quirks mode）。标准模式会更严格地遵循规范，而怪异模式可能会兼容一些老旧的浏览器行为。

一个典型的 DOCTYPE 声明看起来像下面这样：

<!DOCTYPE html>

这个声明表示使用 HTML5 规范，因为 HTML5 不再基于 SGML（Standard Generalized Markup Language），所以相对于之前的 HTML 版本，它的 DOCTYPE 声明更为简洁。在 HTML5 中，DOCTYPE声明不再是一个引用外部 DTD（Document Type Definition）的链接，而是直接告诉浏览器使用 HTML5 规范。

3. 什么是类数组？

类数组是一个拥有数值键和 length 属性的对象，但它不具备数组对象的所有方法和属性。典型的类数组对象包括函数的 arguments 对象、DOM 元素集合（如 document.getElementsByTagName 返回的 NodeList）、字符串等。

区别：

方法和属性： 类数组对象缺少数组对象的一些方法和属性，例如 push、pop、slice 等。它们通常只有 length 属性和通过数值键访问的元素。
原型链： 类数组对象的原型链上通常是 Object，而数组对象的原型链上是 Array。这导致类数组对象不能直接调用数组的方法，因为这些方法并不存在于它们的原型链上。
数组方法的可用性： 由于缺少数组方法，类数组对象无法直接使用数组的方法，例如 forEach、map、filter 等。

转换方法：

Array.from： ES6 中引入了 Array.from 方法，它可以将类数组对象或可迭代对象转换为真正的数组。

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const array = Array.from(arrayLike);
console.log(array); // ['a', 'b', 'c']

Array.prototype.slice.call： 使用 slice 方法可以将类数组对象转换为数组。

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const array = Array.prototype.slice.call(arrayLike);
console.log(array); // ['a', 'b', 'c']

Spread 操作符： 在支持 Spread 操作符的环境中，可以使用 Spread 操作符进行转换。

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const array = [...arrayLike];
console.log(array); // ['a', 'b', 'c']

选择合适的方法取决于你的项目环境和个人偏好。在现代 JavaScript 应用中，推荐使用 Array.from 或 Spread 操作符。

我要提问

如果你遇到又去的面试题，或者有想知道的前端面试题，可以在下面的小程序提问，收到问题后会在第一时间为你解答。

我要出题

学习不打烊，充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题，每天坚持花20分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。