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是声明变量的主要方式。它具有函数作用域，可以被重复声明，而且在变量声明之前就可以访问到（变量提升）。

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

  3. const：const也是在ES6中引入的，它用于声明常量，即一旦赋值就不能再被修改的变量。与let一样，const也具有块级作用域。

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

3、箭头函数 VS 普通函数 ​

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

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

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

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

  2. this 的绑定： 箭头函数没有自己的 this，它会捕获外层函数的 this 值。而普通函数的 this 值是在运行时动态确定的，取决于函数的调用方式（比如通过 call、apply 或者作为对象的方法调用等）。

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

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

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

4、ES6新增方法 ​

见 技术-ES6

5、模块化 VS CommonJS ​

  1. 语法风格

    • ES6模块化：使用import和export关键字。例如，在一个ES6模块文件math.js中，可以这样导出一个函数：

      javascript
      export function add(a, b) {
  return a + b;
}

      然后在另一个文件中使用import引入：

      javascript
      import { add } from './math.js';
console.log(add(1, 2));

    • CommonJS规范：主要使用require()函数来引入模块，使用module.exports或exports来导出模块。例如，在math.js文件中：

      javascript
      function add(a, b) {
  return a + b;
}
module.exports = {
  add: add
};

      在另一个文件中引入：

      javascript
      const math = require('./math.js');
console.log(math.add(1, 2));

  2. 加载时机

    • ES6模块化：是静态的，在编译时就能确定模块的依赖关系，并且import命令会被提升到模块的顶部，首先执行。
    • CommonJS规范：是动态加载的，模块是在运行时加载，require()可以放在代码的任何位置，只有在执行到require()语句时才会加载对应的模块。

  3. 浏览器支持情况

    • ES6模块化：现代浏览器原生支持ES6模块，但是在一些旧版本浏览器中需要使用工具（如Babel等）进行转译才能使用。例如，可以在HTML文件中使用type="module"属性来加载ES6模块：
      html
      <script type="module">
  import { add } from './math.js';
  console.log(add(1, 2));
</script>
    • CommonJS规范：主要用于服务器端的Node.js环境，浏览器端一般不能直接使用。

二、HTTP ​

1、GET请求 VS POST请求 ​

GET和POST是HTTP协议中两种常用的请求方法，它们的主要区别如下：

  1. 请求目的：

    • GET：用于请求数据，从服务器获取信息，通常用于查询操作。
    • POST：用于提交数据，向服务器发送数据，通常用于表单提交或上传文件。

  2. 数据传输方式：

    • GET：数据通过URL传递，参数附加在URL后面，格式为?key=value&key2=value2，有长度限制（一般为2048个字符）。
    • POST：数据通过请求体（body）传递，没有长度限制，适合传输大量数据。

  3. 安全性：

    • GET：数据直接暴露在URL中，不适合传递敏感信息。
    • POST：数据不会显示在URL中，相对更安全，但并非完全安全（可以通过加密如HTTPS来提高安全性）。

  4. 幂等性：

    • GET：GET请求是幂等的，即多次请求相同的资源，结果是相同的，不会改变服务器状态。
    • POST：POST请求不是幂等的，每次请求可能都会导致服务器状态的变化（如数据的增加、更新等）。

总结来说，GET适合获取数据，POST适合提交数据，POST相对于GET更适合处理敏感信息和大数据量。

2、HTTP VS HTTPS ​

HTTP和HTTPS的主要区别如下：

  1. 安全性：

    • HTTP（超文本传输协议）：是无加密的协议，数据在传输过程中是明文的，容易被中间人攻击或窃听。
    • HTTPS（安全超文本传输协议）：在HTTP的基础上加入了SSL/TLS协议进行加密，确保数据传输的安全性，防止被窃听和篡改。

  2. 端口号：

    • HTTP：默认使用端口 80。
    • HTTPS：默认使用端口 443。

  3. 身份验证：

    • HTTP：没有身份验证机制，无法验证服务器的真实性。
    • HTTPS：通过SSL证书验证服务器的身份，避免伪造网站。

  4. 性能：

    • HTTP：由于没有加密和解密操作，相对较快。
    • HTTPS：需要进行加密和解密操作，因此相对较慢，但随着硬件性能的提升，速度差距已经不明显。

总结：HTTPS通过加密和身份验证提高了数据传输的安全性，是保护用户隐私和防止信息泄露的必要手段，现如今已成为互联网应用的标准。

3、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：服务器充当网关或代理时，从上游服务器接收到无效响应。

4、URL有哪些组成部分 ​

URL（统一资源定位符）由以下几个部分组成：

  1. 协议（Scheme）：指定访问资源所使用的协议，常见的有http、https、ftp等。例如：http://、https://。

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

  3. 端口号（Port）（可选）：指定服务器的端口，若省略则使用默认端口（HTTP为80，HTTPS为443）。例如：:8080。

  4. 路径（Path）：指定资源在服务器上的具体位置。例如：/path/to/resource。

  5. 查询参数（Query）（可选）：用于传递额外的数据，通常以?开始，多个参数用&分隔。例如：?key=value&name=test。

  6. 锚点（Fragment）（可选）：指定页面内的某个位置，通常以#开始。例如：#section1。

  • 例子：
https://www.example.com:8080/path/to/resource?key=value#section1
  • 协议：https
  • 主机名：www.example.com
  • 端口号：8080
  • 路径：/path/to/resource
  • 查询参数：key=value
  • 锚点：#section1

5、跨域问题解决 ​

跨域问题通常是指浏览器的同源策略（Same-Origin Policy）限制了不同源（协议、域名、端口）之间的资源共享。常见的跨域解决方案有以下几种：

  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回调函数。

  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服务器地址。你可以根据自己的需要进行相应的修改。

6、从输入URL到看到页面发生的全过程 ​

从输入URL到看到页面的全过程简要如下：

  1. 输入URL：用户在浏览器地址栏输入URL（如https://www.example.com）。

  2. DNS解析：浏览器通过DNS解析域名（如www.example.com）为IP地址（如192.0.2.1）。

  3. 建立TCP连接：浏览器与服务器通过TCP协议建立连接，通常是通过三次握手（SYN、SYN-ACK、ACK）。

  4. 发送HTTP请求：浏览器通过已建立的TCP连接向服务器发送HTTP请求（GET、POST等），请求资源（如HTML页面）。

  5. 服务器处理请求：服务器接收到请求，处理后返回响应数据（如HTML、CSS、JS文件等）。

  6. 浏览器接收响应：浏览器接收到服务器的HTTP响应，解析HTML、CSS、JS等资源。

  7. 页面渲染：

    • HTML解析：浏览器根据HTML结构构建DOM（Document Object Model）树。
    • CSS解析：浏览器解析CSS，构建CSSOM（CSS Object Model）树。
    • JavaScript解析：浏览器执行JS代码，可能修改DOM或CSSOM。

  8. 页面展示：浏览器通过渲染引擎将DOM树和CSSOM树合成渲染树，绘制页面并展示给用户。

  9. 资源加载：如果HTML中有外部资源（如图片、字体、视频等），浏览器会继续发起请求加载这些资源。

  10. 页面交互：用户可以与页面交互，浏览器会根据用户的操作（如点击、滚动）动态更新页面。

整个过程包含网络请求、数据传输、资源解析和渲染，最终呈现出用户所看到的页面。

7、对 WebSocket 的理解 ​

WebSocket是一种网络通信协议，提供了全双工、持久化的通信连接，允许客户端和服务器之间进行实时双向数据传输。与传统的HTTP请求-响应模式不同，WebSocket连接在建立后保持打开状态，允许双向实时通信，适用于需要频繁更新的应用场景，如在线聊天、实时通知、股票行情等。

主要特点：

  1. 全双工通信：客户端和服务器可以同时发送和接收数据。
  2. 持久化连接：连接建立后不会关闭，可以持续传输数据，避免频繁建立和关闭连接的开销。
  3. 低延迟：数据传输延迟较低，适合实时性要求高的应用。
  4. 节省资源：由于保持长连接，减少了频繁的HTTP请求和响应，提高了效率。

使用场景：

  • 实时聊天应用
  • 大屏实时数据
  • 实时股票和天气更新
  • 实时通知和推送

WebSocket通常通过ws://（非加密）或wss://（加密）协议进行连接。

Copyright © 2024-2026 Panda工作室