![](https://img-blog.csdnimg.cn/e10549c724124136872f506bdcac9c1b.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 67
js
北城笑笑
Hello World. 祖国万岁,恩典龙裔️。
展开
-
JavaScript第 13 篇,JavaScript节流函数,JavaScript节流功能的应用(JS节流函数,节流功能的应用与解析,深入了解JavaScript节流函数)
节流就是某一高频事件不断被触发时,将多次执行变成每隔一段时间执行,具体点就是减少一个事件在一段时间内的触发频率,它是一种常用的函数优化技术,可以限制函数的执行频率,从而提高网页的性能和用户体验,这里带你深入了解下JavaScript节流函数的概念、实现原理和应用场景,并提供一些实用的代码示例。原创 2023-04-04 19:14:55 · 11627 阅读 · 0 评论 -
JavaScript第1篇,NodeJS的安装和使用,NodeJS安装过程,详细步骤教学,及配置环境变量(nodejs安装使用步骤)
⭐Node.js安装过程,详细步骤教学,及配置环境变量。此电脑>属性>高级系统设置>环境变量>系统变量>选择变量Path>点击编辑>点击新建(输入路径:C:\Program Files\nodejs\),然后记得确定保存。原创 2022-09-16 10:25:33 · 4211 阅读 · 0 评论 -
JavaScript第2篇,JavaScript判断数组的7种方法,使用详细(JS判断数组的方法,JS判断数据的方法)
⭐今天分享一下,判断一个数据是否是一个数组的方法,具体判断方法如下;var arr = [ ]; arr._proto_ === Array.prototype //true arr.constructor === Array //true arr instanceof Array //true Array.isArray(arr) //true原创 2022-09-28 09:36:03 · 1132 阅读 · 1 评论 -
JavaScript第3篇,JavaScript点击下载功能,如何实现?(vue项目中,点击下载上传文件功能)
第一步:首先点击下载事件时创建一个a标签;第二步:将a标签隐藏;第三步:给a标签添加下载链接 "域名+接口+参数"(拼接下载地址和参数);第四步:给a标签添加一个download属性,属性值就是文件名称否则下载出来的文件是没有属性的( 代码中,name会有斜杠,但不影响使用);第五步:将上面创建的a标签加入到body的尾部;第六步:最后执行a标签。原创 2022-10-21 11:53:15 · 3957 阅读 · 0 评论 -
JavaScript第4篇,JavaScript深拷贝函数(js深拷贝,JavaScript递归函数,实现深拷贝)
JavaScript的深拷贝和浅拷贝大家都比较熟悉,今天来分享下深拷贝,就是使用该函数时,会复制拷贝一份该数据,修改该数据属性,不会改变原有数据,就是把复制的对象所引用的对象全都复制了一遍;function deepClone(obj) { //判断传进来的参数类型不是对象数组 或者是null时 直接返回 if (typeof obj !== "object" || obj == null) { return obj }原创 2022-11-16 00:54:28 · 14718 阅读 · 5 评论 -
JavaScript第5篇,JavaScript生成rgb随机色(JavaScript函数生成rgb随即色)
// Math.random是生成0-1之间的随机数 *256 的范围就变成0.xx-255.7// Math.floor 向下取整就变成 0-255// 拼接返回},原创 2022-11-16 12:10:18 · 2619 阅读 · 0 评论 -
JavaScript第6篇,JavaScript常用数组方法,详细1(js中常用的数组方法)
.reduce()、.map().、slice().、splice(注意和split()的区分)、.filter()、.includes()、 .forEach()、.indexOf()、.find()、.flat()原创 2022-11-20 23:14:07 · 422 阅读 · 0 评论 -
JavaScript第 7 篇,JavaScript常用数组方法,详细2(js中常用的数组方法)
.push()、.pop()、.unshift()、.shift()、.concat()、.sort()、.reverse()、.every()、.some()、.join()、.fill()、原创 2022-11-24 00:38:45 · 276 阅读 · 0 评论 -
JavaScript第 8 篇,JavaScript空值合并运算符,JS常用运算符,使用详细(JS空值合并运算符,JavaScript常用运算符)
在JavaScript中,合并空值运算符(Nullish Coalescing Operator)是一个双问号 ?? 运算符。它用于检查一个表达式是否为null或undefined,如果表达式的值是null或undefined,那么它将返回右侧表达式的值;否则,它会返回左侧表达式的值。这里来记录一下,合并空值运算符和常用的运算符的应用原创 2023-03-16 12:34:42 · 706 阅读 · 0 评论 -
JavaScript第 9 篇,addEventListener is not a function , JavaScript添加监听事件时报错
在写JS代码的时候,控制台有时候会遇到这样的报错,addEventListener is not a function,说addEventListener不是一个函数,具体原因是因为侦听事件的事件源不对,事件源应该是一个元素,而非其它原创 2023-03-21 16:10:25 · 5322 阅读 · 0 评论 -
JavaScript第 10 篇,JavaScript中的for in和for of的区别(JS中的for循环)
JavaScript中的for循环大家都知道,今天来分享下for in和for of在使用时区别和注意事项,顺便做个笔记;for of 1、用来遍历键值,循环得到value,只能用来遍历可迭代的数据;2、例如:数组、字符串、set、map等,可遍历;3、使用arr[Symbol.iterator]()方法判断该数据中是否有next()函数,来决定该数据是否可迭代原创 2023-03-22 13:43:13 · 1170 阅读 · 0 评论 -
JavaScript第 11 篇,JavaScript中的scrollTop(JavaScript中的scrollTop,JS滚动到顶部)
⭐scrollTop是JavaScript中一个非常有用且重要的方法,它用于获取或设置元素的垂直滚动条位置,实现各种滚动相关的功能,无论是回到顶部、滚动到指定位置还是监听滚动事件,都需要用到scrollTop,在本文中,我们将深入了解scrollTop的用法和实际应用,这是一张scrollTop的关系图,仅供参考原创 2023-03-30 23:35:36 · 18652 阅读 · 5 评论 -
JavaScript 和 HTML5 Canvas实现图像绘制与处理
JavaScript 和 HTML5 的 canvas 元素提供了强大的图形和图像处理功能,使得开发者能够在网页上创建动态和交互式的视觉体验。这里我们将探讨如何使用 canvas 和 JavaScript 来处理图像加载,并在其上进行图像绘制。我们将实现一个简单的示例,演示图像加载完成后的基本绘制过程,并在此基础上扩展一些更高级的功能。记录一下原创 2024-07-31 18:12:12 · 1426 阅读 · 0 评论 -
JavaScrip使用new Date()默认获取一周前到今天的日期,年月日时分秒
JavaScrip使用new Date()默认获取一周前到今天的日期,年月日时分秒,yyyy-MM-dd HH:mm:ss原创 2024-07-01 15:13:54 · 250 阅读 · 0 评论 -
前端播放RTSP视频流,使用FLV请求RTSP视频流播放(Vue项目,在Vue中使用插件flv.js请求RTSP视频流播放)
在浏览器中请求 RTSP 视频流并进行播放时,直接使用原生的浏览器 API 是行不通的,因为它们不支持 RTSP 协议。为了解决这个问题,开发者通常会选择使用像 flv.js 这样的库,它专为在浏览器中播放 FLV 和其他流媒体格式设计。然而,flv.js 本身并不直接支持 RTSP,这意味着我们需要一个额外的步骤来桥接 RTSP 和 flv.js。原创 2024-07-01 15:08:28 · 2787 阅读 · 3 评论 -
JavaScript的未来发展趋势,探索JavaScript中最新技术(JavaScript可视化编程到服务端渲染)
随着 Web 应用程序变得越来越复杂和交互性的需求日益增加,基于浏览器的三维可视化编程变得愈发重要。在这方面,Three.js 和 WebGL 技术正在引领潮流。我们将深入探讨它们的原理、应用场景以及如何利用它们创建引人入胜的交互式体验。2.Three.js 和 WebGLThree.js是一个基于 WebGL 的 JavaScript 3D 库,它使创建复杂的 3D 图形变得简单。通过 Three.js,开发者可以轻松地在 Web 浏览器中创建交互式的 3D 场景、动画和游戏等。原创 2024-05-10 11:16:28 · 1171 阅读 · 2 评论 -
Canvas绘制图片和区域(前端使用Canvas绘制图片,并在图片上绘制区域)
1. 初始化Canvas画布// 获取canvas容器元素并设置宽高// 获取canvas元素并获取2D绘图上下文// 2. 初始化图片Canvas// 计算画布和图片的宽高比} else {// 设置三个canvas的宽高// 加载图片并绘制到imgCanvas上console.log("图片已加载");// 渲染已有数据// 3. 开始绘制。原创 2024-05-10 10:10:22 · 4858 阅读 · 5 评论 -
JavaScript防抖函数执行多个事件处理函数,监听浏览器窗口拖拽事件(Vue防抖函数执行多个事件处理函数)
当用户调整浏览器窗口大小时,浏览器会触发 resize 事件。通常,我们希望在窗口大小改变时执行一些操作,但是如果用户频繁调整窗口大小,可能会导致这些操作被频繁触发,影响页面性能和用户体验。原创 2024-04-17 14:13:40 · 547 阅读 · 0 评论 -
JavaScript实现全选、反选功能(Vue全选、反选,js原生全选、反选)
首先为复选框添加了一个事件监听器,当用户点击该复选框时,将触发该事件;然后在事件处理函数中,通过遍历所有复选框,将它们的选中状态设置为与复选框相同的状态。原创 2024-04-02 19:39:43 · 2601 阅读 · 0 评论 -
WebSocket第1篇,WebSocket函数封装,使用详细,WebSocket前端使用详细(websocket使用详细,websocket相关属性和请求体传参,在vue中使用websocket)
websocket事件(仅供参考): let socket= null; //socket/ws socket = new WebSocket("//请求地址");//定义socket socket.onopen 连接建立时触发 socket.onmessage客户端接受服务端数据时触发 socket.onerror 通信错误时触发原创 2022-12-11 20:19:12 · 4440 阅读 · 0 评论 -
JavaScript中的export、export default、exports和module.exports(export、export default、exports使用详细)
export和export default是ES6 模块系统的核心部分,用于从文件中导出函数、关键字,对象或值,使其可以在其他文件中通过import语句导入和使用,而exports是CommonJS模块系统的一部分,在 Node.js 环境中,你可以使用exports或module.exports来导出模块,但这并不是 ES6 标准的一部分。原创 2024-03-05 15:38:20 · 13172 阅读 · 1 评论 -
JavaScript中的switch语句(js中的switch语句使用详细)
在示例中,根据当前日期获取一周中的星期几,并通过语句打印出对应的日子名称。如果不匹配已列出的任何情况,则输出“未知的日期”。原创 2024-03-05 12:42:43 · 15245 阅读 · 0 评论 -
JavaScript中的new Proxy()和Object.defineProperty使用详细,Vue2和vue3中双向数据绑定的原理
Object.defineProperty()是 JavaScript 中一个强大且常用的方法,用于定义对象属性,允许我们精确地控制属性的行为,包括读取、写入和删除等操作,是vue2中双向数据绑定的原理;new Proxy() 是ES6中一种用于创建代理对象的特殊对象,它允许我们拦截并自定义目标对象的操作,例如属性访问、赋值、函数调用等。Proxy提供了一种机制,可以在目标对象上设置拦截器,从而拦截对目标对象的操作,是vue3中双向数据绑定的原理。原创 2024-02-29 20:20:54 · 1682 阅读 · 0 评论 -
JavaScript中的new map()和new set()使用详细(new map()和new set()的区别)
在JavaScript中,new Map()用于创建一个新的 Map 对象。Map 对象是一种键值对的集合,其中的键是唯一的,值可以重复。而 new Set() 是用来创建一个新的 Set 对象的语法。Set 对象是一种集合,其中的值是唯一的,没有重复的值。 new Set()可以用来创建一个空的 Set 对象,在创建时传入一个数组或类数组对象,Set 会自动去除重复的值。原创 2024-02-29 19:50:55 · 4143 阅读 · 0 评论 -
JavaScript中的async/await(ES8的async/await)
JavaScript中的async/await允许我们以同步的方式编写异步代码,使得代码更加简洁 易读和维护,是JavaScript中用于处理异步操作的关键字。async和await提供了对异步操作的错误处理机制,可通过try...catch语句来捕获异步函数中的异常。原创 2024-02-29 09:30:00 · 288 阅读 · 0 评论 -
手写JavaScript中的Promise.all方法(JS中Promise.all的执行过程)
Promise.all是JavaScript中一种用于处理多个Promise对象的方法,该方法接收一个数组作为参数,并返回一个新的Promise对象。这个新的对象会在所有Promise对象都成功解析后解析,解析的结果是一个数组,包含了所有Promise对象解析后的结果。解析时如果任何一个Promise对象失败,则这个新的Promise实例会立即失败,并返回第一个失败的Promise对象的错误信息。原创 2024-02-27 21:56:37 · 652 阅读 · 0 评论 -
JavaScript中的new Promise对象和Promise.all、Promise.race方法(JS中的Promise和Promise.all、Promise.race)
简介:JavaScript中的Promise对象是随着ES6(ECMAScript 2015)规范发布的,它是异步编程中的一种解决方案或者规范,解决了回调地狱的问题。Promise即是一个同步任务也是一个微任务,它会首先执行自身的同步任务,只有在执行了resolve或者reject后,才会执行.then或者.catch操作,变成微任务。它本质上是一个构造函数,可以实例化一个对象,从中获取异步操作的最终状态,使得异步代码可以像同步代码一样进行链式调用,从而提高代码的可读性和可维护性。原创 2024-02-27 11:35:18 · 2733 阅读 · 0 评论 -
JavaScript中的时间日期函数new Date()(JS中5种获取时间戳的函数)
new Date()函数用于创建一个新的 Date 对象,Date 对象表示一个特定的时间点,它包含年、月、日、小时、分钟、秒和毫秒等信息。Date.now()函数用于获取当前时间的时间戳。时间戳是一个数字,表示从 1970 年 1 月 1 日 00:00:00 UTC 开始到当前时间的毫秒数。原创 2023-11-30 16:24:39 · 21578 阅读 · 1 评论 -
JavaScript中的substring方法和fill方法,使用详细(fill方法获取一天24小时)
substring方法用于从一个字符串中提取指定位置的子字符串。它接受两个参数,即起始索引和结束索引(可选)。返回的子字符串包括起始索引处的字符,但不包括结束索引处的字符。参数:startIndex:要提取子字符串的起始索引。endIndex(可选):要提取子字符串的结束索引(不包含在内)。// 从索引7开始提取子字符串 console.log(subStr1);// 输出 "World!原创 2023-07-05 14:02:08 · 755 阅读 · 0 评论 -
ES6中的Class关键字和super()方法,使用详细(class类和super()方法)
在ES6中,我们可以使用class关键字来定义类,并通过extends关键字实现类的继承,在子类中,我们可以使用super()关键字来调用父类的构造函数。原创 2023-06-29 17:50:25 · 1393 阅读 · 0 评论 -
JavaScript中的classList.toggle()方法和CSS的自定义属性var,使用详细(css中var变量怎么应用)
CSS中的var(变量)是CSS3中的新特性,用于定义可重用的值,类似于编程语言中的变量;它允许您在整个CSS文件中定义一个值,并在需要时使用该值。这样可以使CSS更加灵活和易于维护;classList.toggle()方法,使用详细,下面也有实例说明。原创 2023-06-25 18:09:09 · 3666 阅读 · 0 评论 -
JavaScript拖拽API,ondragstart、ondragover、ondragenter、ondrop,使用详细(JavaScript常用原生拖拽API)
JavaScript的拖拽api相必大家都不陌生,今天来分享下元素在拖动时触发的事件,顺便做下记录。原创 2023-05-30 16:01:31 · 4927 阅读 · 1 评论 -
JavaScript中splice()、slice()、split()三种方法的区别,及使用详细
splice、slice、split是JavaScript中,比较常用的三个方法,表面看起来有点相像,用处却大不相同,今天就来分别介绍下它们的用法。原创 2023-05-18 14:39:51 · 3549 阅读 · 0 评论 -
JavaScript数组方法 find() ,使用详细(js的 find() 方法)
find() 方法是 JavaScript 中用于在数组中查找特定条件的第一个元素,如果找到一个元素使得回调函数返回true,则该元素作为结果返回;如果没有找到这样的元素,则返回undefined,该函数不会修改原始数组原创 2023-05-05 17:47:04 · 33934 阅读 · 1 评论 -
JavaScript中的new BroadcastChannel()方法,BroadcastChannel API使用介绍
BroadcastChannel API用于跨窗口、跨标签页和跨框架之间的通信,它使得多个客户端能够订阅同一个消息频道,并且在其中一个客户端发送消息后,所有订阅该频道的客户端都会收到相同的消息。原创 2023-05-05 08:29:19 · 1344 阅读 · 0 评论 -
JavaScript第 16 篇,JavaScript获取时间(JS中的new Date(),获取前7天时间,获取前6年时间)
⭐我们在写Echarts的时候,难免会用到JavaScript中的 new Date() 方法用来获取时间。今天就来分享下它的基本用法,简单记录一下。原创 2023-04-10 19:17:27 · 4476 阅读 · 0 评论 -
JavaScript第 15 篇,JavaScript数组拼接,将多个数组转换成二维数组(JS数组拼接,ECharts多维数组转换,JS将多个数组转换成二维数组)
⭐我们在写echarts的时候,数据通常是以数组的形式呈现的。然而有时候我们需要将多个数组进行合并,或者将一个多维数组转换为一个一维数组,以便我们进行操作和展示,这里记录一下,如何将多个数组合并,以及将一个多维数组转换成一维数组。原创 2023-04-06 19:17:13 · 1659 阅读 · 0 评论 -
JavaScript第 14 篇,JavaScript函数中的arguments(js函数中的arguments,函数默认参数arguments)
在JavaScript中,arguments是一个类数组对象,它包含了函数调用时传入的所有参数。尽管它看起来像数组,但实际上并不是真正的数组,这意味着它不具有数组的所有方法如.push()、.pop()等。JS的函数参数和其他的语言有些不同,它并不介意你传进来多少个参数,以及参数的数据类。即使你在定义函数时,只设置了两个形参,那么在调用这个函数时,你给他传递一个、两个,或者是其它四个、五个实参,它都能接收,之所以会这样是因为在函数参数内部是用一个数组来表示的,在函数体内是通过原创 2023-04-06 01:35:31 · 2667 阅读 · 0 评论 -
JavaScript第 12 篇,JavaScript防抖功能(JS防抖函数,防抖功能的应用与解析,手把手教学)
防抖就是某一高频事件不断被触发时,仅在最后一次真正执行事件处理代码,将多次执行变为最后一次执行,具体点就是我们在触发高频事件后,n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。其实,防抖和节流都是防止函数多次调用。原创 2023-04-04 09:01:14 · 13390 阅读 · 0 评论 -
Vue第33篇,js-cookie和vue-cookies(Cookie使用教程)
⭐Cookies是网站发送至用户浏览器的小型文本文件,存储于用户设备上,用于追踪用户活动、保存偏好设置及维护登录状态。当用户重访网站时,浏览器会回传Cookies信息,使网站能识别用户,提供个性化服务。简而言之,Cookies帮助网站记住用户,实现定制化体验。而js-cookie和vue-cookies都是vue项目中的插件。下载相关依赖后,可以在项目中用来存储、获取、删除Cookie等操作,思路相同,但操作时稍有不同,当然也可以用原生js来获取Cookie。这里来记录一下原创 2023-03-02 21:04:05 · 2395 阅读 · 0 评论