js应用及技巧
关注
分享
扫一扫
JavaScript 基础知识及开发使用技巧
moguPeople
一个切图仔~
展开
-
实现深度克隆/拷贝,解决循环引用
基础版(不能解决循环引用)基础版 function deepClone(obj){ // 如果参数为空则直接返回,如果为日期/正则 则也直接返回； if( obj == null ) return obj; if( obj instanceof Date ) return new Date(obj); if( obj instanceof RegExp ) return new RegExp(obj); if(typeof obj !== 'object') return原创 2020-10-28 11:51:24 · 1363 阅读 · 0 评论 -
JS 设计模式-发布订阅与观察者模式
高级函数节流 防抖解决异步请求 计数器JS 设计模式 发布订阅 观察者原创 2020-10-15 17:51:33 · 346 阅读 · 0 评论 -
js - 回调函数的应用技巧之切片编程
应用场景：在不改动原函数的情况下，在函数前执行另一个函数； // 前置函数 在当前函数执行前面增加一个函数实现再不更改原函数的情况下 对目标进行预处理; Function.prototype.before = function(callBack){ let that = this; // 将 this 指向原函数； return function(){ callBack() // 执行 前置函数 that.apply(that, arguments) // 执行原函数原创 2020-10-15 15:04:46 · 396 阅读 · 0 评论 -
js - 回调函数的应用技巧之计数执行
在一些业务场景会有两个独立函数共同修改一个对象，而我们又不知道对象什么何时完成的时候，就要用回调函数来进行解决。如：有两个单独文本文件，我们需要获取里面的内容来填充一个对象，我们在填充完成之后来获取对象。获取文本文件并填充 let fs = require('fs'); function fn(acount, callBack){ let obj = {}; return function(key, data){ obj[key] = data; // 计数自原创 2020-10-15 10:20:30 · 340 阅读 · 1 评论 -
转：函数防抖与节流
在前端开发的过程中，经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。所以诞生了 防抖与节流函数防抖（debounce）所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。页面部分<div id="box" style="height:150px;line-height:150px;text-align:center; colo转载 2020-10-14 11:56:32 · 147 阅读 · 0 评论 -
你不知道的快速复制数组小秘密
方法1、arrayObject.slice(start,end) 快速深度复制一个多维数组关于 slice(start,end)方法说明参数描述start必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。end可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾原创 2020-09-11 14:16:44 · 236 阅读 · 0 评论 -
startsWith() 方法
startsWith() 方法用于检测字符串是否以指定的子字符串开始。如果是以指定的子字符串开头返回 true，否则 false。startsWith() 方法对大小写敏感。 var str = "Hello world"; var n = str.startsWith("Hello"); console.log(n) // true语法 string.startsWith(searchvalue, start)参数值参数描述searchvalue必需，要查找的字转载 2020-07-20 13:54:54 · 13213 阅读 · 0 评论 -
正则匹配身份证号
正则匹配身份证号 分为18位和15位首先写正则之前我们先明白身份证号的结构 18位地区： [1-6][1-9]\d{4}年的前两位： (18|19|20) 1800-2399年的后两位： \d{2}月份：((0[1-9])|10|11|12)天数： (([0-2][1-9])|10|20|30|31) 闰年不能禁止29+三位顺序码： \d{3}校验码...原创 2019-03-29 21:20:57 · 23096 阅读 · 3 评论 -
js String padStart()自动补全操作
padStart(targetLength [, padString]) 方法用另一个字符串填充当前字符串(重复，如果需要的话)，以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。targetLengt 目标长度padString 补充的字符串var str1 = "1";var str01 = sr1.padStart(2, '0')...原创 2019-12-11 09:47:55 · 1206 阅读 · 0 评论 -
JS 正则匹配整数和小数
正则匹配正整数和小数let _check = /^([1-9][\d]{0,6}|0)(\.[\d]{1,2})?$/; //限制小数点前后位数let _check = /^([1-9][\d]*|0)(\.[\d]+)?$/; //不限制小数点前后位数_check.test('9') // true_check.test('9.9') // true_check.test('9.90'...原创 2019-11-27 13:43:43 · 8107 阅读 · 2 评论 -
正则匹配替换最后一位字符
var bar = "abc?";// 需求替换/删除最后一位字符；var foo = bar.replace(/[&?]$/,""); // 用空字符串替换以"&"或者"?"结尾的字符串；输出： foo = "abc";未完待续…....原创 2018-09-06 18:12:34 · 14468 阅读 · 3 评论 -
JavaScript之浅拷贝与深拷贝
个人理解 仅供参考 如有不当 欢迎指正浅拷贝（shallow copy）：只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存； 当修改新旧对象某一个值时，新旧对象都会被修改； 深拷贝（deep copy）：复制并创建一个一摸一样的对象，不共享内存，修改新对象，旧对象保持不变。 一、浅拷贝...原创 2018-09-04 12:46:11 · 170 阅读 · 0 评论 -
获取浏览器视口宽高以及元素宽高
适用所有浏览器var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;var w = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeig...原创 2018-07-19 09:59:45 · 8326 阅读 · 0 评论 -
js优化-事件委托
概述：那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理：...转载 2018-07-16 23:46:38 · 170 阅读 · 0 评论 -
算法失精问题
浮点数在扩乘100倍时，会出现算法失精； 最简单的失精例子:0.1 + 0.2 = 0.30000000000000004有时候在处理小数时也会出现这种情况 比如：0.007*100 = 0.7000000000000001处理办法就是：//按照有效数字位数进行四舍五入，默认6位有效数字Math.signFigures = function(num, rank =...原创 2018-05-14 11:21:02 · 507 阅读 · 0 评论 -
检测对象是否是json
检测一个对象是否是一个对象的方法：if(typeof(obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length){ alert('是JSON对象'); } ...原创 2018-05-14 10:56:06 · 762 阅读 · 0 评论 -
javascript 原生仿写瀑布流;
瀑布流的效果 原理是初始列数top值为0，然后将第一行的高度添加到一个新的数组里，从第二行开始根据储存高度这个数组来，确定最低高度列，然后向最低高度列添加展示数据； 效果图： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title原创 2018-08-29 17:25:27 · 232 阅读 · 0 评论 -
mouseover和mouseenter以及mouseout和mouseleave区别
1、mouseover与mouseenter共同点：当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了.不同点：mouseover事件：不论鼠标指针进入被选元素或其子元素，都会触发其父级的 mouseover 事件。mouseenter事件：只有在鼠标指针进入被选元素时，才会触发 mouseenter 事件。<!DOCTYPE html>&...原创 2020-03-13 17:28:53 · 297 阅读 · 0 评论 -
判断一个对象是否为空
如何判断一个对象是否为空1、利用 Object.keys 方法 该方法会返回当前对象内所有返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。详情 Object.keys；如果数组的长度不为空那么则说明对象不为空使用方法如下： const obj = { name: '张三', age: 18, sex: '男' }; let arr = Obj...原创 2020-04-26 15:07:02 · 15365 阅读 · 0 评论 -
谈谈 Object.prototype.toString
ECMAScript 5在ECMAScript 5中，Object.prototype.toString()被调用时，会进行如下步骤：如果 this 是 undefined ，返回 object Undefined ；如果 this是 null ， 返回 object Null ；令 O 为以 this 作为参数调用 ToObject的结果；令 class 为 O 的内部属性 [[Cl...转载 2020-04-02 15:50:38 · 360 阅读 · 0 评论 -
如何在 JSON 对象中调用数组的方法
下面的代码输出结果是： let obj = { 2:3, 3:4, length: 2, push: Array.prototype.push } obj.push(1); obj.push(2); console.log(obj)分析：obj是一个对象里面有四个属性，包括push 方法，正常情况下对象是没有push() 方法的，那么pu...原创 2020-04-01 13:55:35 · 577 阅读 · 0 评论 -
== 和 ===究竟做了啥？
面试题：当 a 等于什么的时候下面的代码成立？ // 问： 当 a 等于什么的时候下面的代码成立 var a = ?; if (a == 1 && a == 2 && a == 3){ console.log('OK') }方案一：利用比较的时候调用 toString() 方法，来重写 toString() 方法； // 写法一： var a ...原创 2020-04-01 11:30:14 · 182 阅读 · 0 评论 -
关于原型你不知道的小秘密
关于原型函数的问题: function Foo(){ getName = function(){ console.log(1) } return this; } Foo.getName = function(){ console.log(2) } Foo.prototype.getName = function(){ console.log(3) }...原创 2020-03-31 18:10:26 · 215 阅读 · 0 评论 -
compose 函数 - reduce() 的妙用
compose函数将函数扁平化处理function fn1(x){ return x + 1;}function fn2(x){ return x + 10;}function fn3(x){ return x*10;}function fn4(x){ return x/10;}// fn1执行然后结果作为fn2参数 一直执行到fn4;fn4(fn3(fn2(fn1(...原创 2020-03-20 16:52:46 · 638 阅读 · 0 评论 -
DOM 事件深入浅出（一）
DOM级别与DOM事件DOM级别一共可以分为4个级别：DOM0级，DOM1级，DOM2级和 DOM3级，而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。如下图所示：为什么没有DOM1级事件处理呢？因为1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。1.DOM0级事件在了解DOM0级事件之前，我们有必要先了解下HTML事件...转载 2020-03-13 15:50:45 · 227 阅读 · 0 评论 -
js-惰性函数
利用闭包思想原来定义一个函数来根据情况执行// DOM2 事件绑定 DOM事件参考链接：DOM级别事件 // 元素.addEventListener(); // 元素.attachEvent();function emit(element,type,func) { if(element.addEventListener) { element.addEventListener(typ...原创 2020-03-13 14:07:04 · 198 阅读 · 0 评论