JavaScript
自由的音符
这个作者很懒,什么都没留下…
展开
-
瀑布流效果
瀑布流原创 2023-02-10 14:37:53 · 110 阅读 · 0 评论 -
趣-关于undefined的问题
undefined 懂了嗎原创 2022-07-04 17:43:30 · 415 阅读 · 0 评论 -
关于vue props 传值,子组件修改props数据,父组件数据随之改变的问题
1.最近完成一个table列表,控制cloumn的显示隐藏的功能时,发现一个问题,记录一下首先问题是:通过父组件传递一个array数据下去给到子组件,数据格式大概是这个样子// 列信息 columns: [ { key: 0, label: `付款时间`, visible: true }, { key: 1, label: `订单号`, visible: true }, { key: 2, label: `消费商家`, visible:原创 2022-04-15 12:07:48 · 2868 阅读 · 0 评论 -
vue3 + elementPlus 自定义指令 实现自动聚焦 自动选中 整数/小数点限制
定义指令import { App, nextTick } from 'vue'// 根据el获取inputconst getInput = (el: HTMLElement): HTMLInputElement | null => el instanceof HTMLInputElement ? el : el.querySelector('input')export default { install (app: App) { // v-focus 自动聚焦。对于非文转载 2021-10-21 17:33:34 · 1831 阅读 · 0 评论 -
数组扁平化并去重排序
数组扁平化flat(x) x表示想要拉平的层数,默认为1。 Infinity任意层数let arr=[1,[1,2,3,[1,2,3,4,[4,5,6,[6,7,8]]]]]console.log(...new Set(arr.flat(Infinity).sort((a,b)=>{a-b})))原创 2021-09-15 17:45:32 · 115 阅读 · 0 评论 -
js 基础
math.random用法Math.random():获取0~1随机数Math.floor() method rounds a number DOWNWARDS to the nearest integer, and returns the result. (小于等于 x,且与 x 最接近的整数。)其实返回值就是该数的整数位:Math.floor(0.666) --> 0Math.floor(39.2783) --> 39所以我们可以使用Math.floor(Math原创 2021-09-15 11:04:38 · 73 阅读 · 0 评论 -
搞懂js事件循环机制
**我终于搞懂了Javascript事件循环机制????**前言????一天 我在敲着代码突然经理说加个需求让UI和后端给我扔了原型图和接口 我说可以但是先把手头的码完 好等我码完了去看原型图 这时候又加了需求又有原型图和接口我以上的执行顺序应该是怎么样的呢?本文最后将通过下面这个贴近生活的案例分析js事件循环机制,如果不想重复查看理论知识可以直接移步到文章最后喔~为什么 Javascript 要是单线程的 ❓我们都知道,javascript从诞生之日起就是一门单线程的非阻转载 2021-07-01 18:04:04 · 1028 阅读 · 3 评论 -
getResponseHeader获取请求头数据
var req=new XMLHttpRequest();//省略若干代码req.getResponseHeader(‘Connection’); //是否保持链接req.getResponseHeader(“Content-type”);//响应类型req.getResponseHeader(‘Content-Encoding’); // 表示消息主体进行了何种方式的内容编码转换req.getResponseHeader(‘Content-Length’); //响应内容的长度req.getR转载 2021-06-28 14:13:17 · 2563 阅读 · 0 评论 -
base64图片下载
download() {this.resultDialog.picture.map((res, i) => {this.downloadFile(证据 ${i + 1}.png, res) // 此处 res 为 base64 数据图片 (data:image/jpg;base64,/…)})},downloadFile(fileName, content) {let aLink = document.createElement(‘a’);let blob = this.base64To转载 2021-05-18 11:22:20 · 245 阅读 · 0 评论 -
一行 JavaScript 代码搞定这些操作!(墙裂推荐)
JavaScript 可以做很多神奇的事情! 从复杂的框架到处理 API,有太多的东西需要学习。 但是,它也能让你只用一行代码就能做一些了不起的事情。 看看这 13 句 JavaScript 单行代码,会让你看起来像个专家!1. 获取一个随机布尔值 (true/false)这个函数使用 Math.random() 方法返回一个布尔值(true 或 false)。Math.random 将在 0 和 1 之间创建一个随机数,之后我们检查它是否高于或低于 0.5。这意味着得到真或假的几率是 50%/50%。转载 2021-04-28 11:01:42 · 90 阅读 · 0 评论 -
js 可选链操作符
我想在开发的时候,很多人都应该都写过这样的js判断:let arr = res && res.data && res.data.listif(res.data.type){...}是不是非常冗余但又不得不写,今天介绍的新语法就是为了解决这种问题的介绍下可选链操作符 ?.let arr = res?.data?.listif(res?.data?.list){...}介绍下可选链操作符 ??要是想设置默认值,以前我们是这么写的let arr = res原创 2021-04-26 13:55:55 · 757 阅读 · 0 评论 -
防抖节流 demo理解实现
防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。(信我,你看完肯定就懂了)从滚动条监听的例子说起先说一个常见的功能,很多网站会提供这么一个按钮:用于返回顶部。返回顶部按钮这个按钮只会在滚动到距离顶部一定位置之后才出现,那么我们现在抽象出这个功能需求-- 监听浏览器滚动事件,返回当前滚条与顶部的距离这个需求很简单,直接写:function showTop () { var scrollTop =转载 2021-04-14 14:48:45 · 160 阅读 · 0 评论 -
web端导出功能
新建一个observable 储存列表数据import Vue from 'vue';export const storeError = Vue.observable({ dataList: [], rowIndex: '',});export const mutations = { saveErrorList(value) { storeError.dataList = value; }, deleteErrorList(rowIndex) { store.原创 2021-04-13 14:24:56 · 428 阅读 · 0 评论 -
web端 筛选时间的工具方法
首先 在utils里新建一个 filter-time.js文件import dayjs from 'dayjs';class FilterTime { constructor(type, format) { this.type = type; this.format = format || 'YYYY-MM-DD HH:mm:ss'; this.time = this.mergeTime(); } //本月 monthStartTime() { r.原创 2021-04-13 13:57:50 · 289 阅读 · 1 评论 -
获取地址栏参数
在src-utils目录下新建一个文件,用于暴露获取参数函数src utils helper定义文件export function getQueryString(url) { url = url == null ? window.location.href : url; const search = url.substring(url.lastIndexOf('?') + 1); const obj = {}; const reg = /([^?&=]+)=([^?&a原创 2021-01-18 13:44:24 · 98 阅读 · 0 评论 -
数组api 使用记录
数组的api在日常业务中使用频率相当高,所以高效且美观的处理,尤为重要Reduce1.let phoneArray=[{contactNo:1212123},{contactNo:23121215}] this.phoneArray2 = phoneArray.reduce((acc, cur) => { if (!cur.id) { acc.push(cur.contactNo); }原创 2020-12-22 15:29:39 · 64 阅读 · 0 评论 -
一个简单的复用函数
在日常work中,总会出现同一种类型的请求多次出现,为保证代码高复用,可读性等因素,复用函数就很易用key:请求需要传的参数名name:不同请求的方法名getDict(key, name) { //查询申请事项 this.$Req.Req({ path: "/api/sysDict/getChildren.anon", params: { parentCode: key }, okFunc: (res) => {原创 2020-11-06 14:13:52 · 367 阅读 · 0 评论 -
用于同步微信浏览器视频自定义进度条与底部control不同步隐藏的问题
First if all ,这个问题出于一个直播教育项目(移动端),由于需求,所以需要一进入页面就将视频横屏播放,但是横屏之后,Tcplayer的视频进度条,监听方式依旧是监听左右滑动,所以进度条在手机横屏状态下,依旧是需要左右滑动改变进度,上图基于此,引入了移动框架的滑块功能(并且是竖向的),<van-slider v-model="progress" vertical @change="timeChange" bar-heigh原创 2020-11-06 12:03:01 · 448 阅读 · 0 评论 -
微信内置浏览器 H5页面点击输入框,键盘遮盖文本框的解决办法
在main.js里引入用就完事儿了window.addEventListener("resize", function() { if ( document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA" ) { window.setTimeout(function() { document.activeElement.scrollIntoViewIf原创 2020-10-29 17:52:09 · 678 阅读 · 0 评论 -
vue 点击下载按钮下载图片
样子就类似于下图:在data中定义一个变量addImg data() { return { adImg:require('../../../../public/aixin.png') }; },定义一个事件<div class="text" @click="downLoad" id="mubanId"> 下载模板 </div>downLoad() { this.click();原创 2020-10-29 16:13:13 · 2436 阅读 · 0 评论 -
vue 项目标签 点击下载文件
看网上,很多都说放在什么static、public目录,但是没什么用,最后发现一句代码的事(引入方式),话不多说,先上代码点击dom元素,创建一个a标签,给上download属性指定下载格式,如果是图片就png ,xsl就xsl,创建完之后,销毁。const path = require('../../../../public/aixin.png'); console.log(path); var a = document.createElement("a"); a原创 2020-10-27 11:58:46 · 1228 阅读 · 0 评论 -
js 使用记录(遇到的问题都放在这里)
filter判断数组对象中是否含有某字段 并且其数量不等于1 isPre = item.filter((item) => item["isPreview"] == 1).length !== 0; console.log(isPre, "isPre");原创 2020-09-29 11:08:10 · 84 阅读 · 0 评论 -
Math.xxx()函数
Math对象定义的数学运算 JavaScript支持一些复杂的算术运算,这些复杂运算通过作为Math对象的属性定义的函数和常量来实现:Math.pow(2,53) //=>9007199254740992:2的53次幂Math.round(.6) //=>1.0:四舍五入Math.ceil(.6) //=>1.0:向上求整Math.floor(.6) //=原创 2020-09-16 10:14:37 · 116 阅读 · 0 评论 -
常用的时间、日期处理方法
众所周知,JavaScript核心包含Data()构造函数,用来创建表示时间和日期的对象。如果给大家分享的是整篇的api,想必大家都没有什么看的欲望,如果你还对Data对象不是很了解,请先移步陪你读书今天主要跟大家梳理一下,常用的时间、日期处理方法,方便大家使用和理解格式化时间老生常谈,大概会这么写var format = function (time) { var y = time.getFullYear(); //getFullYear方法以四位数字返回年份转载 2020-07-21 00:27:05 · 317 阅读 · 0 评论 -
日期转换及基本业务处理--record一下
// 日期格式化Vue.prototype.$format = function(data) { let y = data.getFullYear(); //年份 let m = data.getMonth() + 1; //月份 if (m < 10) { m = "0" + m; } let d = data.getDate(); //日 if (d < 10) { d = "0" + d; } let h = data.getHours()原创 2020-07-20 23:34:29 · 151 阅读 · 0 评论 -
js 中国标准时间 转YYYY-MM-DD
var d = new Date(res.data.endTime);var datetime=d.getFullYear() + ‘-’ + (d.getMonth() + 1) + ‘-’ + d.getDate() + ’ ’ + d.getHours() + ‘:’ + d.getMinutes() + ‘:’ + d.getSeconds();原创 2020-07-20 16:26:23 · 243 阅读 · 1 评论 -
本地存储小结
localStorage存储,数据长期保存在客户端,重新打开浏览器数据也不会丢失sessionStorage存储,保存临时会话数据,浏览器关闭则数据丢失 ,用法类似//正常存储localStorage.setItem(“key”,“value”); //储存数据localStorage.getItem(“key”); //获取储存数据//json对象存储:var data = {i...原创 2020-02-24 12:19:57 · 160 阅读 · 0 评论 -
几种本地存储方式的区别
cookie,localStorage,sessionStorage,indexDB我们先来通过表格学习下这几种存储方式的区别特性cookielocalStoragesessionStorageindexDB数据生命周期一般由服务器生成,可以设置过期时间除非被清理,否则一直存在页面关闭就清理除非被清理,否则一直存在数据存储大小4K5M5M无限...原创 2020-02-21 12:07:42 · 2455 阅读 · 0 评论 -
事件的触发类型和事件代理
事件触发三阶段事件触发有三个阶段:window 往事件触发处传播,遇到注册的捕获事件会触发传播到事件触发处时触发注册的事件从事件触发处往 window 传播,遇到注册的冒泡事件会触发事件触发一般来说会按照上面的顺序进行,但是也有特例,如果给一个 body 中的子节点同时注册冒泡和捕获事件,事件触发会按照注册的顺序执行。// 以下会先打印冒泡然后是捕获node.addEventLi...原创 2020-02-21 11:48:00 · 446 阅读 · 0 评论 -
map,filter,reduce
map 作用是生成一个新数组,遍历原数组,将每个元素拿出来做一些变换然后放入到新的数组中。[1, 2, 3].map(v => v + 1) // -> [2, 3, 4]另外 map 的回调函数接受三个参数,分别是当前索引元素,索引,原数组['1','2','3'].map(parseInt)第一轮遍历 parseInt('1', 0) -> 1第二轮遍历 pa...原创 2020-02-18 19:46:33 · 233 阅读 · 0 评论 -
闭包
什么是闭包?闭包的定义其实很简单:函数 A 内部有一个函数 B,函数 B 可以访问到函数 A 中的变量,那么函数 B 就是闭包。function A() { let a = 1 window.B = function () { console.log(a) }}A()B() // 1很多人对于闭包的解释可能是函数嵌套了函数,然后返回一个函数。其实这个解释是不完...原创 2020-02-17 21:52:37 · 125 阅读 · 1 评论 -
JS中 [] == ![]结果为true,而 {} == !{}却为false,闻其究竟
console.log( [] == ![] ) // trueconsole.log( {} == !{} ) // false在比较字符串、数值和布尔值的相等性时,问题还比较简单。但在涉及到对象的比较时,问题就变得复杂了。最早的ECMAScript中的相等和不相等操作符会在执行比较之前,先将对象转换成相似的类型。后来,有人提出了这种转换到底是否合理的质疑。最后,ECMAScript的...原创 2020-02-17 21:35:17 · 439 阅读 · 0 评论 -
响应式布局和自适应布局的区别
响应式布局:就是在不同屏幕不同分辨上实现不同的展示方式。响应式布局能使网站在手机和平板电脑上有更好的浏览体验,也就就是说一个网站能后兼容多个终端,而不是为了每一个终端做一个特定的版本。自适应布局:就是能为了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术,需要开发多套界面来适应不同的终端。区别:1、自适应布局:是通过检测视口分辨率来判断当前访问的设备屏幕大小,从而请求...原创 2020-02-16 18:12:08 · 2954 阅读 · 1 评论 -
内置类型
概述ECMAScript 规范规定语言类型有六种 Undefined,Null,Boolean,String,Number,和 Object, ES6 又添加了一种基本类型,叫Symbol。其中 Object 是引用类型,其他是基本类型。他们的划分方式其实是其是否可以表示为固定长度, 比如Undefined,Null,Boolean,String,Number 这些可以有固定长度,因此是基本类...原创 2020-02-15 00:12:10 · 456 阅读 · 0 评论 -
浅拷贝与深拷贝
#浅拷贝与深拷贝为了更好的理解js的深浅拷贝,我们先来理解一些js基本的概念##数据类型javascript中的数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和复杂的数据类型(也称作引用数据类型-Object)。当一个变量存放基本数据类型时与复杂的数据类型时分别存在以下的特点:基本数据类型的特点:变量直接将基本数据类...原创 2020-02-13 00:08:00 · 99 阅读 · 0 评论