数据处理
关注
分享
扫一扫
卡洛背心
前端攻城狮，记录工作的点点滴滴。
展开
-
使用谷歌浏览器的speechSynthesis的API，实现语音播报功能
测试实现效果：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title></title></head><body> <button onclick='playRadio()' id="played">播报语音</button> <button onclick='pauseRadi原创 2021-10-30 17:26:11 · 2330 阅读 · 2 评论 -
new FormData()的使用及问题记录
创建一个formData对象var formData = new FormData();往formData里面添加数据formData.append("username", "Groucho");获取formData里面的数据formData.get("username");删除formData里面的某个key值formData.delete('username')获取formData里面的所有数据在控制台打印formData是看不到的。因为外界访问不到，你使用append方法后，原创 2021-10-11 15:06:30 · 1857 阅读 · 1 评论 -
深入浅出的说出对Promises的理解
Promises/A+ 规范作为 Modern JavaScript 基础设施的一部分，Promises 对前端开发者而言异常重要。它是 async/await 语法的基础，是 JavaScript 中处理异步的标准形式。并且，未来的 Web API，只要是异步的，都会以 Promises 的形式出现。如果不理解 Promises 相关的知识和运行机制，将来可能无法完成 Web 开发的日常工作。因此，Promises 成为了前端面试中的必问问题之一。在网络上，也可以搜索到很多 Promises原创 2021-09-25 00:51:21 · 234 阅读 · 0 评论 -
检查JavaScript对象上是否存在某一个属性？
在JavaScript中，有几种方法可以检查对象上是否存在一个属性。选择哪种方法在很大程度上取决于实际需求，所以需要我们了解每种方法的工作原理。让我们来看看最常用的几种方法。1. 用undefined判断自有属性和继承属性均可判断。var o={x:1};o.x!==undefined; //trueo.y!==undefined; //falseo.toString!==undefined //true2. in 操作符如果一个属性存在于一个对象或其原.原创 2021-09-16 15:39:56 · 4642 阅读 · 0 评论 -
常用的JS格式化函数，手机号和身份证号脱敏处理等
以下为一些常用的格式化函数，建议收藏备用！隐藏手机号中间4位 // 隐藏手机号中间4位 formatPhone(phone) { phone += ''; return phone.replace(/(\d{3})\d*(\d{4})/g, '$1***$2') }, 隐藏身份证号中11位 // 隐藏身份证号中11位 formatIdentity(number) { number += ''; .原创 2021-09-07 21:57:11 · 1090 阅读 · 0 评论 -
如何在项目中使用pdf.js查看PDF文件
最近在做后台管理类的系统，需要在web页面阅读pdf文件。发现一个很好用的插件 pdf.js，简单的介绍一下官方文档地址：http://mozilla.github.io/pdf.js/在线演示地址：http://mozilla.github.com/pdf.js/web/viewer.html介绍一下官网的例子页面引入pdf.js使用PDFJS.getDocument(‘helloworld.pdf’)方式加载要打开的PDF文件通过Promise的then方式处理后续的方法PDFJ原创 2021-08-29 17:00:05 · 2611 阅读 · 1 评论 -
使用GraphQL实现递归查询
问题描述最近遇到了一个场景，想创建一个 GraphQL 查询，该查询可以递归调用类型的子项。就像一个棵树(Tree)，数据中有孩子，孩子可能还有孩子，深度不确定。结构如下：type Menu { id:ID; parentId:String; name:String; createTime:String; updateTime:String #子类也是Menu类型 children:Menu[] }如果可以确定 层级深度，,这里假设深度为 3，我们可以这样写GraphQ原创 2021-08-29 12:09:15 · 1149 阅读 · 2 评论 -
借助axios的拦截器实现Vue.js中登陆状态校验的思路
在做Vue中的登陆校验时，思路应该是这样的：先确定一个路由页面是否需要登陆才能访问，如果需要，就需要用户登陆，如果不需要，用户直接可以访问。那么，首先来说，后台系统中，不一定每一个页面都要进行登陆权限，所以我们要通过路由的meta标签对需要做校验的路由页面做好标记，在配置路由时，我们可以在meta属性中，加入是否需要登陆的字段，如果requireAuth是true，就说明这条路由需要登陆才能访问：{ path: '/userInfo', name: 'userInfo', meta: ..原创 2021-07-19 18:43:30 · 393 阅读 · 2 评论 -
JS依据对象的某个属性值进行排序
代码如下：var friends = [{name: 'John', age: 30}, {name: 'Ana', age: 20},{name: 'Chris', age: 25}]; function comparePerson(a, b){ if (a.age < b.age){ return -1 } if (a.age > b.age){ return 1 } return 0; } console.log(friends.sort(c原创 2021-04-27 15:28:01 · 138 阅读 · 0 评论 -
实用的JavaScript开发技巧
判断是否为移动端// 利用是否拥有移动端事件来判断 得到一个布尔值'ontouchend' in document禁止复制网页内容<script type="text/javascript"> // oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单 document.oncontextmenu=new Function("event.returnValue=false"); // onselectstart几乎可以用于所有对象，.原创 2021-04-20 15:34:24 · 116 阅读 · 0 评论 -
sessionStorage和localStorage 使用方法（存储与取值）
html5中Web Storage的存储方式，今天介绍 localStorage和sessionStorage两种。这两者区别在于用于localStorage持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。而sessionStorage存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。也就是你在打开一个页面时记录sessionStorage,当你把页面或者浏览器关闭时sessio.原创 2021-02-04 15:15:39 · 2639 阅读 · 0 评论 -
HTML5 Video 添加字幕，操作简单，不需要剪辑
HTML5 Video视频支持外挂字幕，文件后缀名是.vtt，称为WebVTT格式，专门的web字幕格式。使用很简单，用一个<track>元素即可，例如：官方文档：https://w3c.github.io/webvtt/效果如下：****<video id="video"> <source src="example.mp4" type="video/mp4"> <track src="example.vtt" default>&原创 2021-01-10 21:03:37 · 6011 阅读 · 7 评论 -
通过判断对象的某个属性值然后进行排序
数组的sort只能对单纯的数字进行排序，对多位数的排序结果也不是很理想，这里对sort方法进行强化。var arr = [ {name:'aaa',age:12}, {name:'bbb',age:28}, {name:'ccc',age:18}, {name:'ccc',age:108}, {name:'ccc',age:5}];function compare(property){ return function(a,b){ va.原创 2020-12-25 14:42:29 · 173 阅读 · 1 评论 -
设置定时器和清除定时器的最佳方案
以下就是推荐的设置定时器和清除定时器的推荐方案这种方式的好处，是代码易读，且非常简洁。还可以有效防止设置定时器以后，忘记清除定时器的事情发生。const timer = setInterval(() =>{ // 操作内容 }, 1000); // 通过$once来监听定时器，在beforeDestroy钩子中可以被清除。this.$once('hook:beforeDestroy', ()原创 2020-09-28 19:07:45 · 960 阅读 · 0 评论 -
Object.prototype.toString.call(),判断一个数据的准确数据类型
Object.prototype.toString.call(null)使用该方法可以直接准确的确定该数据的真正的数据类型原创 2020-09-08 17:51:47 · 116 阅读 · 0 评论 -
使用javaScript处理数组，将不满足的过滤，两种方法
处理数组[1500, 1200, 2000, 2100, 1800],把超过2000的删除// 方式1var array = [1500,1200,2000,2100,1800];var tmpArray = [];for (var i = 0; i < array.length; i++) { if(array[i] < 2000) { tmpArray.push(array[i]); }}console.log(tmpArray);// 方式2var arr原创 2020-09-02 15:20:55 · 446 阅读 · 0 评论 -
使用javaScript实现在一个数组中，去掉重复的元素
编写一个方法去掉一个数组的重复元素var array = ['c', 'a', 'z', 'a', 'x', 'a'];function clear() { var o = {}; for (var i = 0; i < array.length; i++) { var item = array[i]; if (o[item]) { o[item]++; }else{ o[item] = 1; } } var tmpArra原创 2020-09-02 15:18:21 · 473 阅读 · 0 评论 -
将字符串中的特定字符替换为其他字符
把字符串中所有的o替换成xvar s = 'abcoefoxyozzopp';do { s = s.replace('o', 'x');} while (s.indexOf('o') > -1);console.log(s);原创 2020-09-02 14:58:36 · 2035 阅读 · 0 评论 -
判断在一个字符串中出现次数最多的字符，并统计其次数
判断一个字符串中出现次数最多的字符，并统计次数var s = 'abcoefoxyozzopp';var o = {};for (var i = 0; i < s.length; i++) { var item = s.charAt(i); if (o[item]) { o[item] ++; }else{ o[item] = 1; }}var max = 0;var char ;for(var key in o) { if (max < o原创 2020-09-02 14:53:00 · 294 阅读 · 0 评论 -
判断一个字符串中，特定字母出现的位置，并存储在数组中
"abcoefoxyozsadasdzopp"查找字符串中所有o出现的位置var s = 'abcoefoxyozsadasdzopp';var array = [];do { var index = s.indexOf('o', index + 1); if (index != -1) { array.push(index); }} while (index > -1);console.log(array);原创 2020-09-02 14:47:59 · 659 阅读 · 0 评论 -
限制输入正整数和特殊字符及空格的正则
正整数if (value.toString().trim() === '') { callback(new Error('请输入每场次优惠金额')) } else if (value.toString().trim() === '' || !new RegExp('^[1-9][0-9]*$').test(value)) { callback(new Error('请输入正整数'))原创 2020-08-28 17:09:28 · 827 阅读 · 0 评论 -
Element的展示数据超过固定数之和展示...，使用js实现
列表显示限制部分内容：<el-table-column label="部门" width="160"> <template slot-scope="scope"> <el-popover trigger="hover" placement="top"> <p>{{ scope.row.title }}</p> <div slot="reference" cl原创 2020-08-28 17:05:55 · 309 阅读 · 0 评论 -
原生JS，实现数组对象内容渲染成表格
将数组里面的内容填充到表格之中，并将属性设置为表头<!DOCTYPE html><html lang=""> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style type="text/.原创 2020-08-26 17:21:41 · 3271 阅读 · 2 评论 -
根据字符串id取出数组对象数据中的name
接口数据：source: “1,2”目标数据：在线服务，工单服务部门数据：sourceTypes: [{ id: '1', name: '在线服务' }, { id: '2', name: '工单服务' }, { id: '3', name: '热线服务' }],const arr = row.source.split(',')const names = arr.m原创 2020-08-26 15:44:50 · 1967 阅读 · 0 评论 -
javaScript判断数组内容去重方法
数据内容为：arr = [“111”,“222”,“333”,“444”,“111”]arrRepeat (arr) { var arrStr = JSON.stringify(arr) for (var i = 0; i < arr.length; i++) { if (arrStr.indexOf(arr[i]) !== arrStr.lastIndexOf(arr[i])) { return true }原创 2020-08-25 15:36:16 · 215 阅读 · 0 评论