面试

定义 工厂模式（Factory Pattern）是一种创建型设计模式，它提供了一种创建对象的方式，将对象的创建逻辑与使用逻辑分离。工厂模式有三种变体：简单工厂模式、工厂方法模式和抽象工厂模式。 为什么需要工厂模式 工厂模式要解决的核心问题是：将对象的创建过程与使用过程分离。 问题场景：假设我们正在开发一个网络层，需要创建URLSession对象。 直接使用构造函数创建对象看起来很简单： class NetworkManager { func fetchData(from url: URL) { // 直接创建URLSession let config = URLSessionConfiguration.default config.timeoutIntervalForRequest = 30 config.httpAdditionalHeaders = ["Authorization": "Bearer xxx"] let session = URLSession(configuration: config) session.dataTask(with: url) { data, response, error in // 处理响应... }.resume() } } 这种方式有什么问题？ 创建逻辑与业务逻辑混在一起：fetchData方法既要负责创建session，又要负责发起请求，职责不单一 创建逻辑无法复用：如果另一个方法也需要相同配置的session，只能复制这段创建代码 难以替换实现：如果想在测试时使用Mock的session，或者在不同环境使用不同配置，需要修改业务代码 隐藏了依赖关系：从方法签名看不出这个类依赖URLSession，依赖关系被隐藏在方法内部 工厂模式的解决思路： 工厂模式的核心是：调用方不再自己new对象，而是向工厂"要"对象。 // 工厂负责创建 class URLSessionFactory { static func createDefault() -> URLSession { let config = URLSessionConfiguration.default config.timeoutIntervalForRequest = 30 config.httpAdditionalHeaders = ["Authorization": "Bearer xxx"] return URLSession(configuration: config) } static func createBackground(identifier: String) -> URLSession { let config = URLSessionConfiguration.background(withIdentifier: identifier) return URLSession(configuration: config) } } // 业务代码只负责使用 class NetworkManager { private let session: URLSession init(session: URLSession = URLSessionFactory.createDefault()) { self.session = session } func fetchData(from url: URL) { session.dataTask(with: url) { data, response, error in // 处理响应... }.resume() } } 这样做的好处： ...

在前端开发中，我们经常需要执行各种重复性任务，比如编译代码、启动本地服务器、监听文件变化、运行测试、部署代码等。虽然可以使用不同的工具来完成这些任务，但npm本身提供了一个强大的功能：npm scripts。通过npm scripts，我们可以将这些任务脚本化并集中管理，从而提高开发效率。 本文将专注于如何使用npm scripts自动化前端开发任务，以及它在项目管理中的作用。 什么是npm scripts？ npm scripts是npm提供的一种机制，允许我们在项目的package.json文件中定义一组命令，方便执行各种任务。在package.json文件中，scripts字段可以包含多个脚本，每个脚本都是一个键值对，其中键是脚本的名称，值是实际要执行的命令。例如： { "scripts": { "build": "webpack --config webpack.config.js", "test": "jest" } } 在上面的示例中，定义了两个脚本：build 和 test。可以通过以下方式在命令行中运行这些脚本： npm run build npm run test npm会执行对应的命令，自动帮我们完成编译和测试任务。 为什么使用npm scripts？ 在现代前端开发流程中，自动化任务是不可或缺的，而npm scripts的使用有以下几大优势： 减少对全局依赖的需求：在传统项目中，开发者通常需要全局安装各种命令行工具，如webpack、eslint、babel等。而npm scripts可以直接调用项目的本地依赖，无需全局安装。这确保了不同开发环境中的工具版本一致，减少了版本冲突和兼容性问题。 集中管理任务：npm scripts将所有任务定义集中在package.json文件中，项目中的所有开发人员都可以直观地看到可用的任务列表，无需了解每个工具的详细使用方法。只需运行npm run <task>，便可一键完成常见任务。 支持跨平台执行：npm scripts中的命令可以跨平台使用，在Windows、macOS和Linux系统上表现一致，尤其适合团队协作。 便于组合和链式执行：npm允许通过逻辑操作符来组合脚本，实现复杂任务的自动化执行。例如可以通过&&和||来串联多个任务，使得多个步骤一次完成。 如何定义和使用npm scripts？ 让我们通过具体的示例来看看npm scripts如何自动化前端开发任务。 1. 设置基本的开发任务 假设我们正在开发一个React项目，我们可以在package.json中定义以下基本任务： { "scripts": { "start": "webpack serve --mode development", "build": "webpack --mode production", "test": "jest", "lint": "eslint src/**/*.js" } } 这里的脚本分别执行以下任务： ...

HTTP 基础 HTTP 超文本传输协议 ，应用层协议。主要用于 Web 上传输超媒体文本的底层协议，经常在浏览器和服务器之间传递数据。通信就是以纯文本的形式进行。 HTTP 是无状态 无状态是 HTTP 协议对客户端请求状态没有进行存储，比如每次请求都需要重新登录 HTTP 是无连接 无连接主要是限制每次连接只处理一个请求。每次请求都是客户发起请求，服务端响应请求，然后就断开连接。这期间就是通过三次握手建立连接，四次挥手断开连接。每次请求即便是多次请求并请求同一个资源，服务端都无法判断是否是相同请求，都需要重新响应请求。 所以，为了解决客户端和服务端保持会话连接，通过 cookie 和 session 来记录 http 状态。 HTTP 的其他特点是简单快速，只需传送方法和路径就可以向服务端进行请求；还有支持传输任意类型的数据对象。 HTTPS 基础 https 是 http 的“升级”版本： HTTPS = HTTP+ SSL/TLS SSL 是安全层，TLS 是传输层安全，是SSL 的继承。使用SSL或TLS 可确保传输数据的安全性。 使用 HTTP 可能看到传输数据是： “这是明文信息” 使用 HTTPS 可能看到： “283hd9saj9cdsncihquhs99ndso” HTTPS 传输的不再是文本，而是二进制流，使得传输更高效，且加密处理更加安全。 HTTPS 的工作流程 1、客户端请求 HTTPS 请求并连接到服务器的 443 端口，此过程和请求 HTTP 请求一样，进行三次握手； 2、服务端向客户端发送数字证书，其中包含公钥、证书颁发者、到期日期 现比较流行的加解密码对，即公钥和私钥。公钥用于加密，私钥用于解密。所以服务端会保留私钥，然后发送公钥给客户端。 3、客户端收到证书，会验证证书的有效性。验证通过后会生成一个随机的 pre-master key。再将密钥通过接收到的公钥加密然后发送给服务端 4、服务端接收后使用私钥进行解密得到 pre-master key 5、获得 pre-master key 后，服务器和客户端可以使用主密钥进行通信。 ...

一 前言 React hooks是react16.8 以后，react新增的钩子API，目的是增加代码的可复用性，逻辑性，弥补无状态组件没有生命周期，没有数据管理状态state的缺陷。 本章节将介绍目前 React 提供的所有 hooks ，介绍其功能类型和基本使用方法。 1.1 技术背景 react hooks 解决了什么问题？ 先设想一下，如果没有 Hooks，函数组件能够做的只是接受 Props、渲染 UI ，以及触发父组件传过来的事件。所有的处理逻辑都要在类组件中写，这样会使 class 类组件内部错综复杂，每一个类组件都有一套独特的状态，相互之间不能复用，即便是 React 之前出现过 mixin 等复用方式，但是伴随出 mixin 模式下隐式依赖，代码冲突覆盖等问题，也不能成为 React 的中流砥柱的逻辑复用方案。所以 React 放弃 mixin 这种方式。 类组件是一种面向对象思想的体现，类组件之间的状态会随着功能增强而变得越来越臃肿，代码维护成本也比较高，而且不利于后期 tree shaking。所以有必要做出一套函数组件代替类组件的方案，于是 Hooks 也就理所当然的诞生了。 所以 Hooks 出现本质上原因是： 让函数组件也能做类组件的事，有自己的状态，可以处理一些副作用，能获取 ref ，也能做数据缓存。 解决逻辑复用难的问题。 放弃面向对象编程，拥抱函数式编程。 为什么要使用自定义 Hooks ？ 自定义 hooks 是在 React Hooks 基础上的一个拓展，可以根据业务需求制定满足业务需要的组合 hooks ，更注重的是逻辑单元。通过业务场景不同，到底需要React Hooks 做什么，怎么样把一段逻辑封装起来，做到复用，这是自定义 hooks 产生的初衷。 自定义 hooks 也可以说是 React Hooks 聚合产物，其内部有一个或者多个 React Hooks 组成，用于解决一些复杂逻辑。 ...

我们在JS学习初期或者面试的时候常常会遇到考核变量提升的思考题。比如先来一个简单一点的。 console.log(a); // 这里会打印出什么？ var a = 20; 暂时先不管这个例子，我们先引入一个JavaScript中最基础，但同时也是最重要的一个概念执行上下文（Execution Context）。 每次当控制器转到可执行代码的时候，就会进入一个执行上下文。执行上下文可以理解为当前代码的执行环境，它会形成一个作用域。JavaScript中的运行环境大概包括三种情况。 全局环境：JavaScript代码运行起来会首先进入该环境 函数环境：当函数被调用执行时，会进入当前函数中执行代码 eval（不建议使用，可忽略） 因此在一个JavaScript程序中，必定会产生多个执行上下文，在我的上一篇文章中也有提到，JavaScript引擎会以栈的方式来处理它们，这个栈，我们称其为函数调用栈(call stack)。栈底永远都是全局上下文，而栈顶就是当前正在执行的上下文。 当代码在执行过程中，遇到以上三种情况，都会生成一个执行上下文，放入栈中，而处于栈顶的上下文执行完毕之后，就会自动出栈。为了更加清晰的理解这个过程，根据下面的例子，结合图示给大家展示。 执行上下文可以理解为函数执行的环境，每一个函数执行时，都会给对应的函数创建这样一个执行环境。 var color = 'blue'; function changeColor() { var anotherColor = 'red'; function swapColors() { var tempColor = anotherColor; anotherColor = color; color = tempColor; } swapColors(); } changeColor(); 我们用ECStack来表示处理执行上下文组的堆栈。我们很容易知道，第一步，首先是全局上下文入栈。 全局上下文入栈之后，其中的可执行代码开始执行，直到遇到了changeColor() ，这一句激活函数changeColor创建它自己的执行上下文，因此第二步就是changeColor的执行上下文入栈。 changeColor的上下文入栈之后，控制器开始执行其中的可执行代码，遇到swapColors()之后又激活了一个执行上下文。因此第三步是swapColors的执行上下文入栈。 在swapColors的可执行代码中，再没有遇到其他能生成执行上下文的情况，因此这段代码顺利执行完毕，swapColors的上下文从栈中弹出。 swapColors的执行上下文弹出之后，继续执行changeColor的可执行代码，也没有再遇到其他执行上下文，顺利执行完毕之后弹出。这样，ECStack中就只身下全局上下文了。 全局上下文在浏览器窗口关闭后出栈。 注意：函数中，遇到return能直接终止可执行代码的执行，因此会直接将当前上下文弹出栈。 详细了解了这个过程之后，我们就可以对执行上下文总结一些结论了。 单线程 同步执行，只有栈顶的上下文处于执行中，其他上下文需要等待 全局上下文只有唯一的一个，它在浏览器关闭时出栈 函数的执行上下文的个数没有限制 每次某个函数被调用，就会有个新的执行上下文为其创建，即使是调用的自身函数，也是如此。 为了巩固一下执行上下文的理解，我们再来绘制一个例子的演变过程，这是一个简单的闭包例子。 function f1(){ var n=999; function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999 因为f1中的函数f2在f1的可执行代码中，并没有被调用执行，因此执行f1时，f2不会创建新的上下文，而直到result执行时，才创建了一个新的。具体演变过程如下。 最后留一个简单的例子，大家可以自己脑补一下这个例子在执行过程中执行上下文的变化情况。 var name = "window"; var p = { name: 'Perter', getName: function() { // 利用变量保存的方式保证其访问的是p对象 var self = this; return function() { return self.name; } } } var getName = p.getName(); var _name = getName(); console.log(_name); 常见考点 执行上下文的定义 什么是执行上下文？它在 JavaScript 中有哪些类型？ 执行上下文在代码执行时是如何被创建和销毁的？ 执行上下文的生命周期 执行上下文的创建和执行过程有哪些阶段？（例如，创建阶段和执行阶段） 请描述执行上下文在创建阶段进行的三个步骤：变量对象的创建、作用域链的建立、this 的绑定。 变量对象（Variable Object） 什么是变量对象？它在执行上下文中的作用是什么？ 变量提升是如何与变量对象关联的？在函数声明和变量声明时有何不同？ 作用域链 执行上下文是如何通过作用域链来访问变量的？ 请解释在嵌套函数的情况下，作用域链是如何建立的？ this 绑定 在不同的执行上下文中，this 的值是如何确定的？（例如，全局上下文、函数上下文、箭头函数） 如何解释在不同函数调用方式下 this 的指向差异？ 执行上下文栈 什么是执行上下文栈？它如何管理代码执行的顺序？ JavaScript 引擎如何利用执行上下文栈来实现函数的嵌套调用和返回？ 块级作用域的影响 ES6 中引入的 let 和 const 是如何影响执行上下文的？ 如何解释块级作用域在执行上下文中的特殊处理？ 常见问题与调试 如何通过理解执行上下文来排查变量未定义、this 指向错误等常见问题？ 请解释某个你遇到的实际问题，以及如何通过分析执行上下文来解决它的。

HTML 元素的属性是用于控制元素行为或样式的附加信息。 以下是一些常见的 HTML 属性： 1. 通用属性（Global Attributes） 这些属性几乎可以应用于所有 HTML 元素： id：元素的唯一标识符，用于 JavaScript 或 CSS 选择。 <div id="main"></div> class：为元素指定一个或多个类名，用于 CSS 样式或 JavaScript 操作。 <div class="container header"></div> style：为元素设置内联样式。 <div style="color: red;"></div> title：为元素提供额外信息，当鼠标悬停在元素上时显示。 <button title="Click me!">Click</button> data-*：自定义属性，用于存储私有数据，以 data- 为前缀，可以通过 JavaScript 访问。 <div data-user-id="123"></div> 2. 事件属性（Event Attributes） 这些属性用于处理元素上的事件： onclick：定义单击事件处理函数。 <button onclick="alert('Clicked!')">Click me</button> onmouseover：鼠标悬停时触发的事件。 <div onmouseover="console.log('Mouse over')"></div> onkeydown：按下键盘时触发的事件。 <input type="text" onkeydown="handleKeyDown(event)"> 3. 表单相关属性 type：定义输入框类型，例如 text、password、email 等。 <input type="text"> name：定义表单元素的名称，用于表单提交。 <input type="text" name="username"> value：定义表单元素的默认值。 <input type="text" value="Default value"> placeholder：为输入框提供占位符文本，提示用户输入。 <input type="text" placeholder="Enter your name"> disabled：禁用输入元素，使其不可交互。 <input type="text" disabled> required：标记表单元素为必填项。 <input type="text" required> 4. 链接和资源加载属性 href：用于指定超链接的目标 URL。 <a href="https://example.com">Go to example.com</a> src：指定图像、脚本或其他资源的路径。 <img src="image.jpg" alt="Image description"> alt：为图像提供替代文本，图像无法加载时显示。 <img src="image.jpg" alt="Alternative text"> rel：指定链接与目标文档的关系，常用于 link 标签和 a 标签。 <link rel="stylesheet" href="style.css"> target：定义链接的打开方式，常用值包括 _self（当前窗口）和 _blank（新窗口）。 <a href="https://example.com" target="_blank">Open in new tab</a> 5. 多媒体属性 controls：为 <audio> 或 <video> 元素添加播放控件。 <video src="video.mp4" controls></video> autoplay：自动播放音频或视频。 <audio src="audio.mp3" autoplay></audio> loop：音频或视频播放完后重新开始播放。 <video src="video.mp4" loop></video> muted：自动静音视频或音频。 <audio src="audio.mp3" muted></audio> 6. 图像和媒体相关属性 width 和 height：定义图像或视频的宽度和高度。 <img src="image.jpg" width="200" height="100"> 7. iframe 属性 src：定义嵌入的网页 URL。 <iframe src="https://example.com"></iframe> sandbox：为嵌入内容提供更严格的限制，控制 iframe 的行为。 <iframe src="https://example.com" sandbox></iframe> 8. 语义化属性 role：为屏幕阅读器和辅助技术提供语义化描述。 <div role="navigation"></div> 9. 布局和可访问性属性 hidden：隐藏元素，元素不会显示在页面中。 <div hidden>This content is hidden</div> tabindex：定义元素的 tab 键导航顺序。 <button tabindex="1">First</button> <button tabindex="2">Second</button> 常见考点 1. 全局属性（Global Attributes） class：用于给元素指定样式类，如何使用多个类？有哪些常见用法？ id：唯一标识元素，id 的作用和注意事项。 style：内联样式的作用及其优先级。 title：为元素提供额外信息（鼠标悬停时显示）。 data- 属性*：自定义数据属性，如何在 JavaScript 中访问 data-* 属性？ 2. 事件属性（Event Attributes） onclick、onmouseover 等事件处理属性。 如何使用事件属性进行事件绑定？ 事件属性和 JavaScript 事件监听器（addEventListener）的区别和应用场景。 3. 表单属性 name：用于提交表单数据时作为键名。 action：表单提交的目标 URL。 method：表单的提交方式（GET 或 POST）。 autocomplete：是否启用表单自动填充。 required、pattern、min/max 等 HTML5 校验属性。 4. 输入控件相关属性 value：为输入控件设置默认值。 placeholder：为输入框提供提示文本。 disabled：禁用输入控件。 readonly：只读属性，控件不能被修改。 maxlength/minlength：输入字符长度的限制。 accept：文件上传时，限制允许的文件类型（适用于 <input type="file">）。 5. 媒体元素属性 src：媒体文件的路径（适用于 <img>、<audio>、<video> 等）。 alt：图片无法加载时显示的替代文本。 controls：是否为媒体文件显示默认控制条。 autoplay：媒体文件是否自动播放。 loop：媒体文件是否循环播放。 muted：媒体文件是否静音。 6. 超链接相关属性 href：链接目标的 URL。 target：定义链接打开的方式（如 _blank 打开新窗口）。 download：允许下载链接资源，而不是导航到资源。 rel：定义链接与当前文档的关系（如 nofollow、noopener）。 7. iframe 属性 src：嵌入的文档或网页的 URL。 sandbox：启用或禁用特定行为（如禁止脚本、表单提交等）。 allow：控制 iframe 内的权限（如允许摄像头、麦克风访问）。 8. 图像和图形属性 srcset：为不同设备提供不同分辨率的图像资源。 sizes：配合 srcset，定义不同视口下图像显示的尺寸。 usemap：指定图片使用的图像映射。 height/width：定义图片或其他元素的高度和宽度。 9. meta 标签属性 charset：指定文档的字符编码（如 UTF-8）。 name 和 content：为文档提供元信息（如 description, viewport）。 http-equiv：配合 content，定义 HTTP 头信息（如 refresh, Content-Type）。 10. 无障碍相关属性 aria- 属性*：为无障碍工具（如屏幕阅读器）提供更多语义信息。 role：指定元素的功能角色，增强无障碍性。 11. iframe 和图片的懒加载 loading=“lazy”：为图片和 iframe 启用懒加载。 12. 语言和方向属性 lang：指定元素或页面的语言（如 lang="en"）。 dir：指定文本的书写方向（如 ltr 左到右，rtl 右到左）。

什么是 font 属性？ 在CSS中， font 属性是一个简写属性，用于设置字体的多个相关属性，包括字体大小、字体样式、字体粗细、字体系列等。使用 font 属性可以方便地在一个声明中设置多个字体相关的样式。 font 属性的语法 font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family]; 各个属性的详细说明 font-style：设置字体的样式。 取值： normal：正常字体（默认值）。 italic：斜体字。 oblique：倾斜字体。 font-variant：设置字体的变体。 取值： normal：正常（默认值）。 small-caps：小型大写字母。 font-weight：设置字体的粗细。 取值： normal：正常粗细（默认值）。 bold：加粗。 bolder：比父元素更粗。 lighter：比父元素更细。 数值：可以使用 100 到 900 的数值，100 为最细，900 为最粗。 font-size：设置字体的大小。 取值： 可以使用绝对单位（如 px、 pt）或相对单位（如 em、 rem、 %）。 line-height：设置行高。 取值： 可以使用数值、单位（如 px、 em）或百分比。 font-family：设置字体系列。 取值： 可以指定多个字体名称，以逗号分隔，浏览器将使用第一个可用的字体。 例如： "Arial", "Helvetica", sans-serif。 使用 font 属性的注意事项 font 属性必须按照特定的顺序书写，尤其是 font-size 和 font-family，它们是必需的。 如果使用 font 属性，其他相关的字体属性（如 font-size 和 font-family）不能单独设置。 实例：使用 font 属性设置文本样式 HTML 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Font 属性示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 class="title">欢迎来到我的网站</h1> <p class="description">这是一个关于CSS字体属性的示例，展示如何使用font属性设置文本样式。</p> </body> </html> CSS 代码（styles.css） body { font-family: Arial, sans-serif; /* 设置全局字体 */ } .title { font: bold 24px/1.5 "Helvetica Neue", Arial, sans-serif; /* 设置标题字体样式 */ color: #333; /* 字体颜色 */ } .description { font: italic normal 16px/1.8 "Georgia", serif; /* 设置描述文本字体样式 */ color: #666; /* 字体颜色 */ } 解释 HTML结构：我们创建了一个包含标题和描述的简单网页。 CSS样式： 在 .title 类中，使用 font 属性设置了字体为加粗、24px大、行高为1.5、字体系列为 "Helvetica Neue"，后备字体为 Arial 和无衬线字体。 在 .description 类中，使用 font 属性设置了字体为斜体、正常粗细、16px大、行高为1.8、字体系列为 "Georgia"，后备字体为衬线字体。 结果 通过以上代码，浏览器将展示一个标题和描述文本，标题为加粗大字体，描述为斜体较小字体。这样可以清晰地展示不同文本的样式和视觉层次感。 ...

一、 watch API 我们先看看 watch的使用例子,watch 有多种用法，可以接收多种类型参数: import { reactive, watch } from 'vue' // 1. 传入getter函数 const state = reactive({ count: 0 }) watch(() => state.count, (count, prevCount) => { // 当 state.count 更新，会触发此回调函数 }) // 2. 传入reactive对象 watch(state, (count, prevCount) => { // 当 state.count 更新，会触发此回调函数 }) // 3. 传入ref对象 const stateRef = ref(0) watch(stateRef, (count, prevCount) => { // 当 stateRef.value 更新，会触发此回调函数 }) // 4.监听多个数据源，回调函数接受两个数组，分别对应来源数组中的新值和旧值： watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => { /* ... */ }) 从上面的例子可以看到，对于 watch，它能接收的第一个参数类型非常多。 你可以传入一个ref对象、一个响应式对象、一个 getter 函数、甚至是一个数组。 我们在上一篇中知道了computed对象其内部是借助了 effect函数 创建了一个 reactiveEffect函数，在访问computed对象的值时，执行其 runner函数 求值。 ...

从一个安全漏洞说起 Lodash 是一款非常流行的 npm 库，每月的下载量超过 8000 万次，GitHub 上使用它的项目有超过 400 万。之前有段时间， Lodash 的一个安全漏洞刷爆了朋友圈，我们先来回忆下这个安全漏洞： 攻击者可以通过 Lodash 的一些函数覆盖或污染应用程序。例如：通过 Lodash 库中的函数 defaultsDeep 可以修改 Object.prototype 的属性。 我们都知道，JavaScript 在读取对象中的某个属性时，如果查找不到就会去其原型链上查找。试想一下，如果被修改的属性是 toString 方法： const payload = '{"constructor": {"prototype": {"toString": true}}}' _.defaultsDeep({}, JSON.parse(payload)) 每个对象都有一个 toString() 方法，当该对象被表示为一个文本值时，或者一个对象以预期的字符串方式引用时自动调用。默认情况下，toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖，toString() 返回 [object type]，其中 type 是对象的类型。如果覆盖了 toString() 方法，那么给应用带来的影响就是非常大的。 其实上述的问题就属于一个很常见的安全漏洞 —— 原型污染 原型污染：攻击者通过某种手段修改 JavaScript 对象的原型（prototype） 然而这并不是 Lodash 第一次爆出安全漏洞了。事实上，像这样的安全漏洞还可能存在于我们使用的千千万万个不同的开源依赖中，如果我们平时不重视他们，一旦出现问题对我们的项目造成的损失是不可估计的。这相当于你的项目中埋着很多不知道什么时候就会爆炸的炸弹。 安全调查 其实开发人员对开源代码的安全性的信任程度要大于对自己编写的代码的安全性的信任程度，但是在确保代码安全性和质量的工具还有很多不足之处。在 npm 还没有一个完善的安全检测机制之前，npm 和 NodeJs 团队曾经对数万名 JavaScript 开发者发起过一个调查，第一个问题就是安全问题，具体就是开发人员如何看待他们编写的代码和所使用的开源项目的安全性。 调查结果显示：全球 97％ 的 JavaScript 开发人员在自己开发的项目中都依赖开源代码，77％ 的开发人员对他们使用的开源代码是否安全表示担忧。更有趣的是，有 87％ 的人表示担心自己的代码的安全性。 ...

解构赋值概念 解构赋值语法是一种 Javascript 表达式。 通过解构赋值，可以将属性/值从对象/数组中取出,赋值给其他变量。 解构赋值是通过将结构中的各元素复制到变量中来达到“解构”的目的。但对象/数组本身不会被修改。 数组解构 基本使用 📖 可以在定义变量的同时，使用解构进行赋值 let [one, two, three] = foo; //等同于 let one = foo[0]; let two = foo[1]; let three = foo[2]; 📖 也可以先声明变量，在进行解构赋值 设置默认值 当【左边≠右边】时，可以先设置一个默认值，否则取不到值的变量会变成undefined 剩余值处理 可以使用三个点 "..."+ 参数来接收剩余的所有元素，变量名称随意，必须在最后一个参数的位置上 进阶用法 🎨 可以和split 函数结合使用，比如 let [Mother,Father] = "judy,pete".split(','); console.log(Mother) //judy console.log(Father) //pete 🎨 可以使用逗号忽略元素，比如 let [name1,,name3] = ["Julius01", "Caesar02", "Consul03"] 🎨 可以直接赋值给对象的属性，比如 let user = {}; [user.name, user.surname] = ["Ilya","Kantor"] ...