前端代码军师-优快云博客

原创 js的变量提升

在 JavaScript 中，变量提升是指在代码执行前，JavaScript 引擎会将所有变量声明提升至作用域顶部的行为。也就是说，虽然变量在代码中的声明位置可能在后面，但在实际执行过程中，它们已经被提升到了作用域的顶部。需要注意的是，变量提升只会发生在当前作用域内，如果变量在内部函数中声明，它将在函数内部被提升，而不会影响外部作用域。这是因为 JavaScript 中的作用域链，子作用域可以访问到父作用域的变量，而不受变量提升的影响。需要注意的是，只有变量声明会被提升，而变量赋值并不会被提升。

2023-04-15 21:40:35 512

原创 js中this指向

用于指向当前执行代码的对象，它的指向在不同情况下会有所不同。下面是一些常见情况下。的指向在不同的情况下可能会产生错误，因此需要注意使用上下文来确定。在 JavaScript 中，关键字是一个很重要的概念。下面是一些示例，用于演示。

2023-04-13 21:17:50 227

原创 map和forEach的区别

方法适用于需要将原数组的每个元素进行处理并生成一个新的数组的场景，而。方法适用于仅仅需要遍历数组中的每个元素并对其进行操作的场景。

2023-04-11 20:45:46 1609

原创 js生成指定范围的随机数

方法生成的随机小数范围是 [0, 1)，因此需要乘以 (max - min + 1) 来扩大范围。方法生成一个 0 到 1 之间的随机小数。在 JavaScript 中，可以使用。方法将小数向下取整为整数，并加上。值，即可得到指定范围内的随机整数。参数，否则会出现错误。，表示随机数的范围。

2023-04-10 21:51:06 1139

原创 async 和 await 的区别

而 await 关键字只能在 async 函数中使用，用于等待一个返回 Promise 对象的异步操作完成，并获取其结果。在使用 async/await 时，如果遇到 await 关键字，JavaScript 引擎会暂停当前函数的执行，等待该异步操作完成并返回结果，然后继续执行后面的代码。async 用于定义一个异步函数，await 用于等待一个异步操作完成。await 关键字只能等待返回 Promise 对象的异步操作完成，如果不是 Promise 对象，则会自动转换成 Promise 对象。

2023-04-08 22:43:10 424

原创 git常用指令

git status：查看工作区的状态，了解哪些文件被修改、哪些文件被添加等。git reset：撤销提交、取消暂存区的修改、回滚代码等操作。git rebase：将当前分支的修改在另一个分支上重新播放。git branch：查看分支信息，创建、删除、切换分支等。git merge：将指定分支的修改合并到当前分支。git commit：提交暂存区的修改到本地仓库。git push：将本地仓库的修改推送到远程仓库。git init：初始化一个 Git 仓库。git add：将修改后的文件添加到暂存区。

2023-04-07 21:44:18 153

原创 v-if 和 v-show的区别

v-if 的初始渲染性能可能比 v-show 更高，因为 v-if 的元素在初始渲染时可能会被直接隐藏，而不需要进行额外的计算和操作。v-if 的工作原理是根据表达式的值的真假来动态地销毁或重建 DOM，当表达式的值为 false 时，元素会被销毁，当表达式的值为 true 时，元素会被重建。因此，使用 v-if 适用于需要频繁切换显示状态的场景。当需要频繁切换显示状态时，v-show 的性能可能比 v-if 更高，因为 v-show 的元素不需要进行销毁和重建的操作，只需要进行 CSS 样式的修改即可。

2023-04-06 21:11:59 263

原创 MVC和MVVM的区别

MVVM 模式中，ViewModel 层负责管理和处理数据逻辑，处理用户的输入和输出，提供 View 层所需要的数据和状态，并将用户的行为转换为数据操作，使得 View 层只需要关注展示数据，而不用关心数据的来源和处理。MVVM 模式中，ViewModel 层通过数据绑定实现响应式更新，ViewModel 层的状态更新会自动同步到 View 层，View 层的状态更新也会自动同步到 ViewModel 层。MVC 模式中，Controller 层通过监听 Model 层的事件来更新 View 层的状态。

2023-04-05 22:33:53 251

原创 vue中的data为什么是一个函数

在组件实例化时，Vue 会调用该函数并返回一个对象，这个对象就成为该组件实例的数据对象。这个函数的返回值会被缓存起来，以后再创建该组件实例时就直接使用缓存的对象，而不会再调用该函数。这是因为 Vue 在创建组件实例时，会为每个组件实例都创建一个独立的数据作用域，如果将。直接定义为一个对象，那么所有组件实例都将共享同一个数据对象，这样就无法实现数据的隔离。定义为一个函数是为了保证每个组件实例都拥有自己独立的数据对象，以实现数据的隔离。选项返回的是一个函数，这个函数返回一个对象，包含一个属性。

2023-04-04 21:51:21 871

原创分块绘制canvas图像

分块生成canvas图像可以通过将页面分成多个小块，每个小块只处理一部分页面内容，然后将这些小块拼接起来生成完整的canvas图像。

2023-04-03 21:26:43 461

原创 get和post的请求的区别

POST 请求中的参数相对于 GET 请求来说更安全，因为请求参数不会被保存在浏览器的历史记录中。URL 中包含的查询字符串有长度限制，且参数不太安全，因为查询字符串中的参数可以被缓存、历史记录等方式保存，容易被恶意用户获取。综上所述，GET 和 POST 请求的主要区别在于请求方式、请求参数、缓存和安全性等方面。POST：请求比 GET 请求更安全，因为请求参数不会被保存在浏览器的历史记录中，并且可以使用 HTTPS 协议进行加密传输，提高数据安全性。请求参数通过 HTTP 请求的正文部分传递。

2023-04-02 21:13:49 97

原创 Vue中的key有什么作用？

需要注意的是，key 只在其直接的子组件中起作用，如果两个组件的 key 相同，但它们不是直接的子组件，则 Vue 仍然会重新渲染它们。保持组件状态在使用 v-for 指令渲染列表时，每个列表项都应该拥有唯一的 key，这样可以在列表项顺序改变时，Vue。提高渲染效率当 Vue 在进行虚拟 DOM 的 diff 算法比较新旧节点时，如果节点具有相同的 key，则 Vue。可以准确地判断哪些列表项是新添加的，哪些列表项是已存在但位置改变的，哪些列表项是被删除的，从而保持组件状态的正确性。

2023-04-01 18:53:21 2479

原创移动端布局方案

使用 rem 布局来适应不同的屏幕尺寸。使用 vw 和 vh 布局来适应不同的屏幕尺寸。使用 CSS3 的媒体查询来适配不同的屏幕尺寸。使用百分比布局来适应不同的屏幕尺寸。以上是一些常见的移动端布局方案，每种方案都有其优缺点，具体选择哪种方案需要根据实际情况进行选择。

2023-03-31 13:39:56 195

原创 js循环数组的方式有哪些

需要注意的是，for…of 循环只能用于遍历具有 Symbol.iterator 属性的数据结构，例如数组、Set、Map 等。以上是常见的几种循环数组的方式，不同的方式适用于不同的场景，具体使用时需要根据实际情况进行选择。需要注意的是，reduce() 方法还可以用于将数组转换为其他数据结构，例如对象或者字符串。

2023-03-30 21:12:51 205

原创 axios封装

在这个示例中，使用了 create() 方法创建了一个 Axios 实例，配置了基础 URL 和超时时间。还使用了拦截器，在发送请求之前和接收响应之后对请求和响应进行了一些处理。Axios 是一个基于 Promise 的 HTTP 客户端库，用于在浏览器和 Node.js 中发送 HTTP 请求。

2023-03-29 20:07:21 130

原创 js中的排序算法

在实际应用中，我们需要根据具体的情况选择适合的排序算法。如果要对小规模的数组进行排序，插入排序可能会更快，而对于大规模的数组，快速排序则可能更加高效。在 JavaScript 中，有多种排序算法可以实现数组排序。

2023-03-28 18:47:34 82

原创 js检测数据类型

需要注意的是，在使用 Object.prototype.toString() 方法时，需要使用 call() 或者 apply() 方法将需要检测的值作为第一个参数传递给该方法。在这个例子中，可以使用 instanceof 运算符检测一个对象是否是 Date、Array、Object 或者自定义的构造函数的实例。需要注意的是，typeof 运算符对于数组和对象都返回 “object”。如果需要更精确地检测数据类型，可以使用其他方式。在 JavaScript 中，可以使用多种方式来检测数据类型。

2023-03-27 13:44:03 101

原创 js求数组最大值有哪些方式

reduce() 方法可以将数组中的元素通过一个回调函数逐个进行计算，并返回最终的结果。可以在回调函数中比较每个元素和当前的最大值，并返回较大的值作为下一轮计算的最大值。可以使用循环遍历数组，并使用一个变量来保存数组中的最大值。每当遇到一个比当前最大值大的元素时，更新变量的值。将数组中的元素作为参数传递给 Math.max() 方法。JavaScript 中可以使用多种方式来求数组的最大值。在这个例子中，使用了展开运算符。

2023-03-26 20:54:37 868

原创 js数组对象排序

方法会按照对象的字符串表示进行排序。如果需要按照对象的某个属性进行排序，则可以修改比较函数的实现方式。方法对数组进行排序。该方法可以接受一个可选的比较函数作为参数，以便按照特定的顺序进行排序。，表示需要比较的数组元素。如果需要按照数字大小进行排序，则可以将比较函数传递给。在 JavaScript 中，可以使用数组对象的。需要注意的是，如果数组元素是对象，那么默认情况下，，表示需要将数组元素按照从小到大的顺序排序。，表示需要按照分数从高到低进行排序。在这个例子中，比较函数返回。在这个例子中，比较函数返回。

2023-03-25 22:19:39 1836

原创 js求数组最大值

reduce() 方法可以将数组中的元素通过一个回调函数逐个进行计算，并返回最终的结果。可以在回调函数中比较每个元素和当前的最大值，并返回较大的值作为下一轮计算的最大值。可以使用 for 循环遍历数组，并使用一个变量来保存数组中的最大值。可以使用 apply() 方法将数组中的元素作为参数传递给 Math.max() 方法。方法之外，JavaScript 中还有多种方法可以求数组的最大值，下面介绍其中的几种。这三种方法都可以用于求数组中的最大值，具体选择哪种方法取决于实际情况和个人喜好。

2023-03-24 22:39:22 3660

原创 css多行文本溢出显示省略号

在CSS中，对于多行文本的溢出显示省略号，可以使用display属性配合-webkit-line-clamp和-webkit-box-orient来实现。

2023-03-23 21:52:37 8476

原创 css单行文本溢出显示省略号

这样就可以让单行文本溢出时显示省略号了。属性来实现单行文本溢出显示省略号。

2023-03-23 21:21:43 10413

原创防抖和节流

在实际应用中，防抖和节流都可以用于优化网页性能，比如防抖可以应用在输入框输入实时搜索等场景中，而节流可以应用在滚动条滚动、页面resize等频繁触发事件的场景中。：每次触发事件时设置一个定时器，在n秒后执行回调函数，若在n秒内又触发了该事件，则清除之前的定时器并重新设置一个新的定时器。：在事件被触发n秒后再执行回调函数，若在这n秒内又触发了该事件，则重新计时，直到n秒后再执行回调函数。：每次触发事件时判断当前是否到达一定的时间间隔，若是则执行回调函数并更新上一次触发时间，若不是则忽略该事件。

2023-03-22 23:57:39 81

原创 js中把数组中元素随机打乱的几种方式及各自优缺点

在JavaScript中，可以使用多种方法将数组顺序随机打乱。如果不需要保持原始数组的顺序并且不关心排序算法的稳定性，可以使用sort()方法和Math.random()。如果需要保持原始数组的顺序并且需要一个稳定的排序算法，可以使用Fisher-Yates算法。如果不介意使用第三方库并且希望代码简洁易读，可以使用lodash.shuffle()方法。

2023-03-21 21:51:11 5052 1

原创 js删除字符串最后一个字符的几种方式

方法：这个方法可以从字符串中提取一个指定长度的子字符串，可以设置起始位置和子字符串的长度。将起始位置设置为 0，将子字符串的长度设置为字符串的长度减一即可。方法：这个方法也可以截取字符串的一部分。只需要将起始索引设置为 0，将结束索引设置为字符串的长度减一即可。无论使用哪种方式，都可以删除字符串的最后一个字符。选择哪种方法取决于个人喜好和代码的上下文环境。方法：将字符串转换为数组，删除最后一个元素，然后将数组转换回字符串。方法：这个方法可以截取字符串的一部分，从而删除最后一个字符。

2023-03-20 20:49:13 47980

原创 js中const声明的变量可以被改变吗

声明的变量不能被重新赋值，但是它们并不是完全不可变的，还是可以通过改变它们的属性和元素来实现一些修改。如果想要完全不可变的变量，可以使用其他的方式，例如使用。变量的值是一个对象或数组，那么该对象或数组的属性和元素是可以被修改的，只要不改变变量本身的值即可。声明的变量是常量，它的值在声明后就不能被改变了，否则会抛出。声明的变量并不是不可变的，而是它们的值不可变。在 JavaScript 中，使用。但是需要注意的是，使用。

2023-03-20 19:41:39 2331

原创 js(javascript)中let和const的区别

都是用于声明变量的关键字，它们具有不同的语义和用法。通常情况下，如果变量不需要被重新赋值，应该使用。声明的变量都具有块级作用域，只在声明它们的代码块内有效。声明的变量不会被变量提升，只有在声明后才能被访问。如果变量需要被重新赋值，应该使用。声明的变量是常量，不能被重新赋值。是用于声明变量的关键字，它们与。不同，具有一些特殊的语法和语义。声明的变量可以被重新赋值，而。在 JavaScript 中，

2023-03-20 19:38:22 498

原创箭头函数和普通函数的区别

综上所述，虽然箭头函数更为简洁，但是在一些特殊情况下可能不如普通函数灵活，需要根据具体的使用场景选择使用哪种函数。关键字的指向是固定的，指向定义该函数时的上下文。始终指向它们定义时的上下文。因此，如果需要在方法中使用。关键字的指向是动态的，取决于函数被调用时的上下文。箭头函数不适用于对象的方法，因为它们没有自己的。当只有一个参数时，箭头函数可以省略括号。箭头函数和普通函数在语法和功能上有一些区别。例如，以下代码中的。，建议使用普通函数。

2023-03-19 18:17:59 116

原创如何使用js(Javascript)发送http请求,以及xhr和fetch的区别

这两种方法也可以用于发送 POST 请求，只需在请求中设置适当的头信息和数据即可。都是 JavaScript 中用于发起 HTTP 请求的 API，但是它们有一些区别。API 更加简单易用，并且具有更好的跨域支持，因此在开发中推荐使用。都可以用于发起 HTTP 请求，但是由于。

2023-03-18 16:39:26 1121

原创 js中数组求和有哪些方法

总的来说，使用 reduce 方法是最常用的对数组求和的方法，也是最简单和最优雅的写法。需要注意的是，使用 eval 函数存在一些安全性问题，不建议在生产环境中使用。需要注意的是，Math 对象本身并没有 sum 方法，我们需要自己定义。

2023-03-17 20:34:39 2556

原创 VUE中key的作用

具体来说，当 Vue 更新 DOM 时，它会基于新数据生成一棵 Virtual DOM 树，并将其与旧的 Virtual DOM 树进行对比，通过对比找到需要进行更新的节点，从而达到更新视图的目的。例如，当某个组件的数据依赖于外部环境的变化时，我们可以使用 key 来让该组件在每次更新时都重新渲染，从而确保其数据的正确性。通常情况下，我们可以使用数据对象的唯一标识符作为节点的 key 值，例如在使用 v-for 指令时，可以通过 item.id 来作为节点的 key 值。

2023-03-17 13:47:00 1358

原创 vue虚拟DOM原理

在比较子节点的过程中，如果旧的虚拟 DOM 树中的子节点已经比较完了，而新的虚拟 DOM 树中还有子节点没有比较，那么就直接将新的子节点添加到真实 DOM 中。反之，如果新的虚拟 DOM 树中的子节点已经比较完了，而旧的虚拟 DOM 树中还有子节点没有比较，那么就直接将旧的子节点从真实 DOM 中删除。虚拟 DOM（Virtual DOM）是一种用 JavaScript 对象来描述 DOM 树结构的概念，它的实现原理是在 DOM 更新时，通过对比新旧虚拟 DOM，找出需要更新的节点，然后仅更新这些节点。

2023-03-17 12:58:37 703

原创 vue双向绑定原理

例如，当我们在模板中使用 v-model 指令时，Vue 会自动为该指令创建一个 watcher，来监听用户输入的数据变化。当用户输入数据时，watcher 会自动更新数据并将数据发送给发布者，然后发布者会通知订阅者自动更新视图。当数据发生变化时，Vue 会通过发布者将变化通知给订阅者，然后订阅者会自动更新视图。反之，当视图发生变化时，Vue 会将变化发送给发布者，然后发布者会自动更新数据。反之，当视图发生变化时，数据也会随之变化。当视图变化时，指令和模板表达式中使用的数据变量会自动更新数据。

2023-03-16 16:25:51 115

原创 cookie、localStorage 和 sessionStorage详解

它最常用的用途是在客户端存储会话信息，例如用户的登录状态、购物车信息等。localStorage 是 HTML5 中新增的存储 API，它允许在客户端本地存储数据，并且数据不会随着浏览器的关闭而丢失。总体来说，cookie、localStorage 和 sessionStorage 都是用于在客户端存储数据的技术，但是它们各有特点和用途，应该根据实际情况选择使用。cookie、localStorage 和 sessionStorage 都是用来在客户端存储数据的技术，但它们有不同的特点和用途。

2023-03-16 14:01:02 385

原创结合vue源码，详细解释vue响应试原理

Vue.js 响应式原理是 Vue.js 的核心特性之一，它使用 Object.defineProperty() 方法对数据进行响应式处理。在响应式过程中，Vue.js 通过观察者和依赖来收集和管理数据，并使用订阅-发布模式来实现组件之间的通信。Vue.js 的响应式原理是一个非常复杂的系统，涉及到许多技术和数据结构，包括 Object.defineProperty() 方法、观察者、依赖、订阅-发布模式等。理解 Vue.js 的响应式原理对于深入理解 Vue.js 的使用和源码分析都是非常重要的。

2023-03-16 12:20:56 114

空空如也

空空如也