JavaScript
文章平均质量分 76
分享JavaScript学习笔记
来杯卡布奇洛
学习永无止境
展开
-
typeof 与 instanceof 的区别,实现一个全局通用的数据类型判断方法
为了实现一个全局通用的数据类型判断方法,可以使用 Object.prototype.toString() 方法,它能够准确地返回对象的内部 [[Class]] 属性。如果需要通用检测数据类型,可以采用 Object.prototype.toString,调用该方法,统一返回格式为 “[object Xxx]” 的字符串。而 typeof 也存在弊端,它虽然可以判断基础数据类型(null 除外),但是引用数据类型中,除了 function 类型以外,其他的也无法判断。原创 2024-08-27 15:18:23 · 396 阅读 · 0 评论 -
js 获取当年周数列表以及当前日期是第几周
注意,这个函数的实现是基于 ISO 8601 标准的,即一年的第一周从第一个星期四开始计算。如果你需要使用其他定义的周数计算方式,可以根据实际需求进行修改。这段代码首先获取当前日期,然后通过 getWeekNumber() 函数计算当前日期是一年中的第几周。最后输出结果,格式为 “xx年第xx周”。然后循环遍历,将周数信息添加到 weekList 数组中并返回。该函数首先获取当前年份,然后计算出当年第一天所在的星期几。根据第一个星期四的日期,计算出当年的周数。原创 2024-07-29 14:00:50 · 491 阅读 · 0 评论 -
各种数据类型的 Blob 对象以及使用场景
在 JavaScript 中,您可以使用 Blob 对象来生成各种数据类型的 Blob 对象。在 Web 页面上显示。原创 2024-07-17 16:30:43 · 343 阅读 · 0 评论 -
防抖与节流的使用场景与实现
与防抖不同的是,节流会保证一个函数在一定时间内只执行一次。防抖是一种常见的 JavaScript 技术,用于控制频繁触发的事件,例如窗口大小调整、鼠标移动、键盘输入等。节流的原理是立即触发,之后忽略用户操作,规定时间后才会再次触发(节流类似于英雄联盟里的英雄平A,一定是内点击多次只进行攻击一次)然后设置一个新的定时器,在 delay 毫秒后执行原始的 func 函数。返回一个新的函数,这个新函数会在事件触发时被调用。返回一个新的函数,这个新函数会在事件触发时被调用。在新函数内部,首先获取当前的时间戳。原创 2024-07-09 14:58:20 · 263 阅读 · 0 评论 -
js 实现将后端请求来的 Blob 数据保存到用户选择的任意目录
Window 接口的 showSaveFilePicker() 方法用于显示一个文件选择器,以允许用户保存一个文件。可以选择一个已有文件覆盖保存,也可以输入名字新建一个文件。这段代码显示文件保存对话框,允许用户选择保存文件的位置和名称。// 1: 从后端获取 Blob 数据,这里就直接模拟一个 Blob 数据。使用 showSaveFilePicker 让用户选择保存文件的位置。// 3: 创建一个可写流,并将 Blob 数据写入用户选择的文件中。将 Blob 数据写入用户选择的文件。原创 2024-06-17 14:50:44 · 919 阅读 · 0 评论 -
window.location.href 传递参数以及目标页面接收参数的方式
在 JavaScript 中,你可以通过修改 window.location.href 来传递参数到另一个页面。通常,这些参数会附加在 URL 的查询字符串部分。查询字符串以问号 (?) 开始,并且参数之间用与号 (&) 分隔。在目标页面,你可以使用 JavaScript 来解析 URL 中的查询字符串,并提取参数。这样,你就可以在目标页面中获取并使用传递的参数了。原创 2024-06-13 10:11:59 · 2029 阅读 · 0 评论 -
一些有趣的 js 功能函数
当你需要获取某年某月的最后一天getLastDate(new Date('2023-03-04')) // Fri Mar 31 2023 00:00:00 GMT+0800 (中国标准时间) getLastDate(new Date('2023-03-04')) . toLocaleDateString() // 2023/3/31。原创 2023-07-28 15:09:50 · 218 阅读 · 0 评论 -
vite中使用 vite- aliases 插件报错
vite-aliases 报错:Failed to resolve entry for package "vite-aliases". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." specifier in "vite-aliases" package [plugin externalize-deps]原创 2023-06-14 14:28:48 · 1624 阅读 · 0 评论 -
vue 模拟 chatgpt 聊天效果:js 实现逐字显示、延时函数模拟对话
模拟 chatgpt 聊天功能,展示对话效果。其中比较有意义的技术点是:js 实现逐字显示、延时函数,同步遍历。chatgpt 聊天效果原创 2023-03-08 15:09:26 · 14327 阅读 · 4 评论 -
js 实现页面一段时间内没有操作,执行退出、默认动画等其他功能
实现这种功能只需要设置一个倒计时,当监听到 keydown、mousemove、mousewheel、click 等事件时,重置倒计时。若倒计时为 0 时,触发相应事件,执行制定操作即可。有时会有这种需求:当用户在指定之间内没有对页面进行任何操作,则执行默认的动画,或者退出系统。监听的事件可以根据实际需要进行修改。原创 2023-03-08 10:08:24 · 1198 阅读 · 0 评论 -
双击元素进入、退出全屏
如果一个元素 A 在请求进去全屏模式之前,已经存在其他元素处于全屏状态,当这个元素 A 退出全屏模式之后,之前的元素仍然处于全屏状态。document.fullscreenElement:返回当前文档中正在以全屏模式显示的Element节点,如果没有使用全屏模式,则返回null。方法让当前文档退出全屏模式,它会让文档回退到上一个调用 Element.requestFullscreen() 方法进入全屏模式之前的状态。实现元素双击进入全屏以及退出全屏功能。判断当前是否是全屏模式,还可以使用类似。原创 2023-02-23 10:47:13 · 274 阅读 · 0 评论 -
js sort 函数排序,中文数组排序
使用 sort 函数对数组排序时,默认情况下元素按照转换为的字符串的各个字符的 Unicode 位点进行排序。这样只能满足一般的英文排序和数字排序,想要自定义排序:对于数字可以简单的使用 或 这种形式,对于英文和中文可以使用 函数。英文排序数字排序中文排序...原创 2022-06-24 13:24:56 · 3161 阅读 · 0 评论 -
JavaScript高级 - 6 - EventLoop(事件循环)、宏任务、微任务
JavaScript高级 - 6 - EventLoop、宏任务、微任务1. JavaScript 是单线程语言2. 同步任务和异步任务3. 同步任务和异步任务的执行过程4. 事件循环1. JavaScript 是单线程语言JavaScript 是一门单线程执行的编程语言,同一时间只能做一件事情。单线程执行任务队列的问题:如果前一个任务非常耗时,则后续任务就不得不一直等待,从而导致程序假死的问题。2. 同步任务和异步任务为了防止某个耗时任务导致程序假死的问题,JavaScript 把待执行的任务原创 2022-04-19 08:21:53 · 596 阅读 · 0 评论 -
vue : 无法加载文件 C:\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。
vue : 无法加载文件 C:\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。问题:在 windows环境下,安装@vue/cli 脚手架之后,执行 vue -V 报错。报错信息:vue : 无法加载文件 C:\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。原因分析:禁止执行脚本,用户权限不足解决方案:以管理员身份运行 powerShell输入入命令: set-ExecutionPolicy Rem原创 2021-10-15 11:24:18 · 1641 阅读 · 0 评论 -
JavaScript高级 - 5 - 构造函数和原型
JavaScript高级 - 5 - 构造函数和原型1. 构造函数和原型1.1 对象的三种创建方式--复习1.2 静态成员和实例成员1.2.1 实例成员1.2.2 静态成员1.3 构造函数的问题1.4 构造函数原型 prototype1.5 对象原型1.6 constructor 构造函数1.7 原型链1.8 构造函数实例和原型对象三角关系1.9 原型对象中this指向1.10 通过原型为数组扩展内置方法2. 继承2.1 call()2.2 使用call函数继承父构造函数中的属性2.3 借用原型对象继承父构原创 2020-08-31 09:58:38 · 226 阅读 · 0 评论 -
JavaScript高级 - 4 - 闭包和递归
JavaScript高级 - 4 - 闭包和递归1. 闭包1.1 变量的作用域复习1.2 什么是闭包1.3 闭包的作用1.4 闭包的案例2. 递归2.1 什么是递归2.2 利用递归求1~n的阶乘2.3 利用递归求斐波那契数列2.4 利用递归遍历数据1. 闭包1.1 变量的作用域复习变量根据作用域的不同分为两种:全局变量和局部变量。函数内部可以使用全局变量。函数外部不可以使用局部变量。当函数执行完毕,本作用域内的局部变量会销毁。1.2 什么是闭包闭包(closure)指有权访问另一个函数作原创 2020-08-30 19:28:48 · 161 阅读 · 0 评论 -
JavaScript高级 - 3 - 严格模式
JavaScript高级 - 3 - 严格模式什么是严格模式开启严格模式严格模式中的变化什么是严格模式JavaScript 除了提供正常模式外,还提供了严格模式(strict mode)。ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式,即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持,旧版本浏览器中会被忽略。严格模式对正常的 JavaScript 语义做了一些更改:消除了 Javascript 语法的一些不合理、不严谨之处,减少了一原创 2020-08-30 18:36:16 · 95 阅读 · 0 评论 -
JavaScript高级 - 2 - 改变函数内部this指向(call、apply、bind)
JavaScript高级 - 2 - 改变函数内部this指向(call、apply、bind)1. 函数的定义和调用1.1 函数的定义方式1.2 函数的调用2.this2.1函数内部的this指向2.2 改变函数内部 this 指向2.2.1 call方法2.2.2 apply方法2.2.3 bind方法2.2.4 call、apply、bind三者的异同1. 函数的定义和调用1.1 函数的定义方式方式1:函数声明方式 function 关键字 (命名函数)function fn(){}原创 2020-08-30 18:17:02 · 219 阅读 · 0 评论 -
JavaScript高级 - 1 - 类的使用
JavaScript高级 - 1 - 类的使用1. 面向过程与面向对象1.1 面向过程1.2 面向对象1.3 面向过程与面向对象对比2. 对象与类2.1 对象2.1.1 创建对象2.2 类2.2.1创建类2.2.2 类中添加属性和方法2.2.3类的继承3. 案例:面向对象版 tab 栏切换3.1功能需求3.2案例准备3.3切换3.4添加3.5删除3.6编辑1. 面向过程与面向对象1.1 面向过程面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可原创 2020-08-30 17:25:47 · 147 阅读 · 0 评论 -
JavaScript基础 - 14 - JavaScript内置对象
javaScript基础学习 - 14 - JavaScript内置对象14.1 内置对象14.2 查文档14.3 Math对象14.4 日期对象14.5 数组对象14.5.1 创建数组的两种方式14.5.2 检测是否为数组14.5.3 添加删除数组元素的方法14.5.4 数组排序14.5.5 数组索引方法14.5.6 数组转换为字符串14.5.7 其他方法14.6 字符串对象14.6.1 基本包装类型14.6.2 字符串的不可变14.6.3 根据字符返回位置14.6.4 根据位置返回字符14.6.5 字符原创 2020-08-24 11:37:14 · 196 阅读 · 0 评论 -
JavaScript基础 - 15 - JavaScript简单数据类型和复杂数据类型
javaScript基础学习 - 15 - JavaScript简单数据类型和复杂数据类型15.1 简单数据类型15.2 复杂数据类型15.3 堆栈15.4 简单类型传参15.5 复杂数据类型传参15.1 简单数据类型简单类型(基本数据类型、值类型):在存储时变量中存储的是值本身,包括string ,number,boolean,undefined,null15.2 复杂数据类型复杂数据类型(引用类型):在存储时变量中存储的仅仅是地址(引用),通过 new 关键字创建的对象(系统对象、自定义对象),转载 2020-08-24 11:00:25 · 159 阅读 · 0 评论 -
JavaScript基础 - 13 - JavaScript对象
javaScript基础学习 - 13 - JavaScript对象13.1 对象的相关概念13.2 创建对象的三种方式13.3 对象的使用13.4 遍历对象案例代码点击这里13.1 对象的相关概念什么是对象?在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。对象是由属性和方法组成的。属性:事物的特征,在对象中用属性来表示(常用名词)方法:事物的行为,在对象中用方法来表示(常用动词)为什么需要对象原创 2020-08-24 10:09:10 · 99 阅读 · 0 评论 -
JavaScript基础 - 12 - JavaScript变量、函数预解析(变量、函数提升)
javaScript基础学习 - 12 - JavaScript变量预解析(变量提升)12.1 预解析的相关概念12.2 变量预解析12.3 函数预解析11.4 函数表达式声明函数问题案例代码点击这里12.1 预解析的相关概念JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行。预解析:在当前作用域下, JS 代码执行之前,浏览器会默认把带有 var 和 functio原创 2020-08-24 09:58:34 · 129 阅读 · 0 评论 -
javaScript基础学习 - 11 - JavaScript作用域
javaScript基础学习 - 11 - JavaScript作用域11.1 作用域概述11.2 全局作用域11.3 局部作用域11.4 JS没有块级作用域11.5 - 变量的作用域11.6 - 作用域链案例代码点击这里11.1 作用域概述通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。JavaScript(es6前)中的作用域有两种:全局作用域局部作原创 2020-08-24 09:48:55 · 143 阅读 · 0 评论 -
JavaScript基础 - 10 - JavaScript函数
javaScript基础学习 - 10 - JavaScript函数10.1 函数的概念10.2 函数的使用声明函数调用函数函数的封装10.3 函数的参数函数参数语法函数形参和实参数量不匹配时10.4 函数的返回值return 语句break ,continue ,return 的区别10.5 arguments的使用10.6 函数案例10.7 函数的两种声明方式10.1 函数的概念在 JS 里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。虽然 for循环语句也能实现一原创 2020-08-18 16:18:05 · 111 阅读 · 0 评论 -
JavaScript基础 - 9 - JavaScript数组
javaScript基础学习 - 9 - JavaScript数组9.1 数组的概念9.2 创建数组9.3 获取数组中的元素9.4 遍历数组9.5 数组中新增元素9.1 数组的概念数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式。数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。9.2 创建数组JS 中创建数组有两种方式:利用 new 创建数组var 数组名 = new Array() ;原创 2020-08-18 16:09:14 · 102 阅读 · 0 评论 -
JavaScript基础 - 8 - JavaScript代码规范
javaScript基础学习 - 8 -JavaScript代码规范8.1 标识符命名规范8.2 操作符规范8.3 单行注释规范8.4 其他规范8.1 标识符命名规范变量、函数的命名必须要有意义变量的名称一般用名词函数的名称一般用动词8.2 操作符规范// 操作符的左右两侧各保留一个空格for (var i = 1; i <= 5; i++) { if (i == 3) { break; // 直接退出整个 for 循环,跳到整个for循环下面的语句 }原创 2020-08-18 15:27:17 · 109 阅读 · 0 评论 -
JavaScript基础 - 7 - JavaScript循环
javaScript基础学习 - 7 - JavaScript循环7.1 for循环7.2 双重for循环7.3 for 循环小结7.4 while循环7.5 do-while循环7.6 continue、break案例代码点击这里7.1 for循环语法结构for(初始化变量; 条件表达式; 操作表达式 ){ //循环体}名称作用初始化变量通常被用于初始化一个计数器,该表达式可以使用 var 关键字声明新的变量,这个变量帮我们来记录次数。条件表达式原创 2020-08-18 15:16:43 · 209 阅读 · 0 评论 -
JavaScript基础 - 6 - JavaScript流程控制
javaScript基础学习 - 6 - JavaScript流程控制6 - 流程控制6.1 流程控制概念6.2 顺序流程控制6.3 分支流程控制6.4 三元表达式6.5 switch分支流程控制6 - 流程控制6.1 流程控制概念在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。简单理解:流程控制就是来控制代码按照一定结构顺序来执行。流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,代表三种代码执行的顺序。原创 2020-08-14 15:19:08 · 150 阅读 · 0 评论 -
JavaScript基础 - 5 - JavaScript运算符(操作符)
javaScript基础学习 - 5 - JavaScript运算符(操作符)5 - 运算符(操作符)5.1 运算符的分类5.2 算数运算符5.3 递增和递减运算符5.4 比较运算符5.5 逻辑运算符5.6 赋值运算符1.7 运算符优先级5 - 运算符(操作符)5.1 运算符的分类运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。JavaScript中常用的运算符有:算数运算符递增和递减运算符比较运算符逻辑运算符赋值运算符5.2 算数运算符转载 2020-08-14 15:03:44 · 133 阅读 · 0 评论 -
javaScript基础 - 4 - JavaScript 变量和数据类型
javaScript基础学习 - 4 - JavaScript变量4.1 - 关键字和保留字4.1.1 标识符4.1.2 关键字4.1.3 保留字4.2 - 变量的概念4.2.1 什么是变量4.2.2 变量在内存中的存储4.3 - 变量的使用4.3.1 声明变量4.3.2 赋值4.3.3 变量的初始化4.3.4 变量语法扩展4.3.5 变量命名规范4.4 - 数据类型4.4.1 数据类型简介4.4.2 简单数据类型4.4.3 获取变量数据类型4.4.4 数据类型转换4.1 - 关键字和保留字4.1.1原创 2020-08-14 09:39:11 · 282 阅读 · 0 评论 -
JavaScript基础 - 3 - 了解JavaScript
javaScript基础学习 - 3 - 初识JavaScript3 - 初识JavaScript3.1 JavaScript 是什么3.2 JavaScript的作用3.3 HTML/CSS/JS 的关系3.4 浏览器执行 JS 简介3.5 JS 的组成3.6 JS 初体验3.7 - JavaScript注释3.8 - JavaScript输入输出语句3 - 初识JavaScript3.1 JavaScript 是什么JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言原创 2020-08-13 10:17:35 · 143 阅读 · 0 评论 -
JavaScript基础 - 2 - 计算机基础
2 - 了解一点计算机基础2 - 了解一点计算机基础2.1 计算机组成2.2 数据存储2.3 数据存储单位2.4 程序运行2 - 了解一点计算机基础2.1 计算机组成2.2 数据存储计算机内部使用二进制 0 和 1来表示数据。所有数据,包括文件、图片等最终都是以二进制数据(0 和 1)的形式存放在硬盘中的。所有程序,包括操作系统,本质都是各种数据,也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件,其实就是把程序文件复制到硬盘中。硬盘、内存都是保存的二进制数据。2.3 数据存储原创 2020-08-13 10:06:30 · 88 阅读 · 0 评论 -
JavaScript基础 - 1 - 理解编程语言
1 - 编程语言1 - 编程语言1.1 编程1.2 计算机语言1.3 编程语言1.4 翻译器1.5 编程语言和标记语言区别总结1 - 编程语言1.1 编程编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程。计算机程序:就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令。1.2 计算机语言计算机语言指用于人与计算机之间通讯的语言,它是人与计算机之间传递信息的原创 2020-08-13 10:01:39 · 107 阅读 · 0 评论