- 博客(318)
- 收藏
- 关注
RSS订阅
原创 Vue2和Vue3响应式的区别
Vue2 和 Vue3 响应式的区别，Vue2响应式是基于Object.defineProperty()实现的，Vue3响应式是基于Proxy()实现的，
2023-03-02 15:21:36
364
原创 js浅拷贝实现
jS浅拷贝实现一个新的对象直接拷贝已存在的对象的对象属性的引用，即浅拷贝。Array.prototype.slice()属于浅拷贝。var arr = [2, 4, 6, { y: 10 }]var newArr = arr.slice()newArr[3].x = 20newArr[3].y = 30console.log(arr) // [2, 5, 6, { y: 30, x: 20 }]console.log(newArr) // [2, 5, 6, { y: 30, x:
2022-04-07 20:08:00
5017
1
原创 JavaScript中null和undefined的区别
null 和 undefined的区别奇怪点有点奇怪的是，JavaScript语言居然有两个表示"无"的值：undefined和null，这是为什么？历史原因1995年JavaScript诞生时，最初像Java一样，只设置了 null 作为表示"无"的值。根据C语言的传统，null 被设计成可以自动转为0。但是，JavaScript的设计者Brendan Eich(布兰登.艾克)，觉得这样做还不够，主要有以下两个原因：null像在Java里一样，被当成一个对象。但是，JavaScript的数
2022-03-26 12:07:09
1382
原创 Promise概述和基本使用
Promise 的含义参考文章Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生js提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。Promise 的特点Prom
2022-03-18 13:49:00
163
原创 去掉一个数组中的重复项，并按升序排序
去掉一个数组中的重复项，并按升序排序方法1：indexOf()function removeRepeat(arr){ let result = [] for(var i=0;i<arr.length;i++){ if(result.indexOf(arr[i]) == -1){ result.push(arr[i]) } } return result.sort(function(a,b){ r
2021-03-24 09:11:26
1642
原创 统计给定字符串中各字符出现的次数
统计给定字符串中各字符出现的次数思路：先把字符串转为数组，遍历数组，声明一个空对象，数组元素为对象的key，同一元素出现的次数为对象的value。var str = 'abcdfabfgxsxzabc54acb4'var array = str.split('') // 字符串转为数组// console.log(array)var obj = {}for(var i=0;i<array.length;i++){ var key = array[i] // 如果对象中有该字
2021-03-23 09:11:40
674
原创 CSS3新增特性详解
CSS3CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。CSS3 被划分为模块。其中最重要的 CSS3 模块包括：选择器框模型背景和边框文本效果2D/3D 转换动画多列布局用户界面1. 背景透明rgba()background: rgba(0, 0, 0, 0.3);最后一个参数是alpha透明度，取值范围 0~1之间。习惯上把0.3的0省略掉，background: rgba(0, 0, 0, .3);后面必须是 4个值。注意：背景半透明是
2021-01-26 09:17:40
463
原创 vue组件样式私有化scoped的实现原理
vue组件样式私有化scoped的实现原理在vue组件中，style标签上有一个特殊属性：scoped。当给一个style标签添加scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。scoped的实现原理vue通过在DOM结构以及css样式上加上唯一的标记，保证唯一，达到样式私有化，不污染全局的作用。vue组件中的scop
2020-12-07 09:20:04
722
原创 vue组件的data为什么必须是function
vue组件中data必须通过function/return声明vue组件中声明的data成员，值需要是一个function，内部通过return返回{}对象供使用，这个特性必须遵守。vue组件的data为什么必须是一个function：组件根据业务需要，可以被使用多次，function会使得每次组件使用的时候都亲自执行，并给当前应用分配一个独立的数据对象，这样多个组件的data数据是独立的，互相没有关联、牵扯，互相不会覆盖。如果直接通过{}对象 给data赋值，多次使用组件会造成组件之间的da
2020-12-04 09:14:17
1197
原创 js如何复制数组而不是引用数组，新数组和原数组互不影响
复制数组而不是引用数组在js中，对象（object）和数组（array）类型的变量为引用类型，也就是说其存储的实际上并不是具体的值，而是一个指向堆内存的地址。因此当把一个引用类型，如‘数组’，赋值给另一个变量时，实际上是把另一个变量指向了与原数组相同的地址，对象和数组在赋值的时候都是引用传递，赋值的时候只是传递一个指针。当改变其中一个时，实际上是改变了堆内存中的存储内容，相应的，所有指向该地址的数组都发生了变化。示例代码：var arr = ["a", "b", "c", "d"];var arr
2020-11-04 09:16:52
5791
2
原创 前端开发 js 数组常用方法总结
js数组常用方法findIndex获得指定数组元素下标// 参数：函数（被传入的函数，回调函数）// 格式要求：// item 回调函数，代表每一次遍历的数据// return 判断条件(自己写)// 返回：满足条件的第一个元素的下标，若没有，返回-1；var index = arr.findIndex(function(item) { return item === 20;});console.log(index);// 根据
2020-11-03 09:23:53
755
原创 Vue缓存组件keep-alive的应用
缓存组件keep-alive什么是缓存组件keep-alive：vue.js本身提供了一个名为 keep-alive的缓存组件，其可以对目标组件的状态进行保存，即给缓存起来，当重复应用组件的时候，不会执行销毁、创建的程序，相反执行的是之前缓存的信息，既不用发送新请求耗费资源，同时用户显示速度很快，体验很好。keep-alive官网keep-alive的原理：组件缓存就是一旦组件被创建, 那么就不会被销毁, 不执行生命周期销毁钩子函数(beforeDestroy/destroyed)，虽然跳转
2020-10-21 13:36:31
246
原创 Vue插槽的应用
Vue插槽1. 介绍什么是插槽：根据业务需要，父组件可以给子组件传值，但一般传递的都是比较少量的信息(例如单个的String/Number/Boolean/Object/Array等)，如果要传递的数据非常多，例如一大段html标签内容，则不合适，这时可以通过 插槽 实现父子组件嵌套情形，子组件给自己个性化区域设置一个占位符，父组件给占位符填充内容，占位符就是 插槽。
2020-09-24 11:01:03
398
原创 js 使用 console.time && console.timeEnd 来记录代码的执行耗时
js 使用 console.time && console.timeEnd 来记录代码的执行耗时
2024-04-23 10:53:47
409
原创 for循环使用var和let声明变量的区别
for循环使用var声明变量 i，最后输出的是10。变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环体内被赋给数组arr的函数内部的，里面的i指向的就是全局的i。也就是说，所有数组arr的成员里面的i，指向的都是同一个i，所以运行时输出的是最后一轮的i的值10。for循环使用 `let` ，声明变量 i，声明的变量 i 仅在块级作用域内有效，最后输出的是 6。
2024-04-18 13:33:30
454
1
原创 JavaScript 定时器详解
JavaScript 在浏览器中是单线程执行的，但允许使用定时器指定在某个时间之后或每隔一段时间就执行相应的代码。setTimeout() 用于指定在一定时间后执行某些代码，而 setInterval() 用于指定每隔一段时间执行某些代码。
2024-03-27 11:08:02
789
原创 JavaScript 单例内置对象 Math 详解
ECMAScript 提供了 Math 对象作为保存数学公式、信息和计算的地方。Math 对象提供了一些辅助计算的属性和方法。当代码开始执行时，全局上下文中会存在内置对象 Math。Math 对象包含辅助完成复杂计算的属性和方法。Math 对象上提供的计算要比直接在 JavaScript 实现的快得多，因为 Math 对象上的计算使用了 JavaScript 引擎中更高效的实现和处理器指令。但使用 Math 计算的问题是精度会因浏览器、操作系统、指令集和硬件而异。
2024-03-26 09:37:39
804
原创 webpack的核心概念
webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 [依赖图)，然后将项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示内容。
2024-03-25 17:11:16
1036
原创 JavaScript 单例内置对象 Global 详解
ECMA-262 对内置对象的定义是“任何由 ECMAScript 实现提供、与宿主环境无关，并在 ECMAScript 程序开始执行时就存在的对象”。这就意味着，开发者不用显式地实例化内置对象，因为它们已经实例化好了。当代码开始执行时，全局上下文中会存在两个内置对象：Global 和 Math。其中，Global 对象在大多数 ECMAScript 实现中无法直接访问。不过，浏览器将其实现为 window 对象。所有全局变量和函数都是 Global 对象的属性。
2024-03-07 13:29:16
968
原创 JavaScript Web Storage 详解
Web Storage 定义了两个对象用于存储数据：sessionStorage 和 localStorage。sessionStorage 用于严格保存浏览器一次会话期间的数据，因为数据会在浏览器关闭时被删除。localStorage 用于会话之外持久保存数据。
2024-03-06 14:24:01
323
原创 JavaScript Web Socket 详解
Web Socket 是与服务器的全双工、双向通信渠道。与其他方案不同，Web Socket 不使用 HTTP，而使用了自定义协议，目的是更快地发送小数据块。这需要专用的服务器，但速度优势明显。
2024-03-01 13:35:22
1048
原创 JavaScript 浏览器元素滚动 scrollIntoView()
scrollIntoView() 方法存在于所有 HTML 元素上，可以滚动浏览器窗口或容器元素以便包含元素进入视口。
2024-02-29 16:29:53
570
原创 JavaScript 延迟执行脚本的defer属性和异步执行脚步的async属性
对不推迟执行的脚本，浏览器必须解释完位于 元素中的代码，然后才能继续渲染页面的剩余部分。为此，通常应该把 元素放到页面末尾，介于主内容之后及 标签之前。可以使用 defer 属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。可以使用 async 属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。
2024-02-27 14:27:08
760
原创 JavaScript 立即调用的函数表达式
函数可以在创建之后立即调用，执行其中代码之后却不留下对函数的引用。 立即调用的函数表达式如果不在包含作用域中将返回值赋给一个变量，则其包含的所有变量都会被销毁。
2024-02-26 13:43:11
272
原创 JavaScript typeof 操作符和 instanceof 操作符
typeof 操作符可以确定值的原始类型，而 instanceof 操作符用于确保值的引用类型。typeof 操作符最适合用来判断一个变量是否为原始类型。更确切地说，它是判断一个变量是否为字符串、数值、布尔值或 undefined 的最好方式。如果值是对象或 null，那么 typeof 返回 "object"。typeof 操作符在用于检测函数时也会返回 "function"。
2024-02-23 08:52:41
701
原创 HTML5 增加了辅助 DOM 焦点管理的功能
HTML5 增加了辅助 DOM 焦点管理的功能。activeElement 可以用来查询文档，确定哪个元素拥有焦点，hasFocus() 方法可以查询文档是否获得了焦点， 而这对于保证 Web 应用程序的无障碍使用是非常重要的。无障碍 Web 应用程序的一个重要方面就是焦点管理，而能够确定哪个元素当前拥有焦点（相比于之前的猜测）是一个很大的进步。
2024-02-22 13:27:49
715
原创 HTML5 扩展了 HTMLDocument 类型
readyState 是 IE4 最早添加到 document 对象上的属性，后来其他浏览器也都依葫芦画瓢地支持这个属性。最终，HTML5 将这个属性写进了标准。document.readyState 属性有两个可能的值： loading，表示文档正在加载； complete，表示文档加载完成。IE 为 document 添加了 compatMode 属性，这个属性唯一的任务是指示浏览器当前处于什么渲染模式。 HTML5 增加了 document.head 属性，指向文档的元素。
2024-02-21 13:23:39
762
原创 JavaScript 原始值和引用值在变量复制时的异同
JavaScript 变量可以保存两种类型的值：原始值和引用值。原始值和引用值有以下特点。 原始值：大小固定，因此保存在栈内存上；从一个变量到另一个变量复制原始值会创建该值的第二个副本；typeof 操作符可以确定值的原始类型。引用值：是对象，存储在堆内存上；包含引用值的变量实际上只包含指向相应对象的一个指针，而不是对象本身。 从一个变量到另一个变量复制引用值只会复制指针，因此结果是两个变量都指向同一个对象；而 instanceof 操作符用于确保值的引用类型。
2024-02-20 13:35:27
828
原创 JavaScript valueOf() 方法详解
valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。所有主要浏览器都支持valueOf()。valueOf() 方法可以返回数字、String 对象、 Boolean 对象、Array 对象、Date 对象等的原始值。
2024-02-06 09:54:07
1379
原创 JavaScript 垃圾回收的常用策略和内存管理
JavaScript 是使用垃圾回收的编程语言，开发者不需要操心内存分配和回收。JavaScript 的垃圾回收程序可以总结如下。 1.离开作用域的值会被自动标记为可回收，然后在垃圾回收期间被删除。 2.主流的垃圾回收算法是标记清理，即先给当前不使用的值加上标记，再回来回收它们的内存。 3.引用计数是另一种垃圾回收策略，需要记录值被引用了多少次。4.引用计数在代码中存在循环引用时会出现问题。 5.解除变量的引用不仅可以消除循环引用，而且对垃圾回收也有帮助。为促进内存回收，全局对象、全局对象的属性和循环引
2024-02-04 09:14:00
962
原创 ECMAScript 中所有函数的参数都是按值传递的
ECMAScript 中所有函数的参数都是按值传递的。这意味着函数外的值会被复制到函数内部的参数中，就像从一个变量复制到另一个变量一样。如果是原始值，那么就跟原始值变量的复制一样，如果是引用值，那么就跟引用值变量的复制一样。在按值传递参数时，值会被复制到一个局部变量（即一个命名参数，或者用 ECMAScript 的话说， 就是 arguments 对象中的一个槽位）。
2024-02-01 13:44:27
460
原创 JavaScript 基本引用类型Date详解
Date 类型提供关于日期和时间的信息，包括当前日期、时间及相关计算。Date 类型将日期保存为自协调世界时（UTC，Universal Time Coordinated）时间 1970 年 1 月 1 日午夜（零时）至今所经过的毫秒数。在不给 Date 构造函数传参数的情况下，创建的对象将保存当前日期和时间。要基于其他日期和时间创建日期对象，必须传入其毫秒表示。ECMAScript 为此提供了两个辅助方法：Date.parse() 和 Date.UTC()。
2024-01-30 13:47:48
661
原创 BOM history 对象详解
history 对象表示当前窗口首次使用以来用户的导航历史记录。因为 history 是 window 的属性， 所以每个 window 都有自己的 history 对象。出于安全考虑，这个对象不会暴露用户访问过的 URL， 但可以通过它在不知道实际 URL 的情况下前进和后退。 history 对象提供了操纵浏览器历史记录的能力，开发者可以确 定历史记录中包含多少个条目，并以编程方式实现在历史记录中导航，而且也可以修改历史记录。
2024-01-26 13:24:41
633
原创 BOM location 对象详解
location 是最有用的 BOM 对象之一，提供了当前窗口中加载文档的信息，以及通常的导航功能。 这个对象独特的地方在于，它既是 window 的属性，也是 document 的属性。也就是说， window.location 和 document.location 指向同一个对象。location 对象不仅保存着当前加载文档的信息，也保存着把 URL 解析为离散片段后能够通过属性访问的信息。
2024-01-25 13:46:34
832
原创 JavaScript 执行上下文与作用域
全局上下文是最外层的上下文。根据 ECMAScript 实现的宿主环境，表示全局上下文的对象可能不一 样。在浏览器中，全局上下文就是我们常说的 window 对象，因此所有通过 var 定义的全局变量和函数都会成为 window 对象的属性和方法。使用 let 和 const 的顶级声明不会定义在全局上下文中，但在作用域链解析上效果是一样的。上下文在其所有代码都执行完毕后会被销毁，包括定义在它上面的所有变量和函数。上下文中的代码在执行的时候，会创建变量对象的一个作用域链。
2024-01-24 13:48:02
902
原创 apply、call、bind的区别 如何实现一个bind
apply、call、bind 的作用是改变函数执行时的上下文，简而言之就是改变函数运行时的 this 指向。apply 接受两个参数，第一个参数是 this 的指向，第二个参数是函数接受的参数，以数组的形式传入改变 this 指向后原函数会立即执行，且此方法只是临时改变 this 指向一次。call 方法的第一个参数也是 this 的指向，后面传入的是一个参数列表，跟 apply 一样，改变 this 指向后原函数会立即执行，且此方法只是临时改变this 指向一次
2024-01-12 13:32:09
451
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人