蓝斑.json的博客

作为一名程序员，我沿着技术的道路走过了15年的风雨兼程，这段旅程充满了挑战、收获和成长。回顾这段时间，我不禁感慨万千，思绪仿佛穿越时光隧道，重温着那些曾经的起起伏伏。

ES6允许在对象字面量中更简洁地定义属性和方法。您可以省略属性名称和冒号，如果属性名和变量名相同，可以直接使用变量名作为属性名。ES6（ECMAScript 2015）为JavaScript中的对象引入了一些新的扩展功能。： ES6引入了Symbol数据类型，它是一种唯一且不可改变的数据类型，可以用作对象属性的键。这些是ES6中引入的一些主要对象扩展功能。方法用于将一个或多个源对象的属性复制到目标对象。： 您可以在对象字面量中使用表达式作为属性名，这使得属性名更灵活。方法用于设置对象的原型。

ES6（ECMAScript 2015）为JavaScript中的数组引入了许多新的扩展功能。方法允许您将类似数组的对象或可迭代对象转换为真正的数组。) 允许您在数组字面量、函数调用或其他表达式中展开数组，以便将数组的元素合并到新的数组中。： 模板字符串允许您插入变量和表达式到字符串字面量中，这对于创建动态的数组内容非常有用。属性，您可以更容易地自定义数组方法的行为，以便它们返回与原始数组相同类型的新数组。方法允许您将数组的一部分复制到另一部分，同时保留原始数组的长度。方法用于创建具有给定参数的新数组。

javaScript。Cookie，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决HTTP无状态导致的问题

引用未被释放的对象是一种常见的内存泄漏情况。在JavaScript中，如果有对某个对象的引用，而后没有显式地释放这个引用，该对象就无法被垃圾回收机制回收。

创建的 Symbol 值都是唯一的，即使两个 Symbol 值的描述字符串相同，它们仍然是不相等的。这意味着可以将 Symbol 值用作对象属性名，确保属性名的唯一性，避免命名冲突。需要注意的是，由于 Symbol 值的唯一性特性，它们在进行相等性比较时始终返回 false。即使两个 Symbol 值的描述字符串相同，它们仍然是不相等的。但是，由于 Symbol 值的唯一性，其他代码很难意外覆盖或访问特定的 Symbol 属性。Symbol 值是不可变且唯一的，可以用作对象的属性名，以确保属性名的唯一性。

前面我们讲到，JSundefinednullbooleanstringnumbersymbolobject但是我们在声明的时候只有一种数据类型，只有到运行期间才会确定当前类型let x = y?1 : a;上面代码中，x的值在编译阶段是无法获取的，只有等到程序运行时才能知道虽然变量的数据类型是不确定的，但是各种运算符对数据类型是有要求的，如果运算子的类型与预期不符合，就会触发类型转换机制强制转换（显示转换）自动转换（隐式转换）

我们也可将字符串常用的操作方法归纳为增、删、改、查，需要知道字符串的特点是一旦创建了，就不可变。这里的删的意思并不是说删除原字符串的内容，而是创建字符串的一个副本，再进行操作。这三个方法都返回调用它们的字符串的一个子字符串，而且都接收一或两个参数。从字符串开头去搜索传入的字符串，并返回位置（如果没找到，则返回 -1 ）这里增的意思并不是说直接增添内容，而是创建字符串的一个副本，再进行操作。这里改的意思也不是改变原字符串，而是创建字符串的一个副本，再进行操作。把字符串按照指定的分割符，拆分成数组中的每一项。

传入三个参数，分别是开始位置，要删除元素的数量，要插入的任意多个元素，返回删除元素的数组，对原数组产生影响。首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组，不会影响原始数组。传入三个参数，分别是开始位置、0（要删除的元素数量）、插入的元素，返回空数组。传入两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组。方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度。对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。

在JavaScript两种类型的区别是：存储位置不同。

关于vue3的重构背景，尤大是这样说的：「Vue 新版本的理念成型于 2018 年末，当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，但在这段时期，前端世界已经今昔非比了在我们更新（和重写）Vue 的主要版本时，主要考虑两点因素：首先是新的 JavaScript 语言特性在主流浏览器中的受支持水平；其次是当前代码库中随时间推移而逐渐暴露出来的一些设计和架构问题」利用新的语言特性(es6)解决架构问题。

Notifications 用户授权显示通知是通过浏览器内部的一个对话框完成的。向用户请求通知权限。这个对象有一个 requestPemission() 方法，该方法返回一个期约，用户在授权对话框上执行操作后这个期约会解决。"granted"值意味着用户明确授权了显示通知的权限。JavaScript API 触发页面外部的浏览器行为，而且都允许页面处理用户与对话框或通知弹层的交 互。Progressive Web Application） 通过触发通知可以在页面不活跃时向用户显示消息，看起来就像原生应用。

同步+阻塞同步+非阻塞异步+阻塞异步+非阻塞在当什么是同步和异步，阻塞与非阻塞的概念还没弄清楚之前，更别提上面这些组合术语了，只会让你更加困惑。

使用- 富文本编辑基本的技术就是在空白HTML文件中嵌入一个iframe。通过designMode属性，可以将这个空白文档变成可以编辑的，实际编辑的则是元素的HTML。designMode属性有两个可能的值："off"（默认值）和"on"。设置为"on"时，整个文档都会变成可以编辑的（显示插入光标），从而可以像使用文字处理程序一样编辑文本，通过键盘将文本标记为粗体、斜体，等等。作为iframe源的是一个非常简单的空白HTML页面。

虚拟 DOM （）这个概念相信大家都不陌生，从React到Vue，虚拟DOM为这两个框架都带来了跨平台的能力（和Weex实际上它只是一层对真实DOM的抽象，以JavaScript对象 (VNode节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上在Javascript对象中，虚拟DOM表现为一个Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别创建虚拟。

同步的 XMLHttpRequest (async = false)，因为 JavaScript 将停止执行直到服务器响应就绪。如果服务器繁忙或缓慢，应用程序将挂起或停止。在 AJAX 之前，此操作可能会导致应用程序挂起或停止。你也会在更老的 JavaScript 代码中看到同步请求。在上面的例子中，您可能会获得一个缓存的结果。通过 XMLHttpRequest 对象，您可以定义当请求接收到应答时所执行的函数。如需向服务器发送请求，我们使用 XMLHttpRequest 对象的。如需执行同步的请求，请把。

从语法结构来说 闭包是一种JS特有的函数嵌套结构1. 函数嵌套(至少有两个函数)2. 内层函数中使用了外层函数的变量或参数3. 内层函数被返回到外部在外部使用1. 保护具有共享意义的变量2. 隔离作用域 避免作用域污染3. 为变量提供对外访问接口1. 概念复杂 不易理解2. 占用过多资源(内存) 大量使用不利于代码优化闭包作用域中的值 不会随垃圾回收机制销毁；销毁闭包的方式是将闭包的函数赋值为null。

每个对象都拥有一个指针（__proto__），固定指向该对象构造函数的原型对象；封装：通俗的来说就是封装函数，通过私有化的变量和私有化的方法，不让外部访问到。多态： 多态就是通过对传递的参数判断来执行逻辑，即可实现一种多态处理机制。1).通过原型prototype对象实例化实现此类的继承；2).直接实例化对象复制，完全复制父类对象。公有属性，指向同一个内存地址；对象优先查找自身私有属性；可以被所以实例对象访问；

每种方法都有其适用场景和限制，通常CORS是最常见和推荐的解决方案。需要注意的是，服务器端的配置是解决跨域问题的关键。在客户端（JavaScript）实施跨域解决方案时，通常需要与服务器端的配置相结合。：这是HTML5中的一个功能，允许不同源之间的脚本进行有限的通信。：这是最推荐的方法。服务器设置适当的HTTP头部允许来自不同源的请求。：由于WebSocket不受同源策略限制，因此也可以用来实现跨域通信。：这种方法用于两个有共同顶级域名的页面之间的通信（例如，允许所有域的访问，或者指定某些域可以访问。

在组件的选项中定义本地的过滤器filters: {if (!if (!})new Vue({// ...})注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize过滤器函数将会收到message的值作为第一个参数在这个例子中，filterA被定义为接收单个参数的过滤器函数，表达式message的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数filterB，将。

开始之前我们先学习一下指令系统这个词指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能除了核心功能默认内置的指令 (v-model和v-show)，Vue也允许注册自定义指令//会实例化一个指令，但这个指令没有参数`v-xxx`// -- 将值传到指令中。

JavaScript 中的代理（Proxy）和反射（Reflect）是两个强大的功能，它们允许您在操作对象时拦截、修改或扩展其行为。这两个功能通常一起使用，以实现高度的控制和元编程能力。下面分别介绍代理和反射的概念和用法：ChatGPTJavaScript 中的代理（Proxy）和反射（Reflect）是两个强大的功能，它们允许您在操作对象时拦截、修改或扩展其行为。这两个功能通常一起使用，以实现高度的控制和元编程能力。

事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号。事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给。使用.native修饰符来操作普通HTML标签是会令事件失效的。在移动端，当我们在监听元素滚动事件的时候，会一直触发。在我们填完信息，光标离开标签的时候，才会将值赋予给。自动过滤用户输入的首空格字符，而中间的空格不会过滤。内置标签那样监听根元素的原生事件，否则组件上使用。

值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用。发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行。设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。中缓存组件的数量是否超过了设置的最大缓存数量值。表明该组件还没有被缓存过，则以该组件的。，如果超过了，则把第一个缓存组件删掉。

你能描述下你对vue生命周期的理解？在created和mounted这两个生命周期中请求数据有什么区别呢？

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回。作用在不同标签时候，是先进行判断，再进行列表的渲染。模板编译的时候，会将指令系统转化成可执行的。的列表渲染函数，函数内部都会进行一次。指令基于一个数组来渲染一个列表。是源数据数组或者对象，而。则是被迭代的数组元素的别名。形式的特殊语法，其中。模板指令的代码都会生成在。值是独一无二的，这便于。这时候我们可以看到，

​。

在修改数据之后立即使用这个方法，获取更新后的 DOM。将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新。等待同一事件循环中的所有数据变化完成之后，会将队列中的事件拿来进行处理，进行。每次更新值都会触发视图更新(上面这段代码也就是会更新10万次视图)，有了。如果我们一直修改相同数据，异步操作队列还会进行去重。，而是将修改数据的操作放在了一个异步操作队列中。如果想要在修改数据后立刻得到更新后的。节点，却发现获取到的是旧值。机制，只需要更新一次，所以。数据在发现变化的时候，

当JavaScript引擎执行代码时，它会从当前执行上下文的变量环境开始，逐级向上查找变量，直到找到所需的变量为止。在JavaScript中，变量和作用域与内存管理密切相关，因此本文将深入探讨这些主题，以帮助我们更好地理解JavaScript中的变量、作用域和内存。这意味着在使用var声明的变量在整个函数内部都是可见的，而使用let和const声明的变量只在当前块内部可见。它们的主要区别在于作用域和可变性。此外，使用var声明的变量可以被重新赋值，而使用const声明的变量是常量，不能被重新赋值。

尽管现代的JavaScript引擎已经非常智能和高效地处理垃圾回收，但作为开发者，我们仍然需要注意一些编码实践，以避免因为错误的内存管理导致性能下降或内存泄漏的问题。总结：JavaScript的垃圾回收机制是一项关键的功能，它帮助我们简化了内存管理的复杂性，提供了更好的性能和用户体验。在JavaScript中，垃圾回收的目标是识别不再使用的变量，然后释放它们所占用的内存，以便其他变量可以继续使用这些空间。在清除阶段，垃圾回收器会遍历整个内存空间，将未被标记的对象视为垃圾，并回收它们占用的内存空间。

我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了ViewModel的数据也自动被更新了，这种情况就是双向绑定举个栗子当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定关系图如下。

适用场景：子组件传递数据给父组件子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值父组件绑定监听器获取到子组件传递过来的参数Father.vue。

我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了ViewModel的数据也自动被更新了，这种情况就是双向绑定举个栗子当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定关系图如下。

v-show：与v-if类似，也是根据表达式的值来控制元素的显示和隐藏，但是使用CSS的display属性来实现。v-bind简写：通过冒号":"来简化v-bind指令的写法，用于动态绑定元素属性或组件的props。v-if、v-else-if、v-else：用于条件性地渲染元素，根据表达式的值来显示或隐藏元素。v-html：用于更新元素的HTML内容，将绑定的数据作为HTML代码解析并显示在元素中。v-text：用于更新元素的文本内容，将绑定的数据直接显示在元素中。

调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单。降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现。提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级。方法，第一个参数为组件的名称，第二个参数为传入的配置项。

组件

是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染。切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示。如果需要非常频繁地切换，则使用 v-show 较好。如果在运行时条件很少改变，则使用 v-if 较好。不管初始条件是什么，元素总是会被渲染。的时候不会触发组件的生命周期。有更高的初始渲染消耗；要复杂的多，因为还有。

SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTMLJavaScript和CSS。