javascript
关注
分享
扫一扫
文章平均质量分 52
微笑边缘的金元宝
观察入微的眼睛，波澜不惊的内心，希望我能拥有。
展开
-
JS的继承 ES5；javascript的继承；
基础概念说继承之前简单介绍一下，几个概念，有助于更深刻的理解继承。能用口述或者文字的形式，说一下什么是函数吗？按照犀牛书的说法，函数简单的说就是重复执行的代码块。函数是这样的一段JavaScript 代码，它只定义一次，但可能被执行或调用任意次。//使用方式//1.直接声明function(){}//2.函数表达式let fun = function(){}//3. new Function()var fun1 = new Function (arg1 , arg2 ,arg3 ,…原创 2022-01-29 16:30:22 · 1101 阅读 · 0 评论 -
移动端动态添加VConsole
<% if(process.env.VUE_APP_ENV !== 'production'){ %> <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> <script> var vConsole = new VConsole(); </script><% } %>原创 2021-04-06 14:57:04 · 991 阅读 · 0 评论 -
js html table转excel文件&& js获取(复制 / 粘贴板)的内容&&js复制table粘贴到excel中
前端转excel参考资料：https://blog.youkuaiyun.com/z591102/article/details/107632099[](https://blog.youkuaiyun.com/weixin_34116110/article/details/88953293[](https://blog.youkuaiyun.com/qq_42788117/article/details/111628383[](https://segmentfault.com/a/1190000018993619[](http:/原创 2021-07-06 17:34:15 · 1768 阅读 · 0 评论 -
实现一个简单的Promise
function promiseTest () { this.status = 'pending' // 2.1 this.msg = '' // 存储value与reason 成功或者失败的返回值 let process = arguments[0], that = this process (function () { that.status = 'resolve' that.msg = arguments[0] }, function () { that原创 2021-06-27 17:51:21 · 141 阅读 · 0 评论 -
vue2 + vant + typescript（TS）使用 postcss-to-px-viewport
module.exports = { ...... // css 相关配置 css: { // 为预处理器的 loader 传递自定义的选项。 loaderOptions: { postcss: { // 传递给 postcss-loader的自定义选项 plugins: [ require('postcss-px-to-viewport')({ unitToConvert: 'px', //需原创 2021-04-28 16:24:22 · 998 阅读 · 0 评论 -
前端计算两个日期时间相差的年数、月数、天数、小时数、分钟数、秒数（考虑每月天数不同做出特殊处理）
原生js实现/** * 计算两个日期时间相差的年数、月数、天数、小时数、分钟数、秒数 * DIFFTIME(开始时间,结束时间,[单位])，单位可以是 "y" 、"M"、"d"、"h"、"m"、"s"' * console.log(DIFFTIME('2019-6-30 13:20:00', '2020-10-01 11:20:32', 's')) */ export const DIFFTIME= function (startTime, endTime, unit) { // 判断当前月原创 2021-04-09 16:31:24 · 2951 阅读 · 0 评论 -
递归Object.freeze深度冻结
使用Object.freeze实现深度冻结var deepFreeze =function (obj) { var allProps = Object.getOwnPropertyNames(obj); // 同上：var allProps = Object.keys(obj); allProps.forEach(item => { if (typeof obj[item] === 'object') { deepFreeze(obj[item]); } }); return原创 2021-03-31 14:53:51 · 671 阅读 · 0 评论 -
处理eleemnt ui tree组件数据
根据element ui tree组件选项id，获取其祖籍路径例如 treeArr 数组：id： 为 1-1-1，一级一级往上找，其祖籍路径为： 1-1 => 1id： 为 1-2-2，一级一级往上找，其祖籍路径为： 1-2 => 1id： 为 1-3-4-3，一级一级往上找 ，其祖籍路径为：1-3-4 => 1-3 => 1const treeArr= [ { id: "1", children:[ { id: "1-1", childre原创 2020-12-15 21:21:02 · 230 阅读 · 0 评论 -
使用canvas画直线箭头
HTML<canvas class="CanvasArrow" width="66" height="50"></canvas>JSfunction createCanvas(obj) { // 使用Canvas 批量绘画的同一形状的图像的方法 var CN= obj.canvasNodes; var CNL= CN.length; var c=document.getElementsByClassNam原创 2020-11-06 20:28:18 · 819 阅读 · 0 评论 -
原生JS+CSS+HTML实现弹框 & 轮播
PC端<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模态框实现</title> <style> h4 { margin-left: 20px; } p { text-align: center;原创 2020-11-02 16:00:43 · 517 阅读 · 1 评论 -
this指向规则及原理
本文的主要目的是弄清楚为啥子this指向是这玩意,如果有哪位大神知道，请在评论区评论谢谢！首先：this指向的是一个object对象非严格模式全局console.log(this) // window分析上面的代码：在全局执行上下文的创建阶段this通过全局的作用域中[[scope]]属性查找到 window对象，确定了this指向。不清楚[[scope]]和执行上下文请阅读普通函数function fun1(){ function fun2() { console.log(this原创 2020-08-11 10:38:16 · 501 阅读 · 0 评论 -
JS-闭包
闭包（Closure） 是前端开发者经常会听到的一个概念，也是我们在求职面试中经常会遇到的题目之一。透过表象去理解闭包的本质，对前端开发者来说是进阶的必经之路。闭包跟执行上下文中的变量对象和作用域链有着千丝万缕的关系，深刻理解变量对象以及作用域链对理解闭包的本质有很大的帮助。MDN 中对闭包的定义是：闭包是函数和声明该函数的词法环境的组合。我认为 MDN 中对闭包的定义比较抽象以致并不能让我们很清楚地知道闭包是什么东西。在这里我直接给闭包做一个我认为比较本质且好理解（前提当然是你对执行上下文系列已经有转载 2020-08-07 14:09:44 · 256 阅读 · 0 评论 -
JS-执行上下文&this指向
本文的目的就是彻底弄清啥是执行上下文，搞起在 JavaScript 中，执行上下文是一个基本的概念，但其中又包含了变量对象、作用域链、this 指向等更深入的内容，深入理解执行上下文以及其中的内容，对我们以后理解 JavaScript 中其它更深入的知识点（函数/变量提升、闭包等）会有很大的帮助。执行上下文（Execution Context）执行上下文可以理解为当前代码的运行环境。 在 JavaScript 中，运行环境主要包含了全局环境和函数环境。在 JavaScript 代码运行过程中，最先进原创 2020-08-06 20:29:57 · 854 阅读 · 2 评论 -
JS-代码分析解释执行
第一步：当一个页面产生时浏览器就创建了一个window对象，它也有一个比较官方的说法：全局执行环境，所有的全局变量和函数都属于window的属性和方法。（当关闭网页或者关闭浏览器时，全局执行环境才会被销毁，包括其内部所有成员都被销毁。）第二步：加载脚本文件，加载完成后，JS引擎分析它的语法与词法是否合法，如果合法进入预编译。2.1、词法分析，语法分析生成抽象语法树（AST）和执行上下文2.1.1第一阶段：是分词（tokenize），又称为词法分析，其作用是将一行行的源码拆解成一个个 token。原创 2020-08-06 15:44:08 · 784 阅读 · 0 评论 -
JS-类型隐式转换
JS类型隐式转换内部用于实现类型转换的4个函数1.1 ToPrimitive ( input [ , PreferredType ] )ToPrimitive将input转换为基本数据类型，PreferredType要么不传，要么是number、string。1.1.1 PreferredType为number如果input本身就是原始类型，直接返回input。调用input.valueOf()，如果结果是原始类型，则返回这个结果。调用input.toString()，如果结果是原始类型，则返原创 2020-08-05 20:21:52 · 379 阅读 · 0 评论 -
js 用正则去掉小数点后面多于的0（正则非捕获）
const arr=['1200.00100','1200.00000','1200.','1200','1200.10000','0.120010000','0.000011111']const regexp=/(?:\.0*|(\.\d+?)0+)$/arr.forEach((item)=>{ console.log(item.replace(regexp,'$1'))})...转载 2020-04-22 00:28:30 · 2328 阅读 · 0 评论 -
vue element ui表单验证不通过，滚动到页面上第一个验证失败的输入框位置
this.$refs['refName'].validate((valid, object) => { if (valid) { // valid Boolean true||false // 正常处理 } else { this.scrollView(object) }})// 滚动到固定地方scrollView(object) { for (const i ...原创 2020-04-17 22:14:32 · 2872 阅读 · 0 评论 -
js去除一个字符串里面的数字和小数点以外的字符&& 金额输入框
简单的'22a@22.33#ewe33.44asa44'.replace(/[^\d\.]/g,'')结果："2222.3333.4444"评论：不满意复杂的&完整的'22a@22.33#ewe33.44asa44'.replace(/[^\d\.]/g,'').replace(".","$#$").replace(/\./g,"").replace("$#$",".")...原创 2020-04-17 21:15:39 · 3437 阅读 · 0 评论 -
深浅拷贝&拷贝一个js的函数
深浅拷贝概念&实现方法链接拷贝一个js的函数function fun () { console.log('copy')}// return后面必须多出一个空格var copy = (new Function('return '+fun.toString()))() 浅拷贝的方法Object.assign() 数组中concat和slice方法var arr = [...原创 2020-04-11 22:11:47 · 1024 阅读 · 0 评论 -
javascript function的参数arguments
function a(query){ b(query)}function b( queryB,arguments){}上面的情况就需要argument来获取function a传给 function b的值，并且不影响 function b 使用参数 queryB在vue中可以使用$event子组件出发this.$emit('vueA', queryA)子组件绑定的事件@vu...原创 2020-01-21 16:22:20 · 362 阅读 · 0 评论 -
js统计数组中元素（对象）的相同属相的个数
function isEqual () { const obj = {} for (let i = 0, len = arrData.length; i < len; i++) { if (!obj[arrData[i].equal]) { obj[arrData[i].equal] = 1 } else { obj[arrData[i].equal]++ } ...原创 2020-01-16 17:00:42 · 2150 阅读 · 0 评论 -
js滚到指定DOM节点
原生使用方法document.getElementById('id').scrollIntoView()vue使用方法let VDom = this.$refs['refsName']if (Object.prototype.toString.call(VDom ) !== '[object Object]') { // 这里是针对遍历的情况（多个输入框），取值为数组 VDom = ...原创 2020-01-15 15:29:29 · 2639 阅读 · 0 评论 -
utils
生成uuid判断是否相等其他类型转数组判断是否是PC端判断是否是某种设备或浏览器为css样式添加浏览器内核头驼峰转横杆格式化时间常用键位映射表判断两个对象或数组是否相等（简单对象）判空首字母大写判断两个简单对象是否相等判断数组是否相等劫持Vue的data，请勿乱用金额千分位加逗号数字转中文大写深拷贝对象日期格式化判断是否是自身属性遍历对象数组转对象默认警...原创 2019-12-25 16:15:55 · 456 阅读 · 0 评论 -
Object.keys()和hasOwnproperty
hasOwnproperty 判断自身属性是否存在var a = {a:'a',b:'b'}a.hasOwnProperty('c') // falsea.hasOwnProperty('b') // truehasOwnProperty 检查对象是否包含属性名，无法检查原型链上是否具有此属性名。所以我们要使用Object原型上的hasOwnProperty来判断var a = {...原创 2019-11-14 19:54:03 · 630 阅读 · 0 评论 -
JS文件中调用VUE的API
import Vue from 'vue' // 在js文件中引入vueconst instance = new Vue() // 生成vue实例命名为 instanceinstance.$set(data,'attrs','a') // 通过常亮instance直接调用vue的API原创 2019-11-14 16:57:35 · 1529 阅读 · 0 评论 -
javascript的对象内容对比（vue源码）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-11-13 16:49:50 · 401 阅读 · 1 评论 -
javascript的对象内容对比 初级阶段
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-11-13 15:27:22 · 151 阅读 · 0 评论 -
JS的toFixed的四舍五入精准问题
浏览器1.谷歌浏览器(55.0.2883.87 m)2.火狐浏览器(44.0.2)3.ie浏览器(11.545.10586.0)相关代码var num = 3.445;console.log(num.toFixed(2));执行结果1.谷歌 3.442.火狐 3.443.ie 3.45结论不同浏览器的js引擎对 四舍五入的边界值处理是不同的当进位判断数恰好是5 的时候 ...原创 2019-10-28 17:29:13 · 590 阅读 · 0 评论 -
数组的最大值和最小值
1、排序var arr = [12,56,25,5,82,51,22];// 先排序arr.sort(function (a, b) {return a-b;}); // [5,12,22,25,51,56]// 再取第一个和最后一个为最小值和最大值var min = arr[0]; // 5var max = arr[arr.length - 1]; // 562、假设法/...原创 2019-10-17 16:51:43 · 2658 阅读 · 0 评论 -
JavaScript RegExp 对象的lastIndex 属性
JavaScript RegExp 对象的lastIndex 属性说明该属性存放一个整数，它声明的是上一次匹配文本之后的第一个字符的位置。上次匹配的结果是由方法 RegExp.exec() 和 RegExp.test() 找到的，它们都以 lastIndex 属性所指的位置作为下次检索的起始点。这样，就可以通过反复调用这两个方法来遍历一个字符串中的所有匹配文本。该属性是可读可写的。只...原创 2019-10-17 11:24:13 · 568 阅读 · 0 评论 -
前端开发小窍门
//取出两个数组不同之处let userList = [{id:1},{id:2},{id:3},{id:4},{id:5},{id:6}];let checkboxList = [{id:1},{id:2}];userList = userList.filter(item =>{return checkboxList.map(item => item.id).indexOf(i...原创 2019-04-04 18:34:38 · 542 阅读 · 0 评论 -
JS 实现数字转换为大写中文金额
export const convertCurrency = money => { // 汉字的数字 const cnNums = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'] // 基本单位 const cnIntRadice = ['', '拾', '佰', '仟'] // 对应整数部分扩展单位 const ...转载 2019-03-25 16:30:24 · 1552 阅读 · 3 评论 -
JAVASCRIPT 分层概念
1）底层（框架提供）：封装DOM和Event相关操作，提供跨浏览器兼容的接口，扩展原生javascript语言本身不提供的但又特实用的接口，例如namespace;2）抽象类层（框架提供 统一自定义类的格式）：提供类的抽象层，用于统一框架组件层，自定义组件层和应用层中所有类的格式，例如统一初始化方法，毁灭方法，属性如何定义，监听事件在什么方法里等等等等;3）通用组件层（框架提供 继承自抽象...原创 2019-03-20 13:55:15 · 516 阅读 · 0 评论 -
event.target.dataset
dataset并不是典型意义上的JavaScript对象,而是个DOMStringMap对象,DOMStringMap是HTML5一种新的含有多个名-值对的交互变量.1、event.target.datasethttps://www.cnblogs.com/aichihuamei/p/6417268.html2、HTMLElement.datasethttps://developer....原创 2019-03-20 13:54:08 · 3566 阅读 · 0 评论 -
获取文件扩展名
完成 extname 函数，它会接受一个文件名作为参数，你需要返回它的扩展名。例如，输入 emoji.png，返回 .png。const extname = (filename) => {//声明一个常亮extname，有一个filename的参数 let s = ""; //声明一个string类型的变量 let arr = [".jpg",'.png','.gif'];//...原创 2019-03-20 13:53:15 · 929 阅读 · 0 评论 -
IVIEW对的table组件超出长度用省略号代替，使用气泡提示。
export function render(itemColumnCode,itemColumnlist){ return (h,params)=>{ if(params.row[itemColumnCode]){ let numberAndEnglish = String(params.row[itemColumnCode]).replace...原创 2019-03-20 13:50:03 · 4964 阅读 · 1 评论 -
Javascript的千分位和去除千分位
1、转成千分位，保留两位comdify(n) { let num = Number(n); let re = /\d{1,3}(?=(\d{3})+$)/g; let n1 = num.toFixed(2).replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) { return s1.replace(re, "$&amp;,"...原创 2019-03-11 18:43:18 · 1588 阅读 · 0 评论 -
Javascript的防抖和节流、VUE的防抖和节流
js原生函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函...原创 2019-03-11 19:18:15 · 1802 阅读 · 5 评论 -
JavaScript代码的整个执行过程和上下文的执行过程
JavaScript代码的整个执行过程上下文的执行过程原创 2019-04-02 15:51:36 · 209 阅读 · 0 评论 -
判断javascript的对象类型
1.typeof形如 :typeof undefined //undefined typeof 'qw' //stringtypeof 1 //numbertypeof true //Booleantypeof function()...原创 2019-04-08 20:14:50 · 469 阅读 · 0 评论