PandaDoc

Appearance

一、ES6 ​

1、Es6有哪些新特性 ​

ECMAScript 2015（ES6）是 JavaScript 的一个重要版本，引入了许多新特性和语言改进，以增强 JavaScript 的功能和可读性。以下是 ES6 中的一些主要新特性：

  1. let 和 const 声明：引入了块级作用域的 let 和 const，取代了 var，提供更好的变量作用域控制。

  2. 箭头函数：引入了箭头函数 () => {}，简化了函数的声明和上下文绑定。

  3. 模板字符串：通过反引号 `` 以及 ${} 语法，使字符串拼接更加方便，支持多行字符串。

  4. 解构赋值：允许从对象或数组中提取值并赋给变量，提高了代码的可读性。

  5. 展开运算符：通过 ... 运算符，可以将数组、对象等展开成单独的元素。

  6. 模块化：引入了 import 和 export，使得模块化编程更加规范和可维护。

  7. Promise：引入了 Promise 对象，用于更容易地进行异步操作的管理和处理。

  8. 新的集合类型：引入了 Map、Set 等新的集合类型，提供了更多的数据结构选项。

  9. Symbol：引入了符号（Symbol）数据类型，用于创建对象唯一的属性键。

这些新特性丰富了 JavaScript 的功能，提高了代码的可读性和可维护性，使得 JavaScript 在各种应用中更加强大和灵活。 ES6 是 JavaScript 发展历程中的一大进步，也为后续版本的 ECMAScript 奠定了基础。

2、let、const、var有什么区别 ​

在JavaScript中，let、const和var是用来声明变量的关键字，它们有以下区别：

  1. var：在ES5及之前的版本中，var是声明变量的主要方式。它具有函数作用域，这意味着使用var声明的变量可以在函数内部的任何地方访问，而不仅仅是在声明它的代码块内部。var声明的变量可以被重复声明，而且在变量声明之前就可以访问到（变量提升）。

  2. let：在ES6（ECMAScript 2015）中引入了let关键字，它提供了块级作用域的变量声明。这意味着使用let声明的变量只在其被声明的代码块（例如，大括号{}内）内可见。而且，let声明的变量不允许被重复声明，但可以修改其值。

  3. const：const也是在ES6中引入的，它用于声明常量，即一旦赋值就不能再被修改的变量。与let一样，const也具有块级作用域。声明的同时必须进行初始化，否则会产生语法错误。虽然无法修改const声明的变量的值，但如果它是一个对象，你可以修改对象的属性。

在现代 JavaScript 中，推荐使用 let 和 const 来声明变量，以提供更好的作用域控制和代码可维护性。使用 const 来声明不会被修改的变量，以确保代码的不变性。

3、箭头函数与普通函数的区别 ​

箭头函数和普通函数在语法和行为上有几个重要的区别：

  1. 语法简洁性： 箭头函数的语法更为简洁，通常只需要一个表达式即可完成函数体，而不需要使用 return 关键字。例如：

    javascript
    // 普通函数
function add(a, b) {
    return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

  2. this 的绑定： 箭头函数没有自己的 this，它会捕获外层函数的 this 值。而普通函数的 this 值是在运行时动态确定的，取决于函数的调用方式（比如通过 call、apply 或者作为对象的方法调用等）。这意味着箭头函数不能用作构造函数，也不能使用 call、apply 或 bind 来改变 this 的指向。

  3. 不能作为构造函数： 箭头函数不能被用作构造函数，不能通过 new 关键字来调用。

  4. 没有 arguments 对象： 箭头函数没有自己的 arguments 对象，但可以访问外层函数的 arguments 对象。

总的来说，箭头函数更适合用于简单的、短小的函数，尤其是在需要绑定外部 this 上下文时。而普通函数则更为灵活，适用于更多的场景。

3、新增字符串、数组及对象方法 ​

见 技术-ES6

4、Es6模块化和commonjs规范有什么区别 ​

ES6 模块化和 CommonJS 规范是 JavaScript 中两种不同的模块化方案，它们有以下主要区别：

  1. 语法差异：

    • ES6 模块化使用 import 和 export 关键字来导入和导出模块。
    • CommonJS 使用 require() 函数来导入模块，使用 module.exports 或 exports 来导出模块。

  2. 编译时与运行时：

    • ES6 模块是在编译时静态解析的，这意味着模块的依赖关系在代码执行前就已经确定，从而使得编译器能够进行优化。
    • CommonJS 是在运行时动态加载的，模块的依赖关系在代码执行时才会被解析和加载。

  3. 浏览器兼容性：

    • ES6 模块在现代浏览器中得到了广泛支持，而且可以通过工具（如 webpack、Rollup 等）进行打包和转译，以支持老版本浏览器。
    • CommonJS 主要用于服务器端，Node.js 环境中得到了广泛应用，但在浏览器中需要借助工具进行转译或者使用特定的运行时（如 Browserify）来实现。

二、HTTP ​

1、当在浏览器中输入 Google.com 并且按下回车之后发生了什么？ ​

当在浏览器中输入 "Google.com" 并按下回车键后，发生以下主要步骤：

  1. 域名解析（DNS解析）：

    • 浏览器将 "Google.com" 发送给DNS解析器，DNS解析器查找 "Google.com" 的IP地址。

  2. 建立TCP连接：

    • 一旦获得 "Google.com" 的IP地址，浏览器将尝试建立与该IP地址的TCP连接。

  3. 发起HTTP请求：

    • 浏览器通过TCP连接发送一个HTTP请求到 "Google.com" 的服务器。

  4. 服务器响应：

    • Google的服务器接收到请求，处理它，并返回一个HTTP响应，通常是一个HTML页面。

  5. 接收和渲染响应：

    • 浏览器接收到来自服务器的HTML响应，开始解析和渲染页面。
    • 浏览器同时获取和加载页面中引用的其他资源，如CSS、JavaScript、图像等。

  6. 页面加载完成：

    • 一旦页面的所有资源都被加载和渲染，页面加载完成，用户可以与页面进行交互。

这些步骤描述了在浏览器中输入 "Google.com" 并按下回车后的主要事件。

2、http常用的状态码有哪些 ​

HTTP状态码是一种用来表示HTTP请求的结果的三位数字代码。这些状态码通常由服务器返回给客户端，以指示请求的成功、失败或其他情况。以下是一些常用的HTTP状态码：

  1. 2xx (成功状态码):

    • 200 OK：请求成功，服务器已成功处理请求。

  2. 3xx (重定向状态码):

    • 301 Moved Permanently：资源已永久移动到新位置，客户端应更新链接。
    • 302 Found：资源临时移动到新位置，客户端应继续使用原始链接。

  3. 4xx (客户端错误状态码):

    • 401 Unauthorized：需要身份验证或授权，通常需要提供凭证。
    • 403 Forbidden：服务器拒绝了请求，通常是因为权限问题。
    • 404 Not Found：请求的资源不存在。

  4. 5xx (服务器错误状态码):

    • 500 Internal Server Error：服务器遇到意外错误。
    • 502 Bad Gateway：服务器充当网关或代理时，从上游服务器接收到无效响应。

这些状态码用于指示HTTP请求的结果，帮助客户端和服务器之间进行通信和故障排除。不同的状态码传达了不同的信息，以便更好地理解请求的处理情况。

3、HTTP和HTTPS的区别是什么 ​

HTTP（Hypertext Transfer Protocol）和HTTPS（HTTP Secure）是用于在客户端和服务器之间传输数据的协议，它们之间的主要区别在于安全性：

  1. 安全性：

    • HTTP 是不安全的协议，数据在传输过程中是以明文形式传输的，因此不建议在敏感信息传输时使用纯HTTP。
    • HTTPS 是HTTP的安全版本，通过使用SSL/TLS协议对数据进行加密和认证，确保数据在传输过程中是加密的、完整的，并且对服务器进行了身份验证，防止中间人攻击。

  2. 端口号：

    • HTTP 使用标准的HTTP协议，通常运行在端口80上。
    • HTTPS 使用HTTP协议，但在传输层上增加了SSL/TLS加密层，通常运行在端口443上。

  3. 证书：

    • HTTP 不需要SSL/TLS证书，因为它不提供加密和身份验证。
    • HTTPS 需要服务器获得有效的SSL/TLS证书，这由可信的证书颁发机构（CA）颁发。证书用于验证服务器的身份，并确保数据加密。

  4. 性能：

    • 由于HTTPS需要加密和解密数据，因此通常比纯HTTP稍微慢一些。然而，现代的硬件和加密算法已经大大提高了HTTPS的性能，对大多数应用程序来说，性能差异通常可以忽略不计。

  5. SEO：

    • 搜索引擎通常更喜欢HTTPS网站，因为它们提供了更安全的用户体验。使用HTTPS可以为网站的搜索引擎排名提供一定的优势。

总的来说，HTTPS比HTTP更安全，因此在大多数情况下，建议使用HTTPS来保护用户数据的安全性。现代Web应用程序和网站通常都采用HTTPS，以确保用户的隐私和安全。

4、GET和POST请求的区别是什么 ​

GET 和 POST 是 HTTP 协议中最常用的两种请求方法，它们的主要区别在于以下几个方面：

  1. 语义：

    • GET：用于向服务器请求获取特定资源，通常用于数据的读取操作，例如请求网页、图片或者其他资源。
    • POST：用于向服务器提交数据，通常用于数据的提交和修改操作，例如提交表单、上传文件等。

  2. 数据传输方式：

    • GET：通过 URL 的查询字符串传递数据，数据会附加在 URL 的末尾，可见且有长度限制。
    • POST：通过请求体（Request Body）传递数据，数据被包含在请求体中，对传输的数据量没有限制，也不会暴露在 URL 中。

  3. 安全性：

    • GET 请求的数据在 URL 中可见，因此不适合传输敏感信息，例如密码等。
    • POST 请求的数据不会暴露在 URL 中，相对于 GET 更安全，适合传输敏感信息。

  4. 幂等性：

    • GET 请求是幂等的，即多次请求同一个资源，服务器的状态不会发生改变，不会产生副作用。
    • POST 请求不是幂等的，多次请求同一个资源可能会对服务器产生不同的影响，可能会产生副作用，例如向数据库中插入数据。

  5. 缓存：

    • GET 请求可以被缓存，浏览器可以缓存响应，提高性能。
    • POST 请求不会被缓存。

总的来说，GET 主要用于获取资源，而 POST 主要用于提交数据。在选择使用 GET 还是 POST 时，需要根据具体的业务需求、安全性要求以及数据的大小等因素进行权衡。

5、URL有哪些组成部分 ​

URL（Uniform Resource Locator）包含以下组成部分：

  1. 协议（Protocol）：指定访问资源所使用的协议或规则，常见的协议包括HTTP、HTTPS、FTP、SMTP等。

  2. 主机名（Host）：指定资源所在的服务器的域名或IP地址。例如，www.example.com 或 192.168.1.1。

  3. 端口（Port）：指定与服务器建立连接时要使用的端口号。如果未明确指定，默认端口是协议的标准端口（例如，HTTP的默认端口是80，HTTPS的默认端口是443）。

  4. 路径（Path）：指定服务器上资源的路径或目录结构。例如，/folder/file.html。

  5. 查询参数（Query Parameters）：包含在URL中，以问号（?）开头，用于传递参数和值，多个参数之间使用"&"分隔。例如，?id=123&name=example。

  6. 片段标识符（Fragment Identifier）：包含在URL中，以井号（#）开头，用于标识页面内的特定锚点或位置。例如，#section1。

综合起来，一个典型的URL的格式如下：

协议://主机名[:端口]/路径?查询参数#片段标识符

https://gfh_he.cn/vite-doc?id=1#_5、url有哪些组成部分

不是所有URL都包含这些组成部分，具体的URL结构取决于访问的资源和使用的协议。

5、跨域问题解决 ​

跨域（Cross-Origin）是指在web开发中，当一个网页的源（Origin）与另一个网页的源不同（通常是指不同的域名、协议或端口），浏览器会出于安全考虑限制页面中对另一个源的资源访问或JavaScript交互。这是为了防止潜在的安全漏洞，例如跨站点请求伪造（CSRF）和跨站脚本攻击（XSS）。

要解决跨域问题，你可以采用以下几种方法：

  1. CORS（跨源资源共享）： 这是最常用的解决跨域问题的方法。通过在服务器端配置响应头，允许特定的源（域名、协议、端口）访问资源。服务器可以设置如下响应头来启用CORS：

    http
    Access-Control-Allow-Origin: http://example.com

    这将允许来自http://example.com域的请求访问资源。你还可以配置其他CORS头，如允许的HTTP方法、允许的自定义标头等。

  2. JSONP（JSON with Padding）： JSONP是一种通过动态创建<script>元素从其他域请求数据的技术。它只适用于GET请求，并且需要服务器支持JSONP回调函数。但要注意，JSONP存在一些安全风险，因为它要求你信任提供JSONP数据的服务器。

  3. 代理服务器： 你可以在同一域中设置一个代理服务器，用于转发来自不同域的请求。前端代码请求代理服务器，代理服务器再将请求发送到目标服务器，并将响应返回给前端。这种方法可以绕过浏览器的跨域限制，但需要额外的服务器资源。

    在vue项目中，找到 vue.config.js 文件，添加以下配置来设置代理服务器：

javascript
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your-api-domain.com',  // 指定你的后端API服务器地址
        changeOrigin: true,  // 允许跨域
        pathRewrite: {
          '^/api': ''  // 如果你的API地址不是以 '/api' 开头，可以使用这个选项重写请求路径
        }
      }
    }
  }
};

在这个配置中，'/api' 是你在前端请求的接口路径，'http://your-api-domain.com' 是你的后端API服务器地址。你可以根据自己的需要进行相应的修改。

选择哪种解决方案取决于你的具体需求和架构。CORS通常是最常用的解决跨域问题的方法，因为它安全且易于配置。不过，根据你的情况，其他方法也可能更适合。

6、TCP和UDP的区别是什么 ​

TCP（Transmission Control Protocol）和UDP（User Datagram Protocol）是两种不同的传输层协议，它们之间的主要区别包括：

  1. 连接导向性：

    • TCP 是面向连接的协议，通信双方在数据传输前需要先建立连接，然后再传输数据，数据传输完成后要进行连接释放。
    • UDP 是无连接的协议，通信双方之间直接传输数据，不需要先建立连接，也不需要断开连接。

  2. 可靠性：

    • TCP 提供可靠的数据传输，通过序号、确认、重传等机制来保证数据的完整性和顺序性，确保数据能够可靠地到达目的地。
    • UDP 不提供数据的可靠性，数据可能会丢失或者乱序，不提供重传机制，适用于一些实时性要求较高的场景，如音频、视频等。

  3. 数据流模式：

    • TCP 是面向字节流的协议，数据按照字节流的形式进行传输，保证了数据的完整性和顺序性，但可能会出现粘包和拆包的问题。
    • UDP 是面向报文的协议，数据以报文的形式进行传输，每个报文都是独立的，不会粘连在一起，也不会拆分，但是没有保证顺序和完整性。

  4. 头部开销：

    • TCP 的头部开销比较大，包含了序号、确认、窗口大小等信息，导致数据包的大小比实际数据要大，适用于可靠性要求较高的场景。
    • UDP 的头部开销较小，只包含了源端口、目的端口、长度、校验和等基本信息，使得数据包的大小较小，适用于实时性要求较高的场景。

总的来说，TCP 提供了可靠的、面向连接的数据传输服务，适用于对数据完整性和顺序性要求较高的应用场景；而UDP 提供了简单的、无连接的数据传输服务，适用于实时性要求较高、对数据可靠性要求较低的应用场景。

7、说说对 WebSocket 的理解 ​

WebSocket是一种在客户端和服务器之间进行双向通信的协议，它允许客户端和服务器之间实时地交换数据。WebSocket协议与传统的HTTP请求不同，它建立了一条持久的连接，使得双方可以随时发送数据，而不需要不断地建立新的HTTP连接。WebSocket通常用于实时聊天、实时数据更新、在线游戏等需要实时通信的应用。

在Vue项目中，你可以使用WebSocket来实现实时通信的功能，以下是一些基本的步骤来在Vue项目中使用WebSocket：

  1. 安装WebSocket库：首先，你需要在Vue项目中安装WebSocket库。常见的WebSocket库包括 vue-native-websocket、vue-socket.io 等，你可以根据自己的需求选择一个合适的库并使用npm或yarn进行安装。例如，使用npm安装vue-native-websocket：
bash
npm install vue-native-websocket --save
  1. 在Vue应用中引入WebSocket库：在Vue应用的入口文件（通常是main.js）中引入WebSocket库，然后配置WebSocket连接。
javascript
import Vue from 'vue'
import VueNativeSock from 'vue-native-websocket'

Vue.use(VueNativeSock, 'ws://your-websocket-server-url', { 
  reconnection: true,  // 是否允许重新连接
  reconnectionAttempts: 5,  // 重新连接的尝试次数
  reconnectionDelay: 3000,  // 重新连接的延迟时间（毫秒）
})
  1. 使用WebSocket：现在你可以在Vue组件中使用WebSocket来进行实时通信。你可以在组件中使用WebSocket的API，例如发送和接收消息。
vue
<template>
  <div>
    <input v-model="message" @keyup.enter="sendMessage" />
    <ul>
      <li v-for="msg in messages" :key="msg.id">{{ msg.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      messages: [],
    }
  },
  methods: {
    sendMessage() {
      // 发送消息到WebSocket服务器
      this.$socket.send(this.message);
      this.message = '';
    },
  },
  mounted() {
    // 监听WebSocket消息
    this.$socket.onmessage = (event) => {
      const data = JSON.parse(event.data);
      this.messages.push(data);
    }
  },
}
</script>

在上面的示例中，我们通过vue-native-websocket库来设置WebSocket连接，并在Vue组件中实现了发送和接收消息的功能。

记得替换 'ws://your-websocket-server-url' 为你的WebSocket服务器的实际地址。

这是一个基本的WebSocket在Vue项目中的使用示例，根据你的具体需求，你可以进一步扩展功能，处理不同类型的消息和事件。

Copyright © 2024-2025 Panda工作室