自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(313)
  • 收藏
  • 关注

原创 Vue2和Vue3响应式的区别

Vue2 和 Vue3 响应式的区别,Vue2响应式是基于Object.defineProperty()实现的,Vue3响应式是基于Proxy()实现的,

2023-03-02 15:21:36 344

原创 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 4992 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 1365

原创 Promise概述和基本使用

Promise 的含义参考文章Promise 是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生js提供了Promise对象。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。Promise 的特点Prom

2022-03-18 13:49:00 155

原创 去掉一个数组中的重复项,并按升序排序

去掉一个数组中的重复项,并按升序排序方法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 1564

原创 统计给定字符串中各字符出现的次数

统计给定字符串中各字符出现的次数思路:先把字符串转为数组,遍历数组,声明一个空对象,数组元素为对象的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 654

原创 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 447

原创 vue组件样式私有化scoped的实现原理

vue组件样式私有化scoped的实现原理在vue组件中,style标签上有一个特殊属性:scoped。当给一个style标签添加scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。scoped的实现原理vue通过在DOM结构以及css样式上加上唯一的标记,保证唯一,达到样式私有化,不污染全局的作用。vue组件中的scop

2020-12-07 09:20:04 687

原创 vue组件的data为什么必须是function

vue组件中data必须通过function/return声明vue组件中声明的data成员,值需要是一个function,内部通过return返回{}对象供使用,这个特性必须遵守。vue组件的data为什么必须是一个function:组件根据业务需要,可以被使用多次,function会使得每次组件使用的时候都亲自执行,并给当前应用分配一个独立的数据对象,这样多个组件的data数据是独立的,互相没有关联、牵扯,互相不会覆盖。如果直接通过{}对象 给data赋值,多次使用组件会造成组件之间的da

2020-12-04 09:14:17 1170

原创 js如何复制数组而不是引用数组,新数组和原数组互不影响

复制数组而不是引用数组在js中,对象(object)和数组(array)类型的变量为引用类型,也就是说其存储的实际上并不是具体的值,而是一个指向堆内存的地址。因此当把一个引用类型,如‘数组’,赋值给另一个变量时,实际上是把另一个变量指向了与原数组相同的地址,对象和数组在赋值的时候都是引用传递,赋值的时候只是传递一个指针。当改变其中一个时,实际上是改变了堆内存中的存储内容,相应的,所有指向该地址的数组都发生了变化。示例代码:var arr = ["a", "b", "c", "d"];var arr

2020-11-04 09:16:52 5511 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 677

原创 Vue缓存组件keep-alive的应用

缓存组件keep-alive什么是缓存组件keep-alive:vue.js本身提供了一个名为 keep-alive的缓存组件,其可以对目标组件的状态进行保存,即给缓存起来,当重复应用组件的时候,不会执行销毁、创建的程序,相反执行的是之前缓存的信息,既不用发送新请求耗费资源,同时用户显示速度很快,体验很好。keep-alive官网keep-alive的原理:组件缓存就是一旦组件被创建, 那么就不会被销毁, 不执行生命周期销毁钩子函数(beforeDestroy/destroyed),虽然跳转

2020-10-21 13:36:31 229

原创 Vue插槽的应用

Vue插槽1. 介绍什么是插槽:根据业务需要,父组件可以给子组件传值,但一般传递的都是比较少量的信息(例如单个的String/Number/Boolean/Object/Array等),如果要传递的数据非常多,例如一大段html标签内容,则不合适,这时可以通过 插槽 实现父子组件嵌套情形,子组件给自己个性化区域设置一个占位符,父组件给占位符填充内容,占位符就是 插槽。

2020-09-24 11:01:03 291

原创 JavaScript 定时器详解

JavaScript 在浏览器中是单线程执行的,但允许使用定时器指定在某个时间之后或每隔一段时间就执行相应的代码。setTimeout() 用于指定在一定时间后执行某些代码,而 setInterval() 用于指定每隔一段时间执行某些代码。

2024-03-27 11:08:02 753

原创 JavaScript 单例内置对象 Math 详解

ECMAScript 提供了 Math 对象作为保存数学公式、信息和计算的地方。Math 对象提供了一些辅助计算的属性和方法。当代码开始执行时,全局上下文中会存在内置对象 Math。Math 对象包含辅助完成复杂计算的属性和方法。Math 对象上提供的计算要比直接在 JavaScript 实现的快得多,因为 Math 对象上的计算使用了 JavaScript 引擎中更高效的实现和处理器指令。但使用 Math 计算的问题是精度会因浏览器、操作系统、指令集和硬件而异。

2024-03-26 09:37:39 795

原创 webpack的核心概念

webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 [依赖图),然后将项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示内容。

2024-03-25 17:11:16 1024

原创 js下载svg文件和预览svg文件

js下载svg文件和预览svg文件

2024-03-12 13:30:40 206

原创 JavaScript 单例内置对象 Global 详解

ECMA-262 对内置对象的定义是“任何由 ECMAScript 实现提供、与宿主环境无关,并在 ECMAScript 程序开始执行时就存在的对象”。这就意味着,开发者不用显式地实例化内置对象,因为它们已经实例化好了。当代码开始执行时,全局上下文中会存在两个内置对象:Global 和 Math。其中,Global 对象在大多数 ECMAScript 实现中无法直接访问。不过,浏览器将其实现为 window 对象。所有全局变量和函数都是 Global 对象的属性。

2024-03-07 13:29:16 777

原创 JavaScript Web Storage 详解

Web Storage 定义了两个对象用于存储数据:sessionStorage 和 localStorage。sessionStorage 用于严格保存浏览器一次会话期间的数据,因为数据会在浏览器关闭时被删除。localStorage 用于会话之外持久保存数据。

2024-03-06 14:24:01 296

原创 JavaScript Web Socket 详解

Web Socket 是与服务器的全双工、双向通信渠道。与其他方案不同,Web Socket 不使用 HTTP,而使用了自定义协议,目的是更快地发送小数据块。这需要专用的服务器,但速度优势明显。

2024-03-01 13:35:22 699

原创 JavaScript 浏览器元素滚动 scrollIntoView()

scrollIntoView() 方法存在于所有 HTML 元素上,可以滚动浏览器窗口或容器元素以便包含元素进入视口。

2024-02-29 16:29:53 354

原创 JavaScript 延迟执行脚本的defer属性和异步执行脚步的async属性

对不推迟执行的脚本,浏览器必须解释完位于 元素中的代码,然后才能继续渲染页面的剩余部分。为此,通常应该把 元素放到页面末尾,介于主内容之后及 标签之前。可以使用 defer 属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。可以使用 async 属性表示脚本不需要等待其他脚本,同时也不阻塞文档渲染,即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。

2024-02-27 14:27:08 712

原创 JavaScript 立即调用的函数表达式

函数可以在创建之后立即调用,执行其中代码之后却不留下对函数的引用。 立即调用的函数表达式如果不在包含作用域中将返回值赋给一个变量,则其包含的所有变量都会被销毁。

2024-02-26 13:43:11 236

原创 JavaScript typeof 操作符和 instanceof 操作符

typeof 操作符可以确定值的原始类型,而 instanceof 操作符用于确保值的引用类型。typeof 操作符最适合用来判断一个变量是否为原始类型。更确切地说,它是判断一个变量是否为字符串、数值、布尔值或 undefined 的最好方式。如果值是对象或 null,那么 typeof 返回 "object"。typeof 操作符在用于检测函数时也会返回 "function"。

2024-02-23 08:52:41 686

原创 HTML5 增加了辅助 DOM 焦点管理的功能

HTML5 增加了辅助 DOM 焦点管理的功能。activeElement 可以用来查询文档,确定哪个元素拥有焦点,hasFocus() 方法可以查询文档是否获得了焦点, 而这对于保证 Web 应用程序的无障碍使用是非常重要的。无障碍 Web 应用程序的一个重要方面就是焦点管理,而能够确定哪个元素当前拥有焦点(相比于之前的猜测)是一个很大的进步。

2024-02-22 13:27:49 698

原创 HTML5 扩展了 HTMLDocument 类型

readyState 是 IE4 最早添加到 document 对象上的属性,后来其他浏览器也都依葫芦画瓢地支持这个属性。最终,HTML5 将这个属性写进了标准。document.readyState 属性有两个可能的值: loading,表示文档正在加载; complete,表示文档加载完成。IE 为 document 添加了 compatMode 属性,这个属性唯一的任务是指示浏览器当前处于什么渲染模式。 HTML5 增加了 document.head 属性,指向文档的元素。

2024-02-21 13:23:39 739

原创 JavaScript 原始值和引用值在变量复制时的异同

JavaScript 变量可以保存两种类型的值:原始值和引用值。原始值和引用值有以下特点。 原始值:大小固定,因此保存在栈内存上;从一个变量到另一个变量复制原始值会创建该值的第二个副本;typeof 操作符可以确定值的原始类型。引用值:是对象,存储在堆内存上;包含引用值的变量实际上只包含指向相应对象的一个指针,而不是对象本身。 从一个变量到另一个变量复制引用值只会复制指针,因此结果是两个变量都指向同一个对象;而 instanceof 操作符用于确保值的引用类型。

2024-02-20 13:35:27 819

原创 JavaScript valueOf() 方法详解

valueOf() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中。所有主要浏览器都支持valueOf()。valueOf() 方法可以返回数字、String 对象、 Boolean 对象、Array 对象、Date 对象等的原始值。

2024-02-06 09:54:07 554

原创 JavaScript 垃圾回收的常用策略和内存管理

JavaScript 是使用垃圾回收的编程语言,开发者不需要操心内存分配和回收。JavaScript 的垃圾回收程序可以总结如下。 1.离开作用域的值会被自动标记为可回收,然后在垃圾回收期间被删除。 2.主流的垃圾回收算法是标记清理,即先给当前不使用的值加上标记,再回来回收它们的内存。 3.引用计数是另一种垃圾回收策略,需要记录值被引用了多少次。4.引用计数在代码中存在循环引用时会出现问题。 5.解除变量的引用不仅可以消除循环引用,而且对垃圾回收也有帮助。为促进内存回收,全局对象、全局对象的属性和循环引

2024-02-04 09:14:00 944

原创 ECMAScript 中所有函数的参数都是按值传递的

ECMAScript 中所有函数的参数都是按值传递的。这意味着函数外的值会被复制到函数内部的参数中,就像从一个变量复制到另一个变量一样。如果是原始值,那么就跟原始值变量的复制一样,如果是引用值,那么就跟引用值变量的复制一样。在按值传递参数时,值会被复制到一个局部变量(即一个命名参数,或者用 ECMAScript 的话说, 就是 arguments 对象中的一个槽位)。

2024-02-01 13:44:27 445

原创 JavaScript 基本引用类型Date详解

Date 类型提供关于日期和时间的信息,包括当前日期、时间及相关计算。Date 类型将日期保存为自协调世界时(UTC,Universal Time Coordinated)时间 1970 年 1 月 1 日午夜(零时)至今所经过的毫秒数。在不给 Date 构造函数传参数的情况下,创建的对象将保存当前日期和时间。要基于其他日期和时间创建日期对象,必须传入其毫秒表示。ECMAScript 为此提供了两个辅助方法:Date.parse() 和 Date.UTC()。

2024-01-30 13:47:48 564

原创 BOM history 对象详解

history 对象表示当前窗口首次使用以来用户的导航历史记录。因为 history 是 window 的属性, 所以每个 window 都有自己的 history 对象。出于安全考虑,这个对象不会暴露用户访问过的 URL, 但可以通过它在不知道实际 URL 的情况下前进和后退。 history 对象提供了操纵浏览器历史记录的能力,开发者可以确 定历史记录中包含多少个条目,并以编程方式实现在历史记录中导航,而且也可以修改历史记录。

2024-01-26 13:24:41 595

原创 BOM location 对象详解

location 是最有用的 BOM 对象之一,提供了当前窗口中加载文档的信息,以及通常的导航功能。 这个对象独特的地方在于,它既是 window 的属性,也是 document 的属性。也就是说, window.location 和 document.location 指向同一个对象。location 对象不仅保存着当前加载文档的信息,也保存着把 URL 解析为离散片段后能够通过属性访问的信息。

2024-01-25 13:46:34 747

原创 JavaScript 执行上下文与作用域

全局上下文是最外层的上下文。根据 ECMAScript 实现的宿主环境,表示全局上下文的对象可能不一 样。在浏览器中,全局上下文就是我们常说的 window 对象,因此所有通过 var 定义的全局变量和函数都会成为 window 对象的属性和方法。使用 let 和 const 的顶级声明不会定义在全局上下文中,但在作用域链解析上效果是一样的。上下文在其所有代码都执行完毕后会被销毁,包括定义在它上面的所有变量和函数。上下文中的代码在执行的时候,会创建变量对象的一个作用域链。

2024-01-24 13:48:02 877

原创 apply、call、bind的区别 如何实现一个bind

apply、call、bind 的作用是改变函数执行时的上下文,简而言之就是改变函数运行时的 this 指向。apply 接受两个参数,第一个参数是 this 的指向,第二个参数是函数接受的参数,以数组的形式传入改变 this 指向后原函数会立即执行,且此方法只是临时改变 this 指向一次。call 方法的第一个参数也是 this 的指向,后面传入的是一个参数列表,跟 apply 一样,改变 this 指向后原函数会立即执行,且此方法只是临时改变this 指向一次

2024-01-12 13:32:09 447

原创 var、let、const 之间的区别

var、let、const 三者区别:var 声明的变量存在变量提升 , 即变量可以在声明之前调用 , 值为 undefined;let 和 const 不存在变量提升 , 即它们所声明的变量一定要在声明后使用 , 否则报错。var 不存在块级作用域;let 和 const 存在块级作用域。var 允许重复声明变量,后面声明的变量会覆盖前面的变量声明;let 和 const 在同一作用域不允许重复声明变量。var 和 let 可以修改已经声明的变量;const 声明一个只读的常量,值不能改变。

2024-01-10 13:29:45 1007

原创 ES6 新增 Set、Map 两种数据结构的理解

Set 是 es6 新增的数据结构 , 类似于数组 , 但是成员的值都是唯一的 , 没有重复的值 , 我们一般称为集合。Map 类型是键值对的有序列表 , 而 键和值都可以是任意类型**

2024-01-09 13:30:17 935

原创 FormData 对象的基本使用

FormData 代表表单数据,是浏览器的原生对象。它可以当作构造函数使用,构造一个表单实例。它也可以接受一个表单的 DOM 节点当作参数,将表单的所有元素及其值,转换成一个个键值对,包含在返回的实例对象里面。FormData()还有第三种用法,如果想把“提交”(Submit)按钮也加入表单的键值对,可以把按钮的 DOM 节点当作FormData()的第二个参数。

2024-01-04 09:55:11 949

原创 Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同

在逻辑组织和逻辑复用方面, Composition API 是优于 Options API;因为 Composition API 几乎是函数,会有更好的类型推断;Composition API 对 tree-shaking 友好,代码也更容易压缩;Composition API 中见不到 this 的使用,减少了 this 指向不明的情况;如果是小型组件,可以继续使用 Options API ,也是十分友好的

2024-01-02 14:01:01 1080

原创 Ts 接口interface 与 对象type 的异同

很多对象类型既可以用 interface 表示,也可以用 type 表示。而且,两者往往可以换用,几乎所有的 interface 命令都可以改写为 type 命令。命令也有类似作用,通过定义一个类,同时定义一个对象类型。这表明,interface 是开放的,可以添加属性,type 是封闭的,不能添加属性,只能定义新的 type。上面示例中,type 可以扩展原始数据类型 string,interface 就不行。运算符,表示同时具备两个类型的特征,因此可以起到两个对象类型合并的作用。

2023-12-22 13:57:27 111

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除