![](https://img-blog.csdnimg.cn/efe8d0c3903e41e0a302f62450d3b41b.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
javascript
文章平均质量分 64
以实战为线索,学习JavaScript
卸载引擎
世上本没有码,搬的人多了便有了码。
展开
-
【JS】JS高阶函数——reduce()用法详解总结。你不得不知道的数组reduce高级用法!
reduce() 方法对数组中的每个元素执行一次提供的回调函数,且该函数为升序执行,并将其结果汇总为单个返回值。原创 2024-06-05 17:36:42 · 716 阅读 · 0 评论 -
【JS】jsx/tsx是什么?为什么 Vue3 的组件库都在使用 jsx/tsx?如何在Vue3中使用 jsx/tsx?
前几天得到一个疑问,为什么 React 要用 JSX 语法,这样显得代码好像“很耦合”。按照传统应推荐 html、js、css 模版分离,这样设计的优越性到底在哪里?原创 2023-03-10 11:41:00 · 2862 阅读 · 7 评论 -
【JS】Blob对象使用:前端实现流文件下载
前端由于安全方面的因素,不能直接对文件进行写操作。但是在实际的业务需求中,难免会遇到各种各样文件的下载、预览。如果服务端下载文件是以流的形式传递到前端,前端通常是将流转换为objectURL,借用a标签的download属性,进行文件下载。原创 2023-02-27 16:47:19 · 2730 阅读 · 0 评论 -
【JS】js数组分组,javascript实现数组的按属性分组
项目代码中有很多时候需要按一定的条件实现按属性分组。原创 2023-02-11 14:37:30 · 11517 阅读 · 0 评论 -
【Iot】阿里云物联网平台入门之什么是消息解析、什么是Topic、JavaScript脚本示例解析
即通过脚本(可以是js、php、python),将消息数据在设备自定义格式和JSON格式之间转换。Topic是消息发布(Pub)者和订阅(Sub)者之间的传输中介。物联网平台中,服务端和设备端通过Topic来实现消息通信。Topic是针对设备的概念,Topic类是针对产品的概念。产品的Topic类会自动映射到产品下的所有设备中,生成用于消息通信的具体设备Topic。Topic类:产品维度的Topic,是同一产品下不同设备的Topic集合。一个ProductKey下有多个Topic类。原创 2023-01-16 10:41:41 · 2753 阅读 · 0 评论 -
【JS】前端js实现树形结构:递归拼接树形结构与使用filter函数,不使用递归实现树形结构, O(n)解法
前端树形结构一般用于网页的地理位置输入框,地理位置级联选择,人员的部门选择等。常见的做法是使用递归实现树形结构,还有的使用filter函数可直接实现树形结构。原创 2022-12-13 14:27:06 · 3166 阅读 · 1 评论 -
【Web通信】WebSocket详解:WebSocket是什么?如何使用WebSocket?在Vue中封装WebSocket(心跳监测)。nginx配置websocket。
`WebSocket` 是一种基于`TCP`的**全双工**通信协议,它提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法。数据可以作为“数据包”在**两个方向**上传递,而无需中断连接也无需额外的 `HTTP` 请求。- 使用场景:对于需要连续数据交换的服务,例如网络游戏,实时交易系统等,WebSocket 尤其有用。最典型的场景就是聊天室。原创 2022-11-21 17:27:38 · 1559 阅读 · 1 评论 -
【Web通信】短轮询与长轮询(Long Polling)是什么?
早期的很多网站为具备数据推送能力,所在用的技术基本都是HTTP轮询。**轮询**是由由客户端每隔一段时间(如每隔5s)向服务器发出HTTP请求,服务端接收到请求后向客户端返回最新的数据。客户端的轮询方式一般为==短轮询==或==长轮询==。原创 2022-11-03 11:54:33 · 1126 阅读 · 0 评论 -
【JS】前端常见加密算法MD5、AES、RSA介绍,Vue3中使用jsencrypt使用rsa加密示例
哈希散列算法、对称加密算法和非对称加密算法。vue3中使用原创 2022-09-30 15:48:09 · 3996 阅读 · 0 评论 -
【JS】js正则匹配字符串是否为指定的某几个字符结尾
在做省市区级联选择的时候遇到,有的情况需要点击非最底层但是又要求可以选中,就需要 前端来增加判断。这里可以使用正则来判断label的值是否以某个字符结尾原创 2022-09-16 14:21:30 · 3146 阅读 · 0 评论 -
【JS】javascript判断数据类型的四种方法:Object.prototype.toString.call()、typeof、instanceof、constructor
1. 使用Object.prototype.toString.call() ---推荐方法2. 使用typeof3. 使用instanceof4. 使用constructor原创 2022-07-30 15:35:35 · 1485 阅读 · 0 评论 -
【JS】js给对象动态添加、设置、删除属性名和属性值
但是当我们遇到需要给对象动态添加属性和属性值时,点获取法好像就不方便了,尤其是我们不知道属性名的时候更麻烦。简短的回答是“有特别的顺序”整数属性会被进行排序,其他属性则按照创建的顺序显示。计算属性的含义很简单[fruit]含义是属性名应该从fruit变量中获取。注意如果我们遍历一个对象,我们获取属性的顺序是和属性添加时的顺序相同吗?当创建一个对象时,我们可以在对象字面量中使用方括号。js中访问对象属性一共有两种方法点获取法和方括号获取法。最常用的对象属性获取方法是点获取法。...原创 2022-07-30 14:51:39 · 19172 阅读 · 0 评论 -
前端token知识梳理:token如何存储?token过期如何处理?如何无感刷新token?
弄两个token,一个负责鉴权得token:access_token,一个负责刷新得token:refresh_token,每次请求的时候都带上这两个token,后端拦截器判断,先判断鉴权access_token是否有效和过期,如果有效的话,就允许访问。如果过期了,就判断刷新refresh_token是否有效,如果有效,就返回指定状态码,然后让前端根据这个状态码去吊用刷新token接口。如果刷新token失效了,就提示需要重新登录!...原创 2022-06-28 16:21:04 · 9749 阅读 · 4 评论 -
【axios】封装axios
Axios是一个基于 promise的 HTTP`库,可以用在浏览器和node.js中。(本文围绕XHR)axios提供两个http请求适配器,XHR和HTTP。XHR的核心是浏览器端的XMLHttpRequest对象;HTTP的核心是node的http.request方法。原创 2022-06-27 16:12:15 · 3163 阅读 · 0 评论 -
vue/js操作dom全屏切换,全屏打开dom.requestFullscreen();
if (dom.requestFullscreen) { dom.requestFullscreen(); } else if (dom.webkitRequestFullScreen) { dom.webkitRequestFullScreen(); } else if (dom.mozRequestFullScreen) { dom.mozRequestFullScreen(); } else { dom原创 2022-06-23 16:16:11 · 509 阅读 · 0 评论 -
字符串时间排序,对时间格式字符串进行排序
字符串时间排序,对时间格式字符串进行排序原创 2022-06-10 15:37:53 · 1915 阅读 · 0 评论 -
canvas绘画折线段
canvas绘画折线段,canvas快速简单划线画线原创 2022-06-08 15:50:46 · 152 阅读 · 0 评论 -
【Vue】Vue中的管道、过滤器的使用(Vue中filter函数)
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化(将数据转化为我们想要的格式)。过滤器可以用在两个地方:双花括号插值v-bind 表达式 (从 2.1.0+ 开始支持)过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号|指示:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId">&原创 2022-05-27 15:28:45 · 3691 阅读 · 0 评论 -
【Vue】Vue中获取当前点击元素的父元素、子元素、兄弟元素。如何隐藏指定元素的父级元素?
Vue如何获取当前点击元素?获取父元素、子元素、兄弟元素呢?如何隐藏指定元素的父级元素?通过绑定点击事件:例如:<button class="delete-btn" @click="delete($event, roomItem)">删除</button>/** * @description: 删除指定的房间 */ delete(event:any, roomItem:any) { let currentTarget = event.currentTarge原创 2022-05-23 17:11:36 · 1336 阅读 · 0 评论 -
【JS】正则表达式:提取字符串中第一个由小括号包裹的数字
【JS】正则表达式:提取字符串中第一个由小括号包裹的数字/** * @description: 提取字符串中第一个由小括号包裹的数字 * @param str 传入带括号的字符串 */ regStrToNum(str:string){ let result = str.match(/\((.+)\)/g); if (result){ let num = +result[0].slice(1, result[0].length-1); ret原创 2022-05-18 16:40:28 · 1072 阅读 · 0 评论 -
【JS】归纳总结现代javascript对象的引用和复制(浅拷贝与深拷贝)
在 JavaScript 中有 8 种基本的数据类型(注:7 种基本数据类型也称为原始类型 和 1 种引用类型)1. `number` 用于任何类型的数字:整数或浮点数,在 `±(2^53-1)` 范围内的整数。2. `bigint` 用于任意长度的整数。3. `string` 用于字符串:一个字符串可以包含 0 个或多个字符,所以没有单独的单字符类型。4. `boolean` 用于 `true` 和 `false`。5. `null` 用于未知的值 —— 只有一个 `null` 值的独立类型。原创 2022-05-14 17:56:23 · 770 阅读 · 2 评论 -
【JS】记录几个常用的javascript小技巧
1. 有时可以使用数组替换switch2. 或运算寻找第一个真值3. 与运算寻找第一个假值4. 两个非运算 !! 将某个值转化为布尔类型5. 空值合并运算符 '??'原创 2022-05-13 10:48:29 · 213 阅读 · 0 评论 -
proxy代理-如何配置 vue.config.js 解决跨域(生产中)?
proxy代理的原理是什么proxy代理-如何配置 vue.config.js 解决跨域(生产中)?原创 2022-03-19 17:41:34 · 4983 阅读 · 0 评论 -
【ES6】es6箭头函数的this指向
对于普通函数来说,内部的`this`指向函数运行时所在的对象,但是这一点对箭头函数不成立。箭头函数没有自己的`this`对象,内部的`this`就是定义时上层作用域中的`this`。也就是说,箭头函数内部的`this`指向是固定的,相比之下,普通函数的this指向是可变的。**总之,箭头函数根本没有自己的`this`,导致内部的`this`就是它所在的外层父级函数代码块的`this`。正是因为它没有`this`,所以也就不能用作构造函数。**原创 2022-03-19 16:42:41 · 740 阅读 · 0 评论 -
Openlayers 快速上手教程
通过上面例子可以看出 Openlayers 使用很简单,首先定义一个 Map,这是 Openlayers 的核心,它是一个容器,所有动作、设置等都在 Map 中展开。下面对上面 demo所简要说明:1. 将 Map 容器与 HTML 元素(这里是 DIV 元素 `map-id`)做绑定,Map 提供有 `target` 属性来绑定;2. 将图层 Layer 添加到 Map 中,这里是一个瓦面图层 `ol.layer.Tile`;3. 图层是一个包装盒,需要给图层添加具体的数据源:`new ol.s原创 2022-03-12 14:26:44 · 37529 阅读 · 13 评论 -
【Vue】vue2.6使用TS之vue-class-component与vue-property-decorator使用详解
(1)vue-class-component 是官方出品; vue-property-decorator 是社区出品;(2)vue-class-component 提供了Vue、Component等;(3)vue-property-decorator深度依赖了vue-class-component,拓展出了更多操作符:@Prop、@Emit、@Inject、@Model、@Provide、@Watch;原创 2022-03-06 15:11:05 · 4789 阅读 · 4 评论 -
【前端】常见英文缩写汇总、解析(持续更新...)
常见英文缩写汇总(持续更新...)1. Aasync3. CcamelCaseCLI8. HHMR11. K14. Nnpm16. PpropsProxy19.SSFCSPASSOT20. Rrefs21. S22. Ttsc23. WWDS1. Aasyncasync表示asynchronous异步的3. CcamelCasecamelCase骆驼拼写法,“骆驼拼写法”又分为两种:第一个词的首字母小写,后面每个词的首字母大写,叫做“小骆驼拼写法”(lowerCamelCase);第一个词的首字原创 2022-03-03 15:28:19 · 641 阅读 · 0 评论 -
【ES6】es6数组中对象去重,数组对象去重方法总结---filter()与reduce()实践
es6数组中对象去重,数组对象去重方法总结---filter()与reduce()实践。利用reduce()方法的累积器作用,在对由对象组成的数组进行遍历时,通过对象```hasObj```来标记数组中每个元素id是否出现过。如果出现过,那么遍历到的当前元素则不会放入到累积器中,如果没有出现,则添加到累积器中,这样保证了最后返回值中每个数据id的唯一性。原创 2022-03-02 22:04:49 · 14804 阅读 · 2 评论 -
【ES6】es6常用小技巧汇总 (持续更新中...)
es6常用小技巧汇总 (持续更新中...)原创 2022-02-27 11:19:27 · 1039 阅读 · 0 评论 -
【JS】JavaScript 删除某个数组中指定的对象
JavaScript 删除某个数组中指定的对象原创 2022-02-10 17:37:30 · 1345 阅读 · 0 评论 -
【ECharts】echarts可切换数据-柱状图
option = { //timeline基本配置都写在baseoption 中 baseOption: { timeline: { axisType: 'category', show: true, autoPlay: true, playInterval: 1000, data: ['2016', '2017', '2018', '2原创 2022-01-21 14:59:24 · 2934 阅读 · 0 评论 -
【JS】js将页面下载为图片---angular2中使用html2canvas将数据导出为图片,并下载到本地
1、安装html2canvas官方网站https://html2canvas.hertzen.com/npm install --save html2canvas2、在需要的组件中引入html2canvasimport html2canvas from 'html2canvas';在HTML5中,download是```<a>标签```的新增属性,download属性能让我们指定浏览器下载文件时的默认名称,也就是在客户端重命名下载文件。将download属性添加到```<a>链接```上,当我原创 2022-01-19 14:49:53 · 743 阅读 · 0 评论 -
【JS】JavaScrpt快速去除数组array中的空字符和undifined字符---使用es6的filter()函数
有时涉及字符和数组的转换工作,利用逗号分割和合并数组。但是遇到某个字符为空时出现str=" ,aa,dd",这样转化出来的数组就是["","",“aa”,"",“dd”]里面包含空字符。[""]的长度是1,[]长度是0,这样会影响到对数组是否为空的判断原创 2022-01-19 14:24:14 · 1502 阅读 · 0 评论 -
【JS】javascript中string数组和number数组之间快速互转---使用es6的map()函数
【JS】javascript中string数组和number数组之间快速互转---使用es6的map()函数原创 2022-01-19 14:14:19 · 928 阅读 · 0 评论 -
【JS】javascript正则表达式的基本使用(JavaScript RegExp 对象)
正则表达式,又称规则表达式。(英语:Regular Expression,在代码中常简写为regex、regexp或RE),计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个特定规则的文本。原创 2022-01-15 16:31:00 · 518 阅读 · 0 评论 -
【JS】 Web Storage的sessionStorage和localStorage与cookies、session的用法、区别
Web Storage存储机制是对HTML4中cookie存储机制的一个改善。HTML5提供可以以key/value形式在本地存储用户的浏览数据的Web Storage。Web Storage存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)两个存储对象来对网页的数据进行添加、删除、修改、查询操作。原创 2022-01-14 17:48:28 · 344 阅读 · 0 评论 -
【Angular/TS】一文弄懂安全导航操作符(?.)、非空断言操作符/可选链(?.) 、空值合并运算符
typescript安全导航操作符、非空断言操作符、可选链原创 2021-10-21 17:13:27 · 2109 阅读 · 0 评论 -
【JS】addEventListener()添加事件监听、removeEventListener()移除事件监听
addEventListener()添加事件监听、removeEventListener()移除事件监听原创 2022-01-10 11:40:37 · 8829 阅读 · 0 评论 -
【JS】彻底搞懂JavaScript中的this指向
彻底搞懂JavaScript中的this指向1. this指向什么2. this绑定规则2.1. 默认绑定案例一:普通函数调用2.2. 隐式绑定2.3. 显示绑定2.4. new绑定2.5. 规则优先级3. this规则之外4. this面试题1. this指向什么在全局作用域下,我们可以认为this就是指向的windowconsole.log(this); // windowvar name = "why";console.log(this.name); // whyconsole.log(原创 2022-01-09 14:53:43 · 549 阅读 · 0 评论 -
【Angular】angular范例写法汇总
【Angular】angular范例写法汇总:1. *ngIf与else2. angular图片加载路径3. tabView与router路由双向选中4. 蚂蚁zorro的nz-table点击选中行添加样式原创 2022-01-07 10:29:56 · 769 阅读 · 0 评论