js
文章平均质量分 62
chiuwingyan
掘金:https://juejin.im/user/5b0919e151882538b1096f08
展开
-
JavaScript forEach()遍历函数使用及介绍
forEach()函数从头到尾把数组遍历一遍。有三个参数分别是:数组元素,元素的索引,数组本身(如果是一个参数就是数组元素,也就是数组的值。var data=[1,2,3,4,5,6];var sum=0;data.forEach(function(v){//其中的v就是数组的值 123456sum+=v;})document.write(sum+"");//打印出来是21data.转载 2017-12-16 21:46:53 · 6443 阅读 · 0 评论 -
js函数节流和去抖
前言函数节流和去抖的出现场景,一般都伴随着客户端 DOM 的事件监听。举个例子,实现一个原生的拖拽功能(不能用 H5 Drag&Drop API),需要一路监听 mousemove 事件,在回调中获取元素当前位置,然后重置 dom 的位置(样式改变)。如果我们不加以控制,每移动一定像素而触发的回调数量是会非常惊人的,回调中又伴随着 DOM 操作,继而引发浏览器的重排与重绘,性能差的浏览...原创 2018-05-13 23:55:29 · 498 阅读 · 0 评论 -
为什么setTimeout()比setInterval()稳定
前言要理解setTimeout()比setInterval()稳定,首先要对异步操作有了解。简单来讲,js引擎是单线程的,主要分为主线程和事件队列,同步操作是在主线程上执行,一些异步时间或者是未能马上被主程序执行的函数,一般会先放在事件队列当中,等到js主线程空闲了,才会去事件队列取出事情放到主线程,继续进行操作。...原创 2018-05-15 14:21:29 · 2854 阅读 · 0 评论 -
Promise基本概念及使用方法
什么叫promise?Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码;让代码更加的直观。就是当执行完一次异步操作后,会有一次回调,不管成功还是失败,成功就对应成功的回调,失败就对应失败的回调。那我们为什么要使用promise?比如我们在工作中经常会碰到这么一个需求,比如我使用ajax发一个A请求后,成功后拿到数据,我们需要把数据传给B...原创 2018-05-22 16:31:45 · 1398 阅读 · 0 评论 -
Generator异步化同步
前言Generator这个异步化同步的说法我真的理解了很久,结合js的事件队列来联想,我一直想不懂。。JS的运行规则首先,我们先简单回顾一下JS的运行规则:JS是单线程的,只有一个主线程函数内的代码从上到下顺序执行,遇到被调用的函数先进入被调用函数执行,待完成后继续执行遇到异步事件,浏览器另开一个线程,主线程继续执行,待结果返回后,执行回调函数。那么,Generator函数是如何进行异步化为同步操...原创 2018-06-02 19:07:51 · 1133 阅读 · 0 评论 -
async/await
前言之前,可以利用promise来解决地狱回调的问题,但是,如果回调的嵌套层数过多的话,会造成then链过长,这也不是我们想要的。于是,es6中出现Generator函数,然而,async/await是对Generator函数的再进一步优化。async/await是什么顾名思义,async表示的是异步。而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明...原创 2018-06-03 18:13:06 · 222 阅读 · 0 评论 -
字符串转换base64的方法
base64_encode(str){ var c1, c2, c3; var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; var i = 0, len = str.length, ...原创 2018-05-23 17:56:21 · 6015 阅读 · 0 评论 -
输入框里面的值通过正则匹配改变导致的光标问题(坑!!)
前言需求是这样的,输入加油卡号,每隔输入4位自动加上一个横杠,如图:这个光标问题是个坑,,加班到10点还没解决好。。。解决方法首先,这里我使用的方法是监听输入,使用正则匹配。 <p className="addcard_tip">卡号:</p> <input type="tel" id="cardNum" value={this.state.cardid} clas...原创 2018-06-11 18:24:02 · 1033 阅读 · 2 评论 -
浏览器判断规则
var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsUc = sUserAgent.m...原创 2018-06-12 11:29:52 · 194 阅读 · 0 评论 -
JS 小数自动取两位,不足自动补全
function changeTwoDecimal_f(x) { var f_x = parseFloat(x); if (isNaN(f_x)) { alert('function:changeTwoDecimal->parameter error'); ...原创 2018-06-05 15:52:06 · 2316 阅读 · 0 评论 -
Object.prototype.toString方法的原理
前言我们在判断一个对象的内置类型时,我们一般可以使用以下方法:var arr = [];console.log(Object.prototype.toString.call(arr)) //"[object Array]"那么,这个方法的原理是什么呢?ECMAScript 3在toString方法被调用时,会执行下面的操作步骤:1. 获取this对象的[[Class]]属性的值.2. 计算出三...原创 2018-07-05 23:48:41 · 3941 阅读 · 0 评论 -
封装一个判空方法
//判断空export const isNull = (data) => { // 解决处理判断数字0=''的问题 if (data == 0) { data = data.toString(); } return data == null || data == '' || data == 'undefined' || data.lengt...原创 2018-09-19 11:37:36 · 531 阅读 · 0 评论 -
React里面的constructor()、super()、super(props)具体使用
前言在写React的时候,有时候会被constructor()搞懵,不知道什么时候该写super(),super(props)。现在来总结一下。class由于,React是依赖于es6的Class,就是es5对象的语法糖。里面的constructor想当于对对象的初始化。例如:class Point { constructor(x, y) { this.x = x...原创 2018-10-03 13:08:32 · 7744 阅读 · 0 评论 -
Lazy Load的实现
前言在对前端性能优化实践的时候,图片的获取是需要http请求的。如果我们在首屏加载的时候,就将所有的图片请求回来,这样会很费性能,也没有必要。如果图片很多,会造成卡顿、白屏的现象。因此,使用lazy load是优化的方法之一,让暂时看不到的图片先不加载,当我们需要看到的时候才去请求,减轻了性能的压力,也不影响用户体验。当然现在有很多现场的组件库可以使用,jq和react都有。但是懒加载的原理是...原创 2018-10-28 00:12:24 · 1559 阅读 · 0 评论 -
js获取url的参数
getUrlParams(variable) { var query = window.location.search.substring(1); var vars = query.split('&'); for (var i = 0; i < vars.length; i++) { var pair ...原创 2019-01-25 11:22:44 · 255 阅读 · 0 评论 -
Service Worker初探
前言service worker是PWA(Progressive Web App,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。)的重要组成部分,W3C 组织早在 2014 年 5 月就提出过 Service Worker 这样的一个 HTML5 API ,主要用来做持久的离线缓存,也是Web Worker的升级版。科普 Service WorkerService...原创 2019-03-07 00:15:01 · 582 阅读 · 0 评论 -
js作用域和执行上下文的区别
前言之前,我以为作用域和执行上下文是同一个概念,其实并不是,这里很多人都会把它们混淆了。上下文 vs 作用域每个函数调用都有与之相关的作用域和上下文。从根本上说,范围是基于函数(function-based)而上下文是基于对象(object-based)。换句话说,作用域是和每次函数调用时变量的访问有关,并且每次调用都是独立的。上下文总是关键字 this 的值,是调用当前可执行代码的对象的引用。作...原创 2018-05-17 14:21:15 · 8440 阅读 · 0 评论 -
闭包之利用闭包保存状态
前言首先,这里要对闭包有一个理解,这里就不作详细介绍了。看以下代码: <button>0</button> <button>1</button> <button>2</button> <button>3</button> var button = docu原创 2018-05-17 00:15:07 · 776 阅读 · 0 评论 -
操作dom影响性能的原因
为什么dom操作会影响性能?在浏览器当中,dom的实现和ECMAScript的实现是分离的。例如,在IE中,ECMAScrit的实现在jscript.dll中,而DOM的实现在mshtml.dll中;在Chrome中使用WebKit中的 WebCore处理DOM和渲染,但ECMAScript是在V8引擎中实现的,其他浏览器的情况类似。因此,操作dom,就是通过js代码调用dom的接口,就相当于两个...原创 2018-04-25 23:52:32 · 3031 阅读 · 0 评论 -
forEach()和map()的区别
http://blog.csdn.net/boysky0015/article/details/72983766转载 2017-12-18 14:03:34 · 880 阅读 · 0 评论 -
JavaScript中内存使用规则--堆和栈
js当中的数据类型主要分为两种,基本数据类型和复杂类型。基本数据类型:Undefined、Null、Boolean、Number、String,还有一种复杂数据类型:Object(本质上由一组无序的名值对组成,包括数据)一、基本数据类型基本数据类型主要保存在栈中, 栈有一个很重要的特殊性,就是存在栈中的数据可以共享。例如下面的代码定义两个变量,变量的值都是数字类型。var a=3;v原创 2018-01-02 11:00:29 · 328 阅读 · 0 评论 -
图文解说 JavaScript this 到底指向什么?
https://mp.weixin.qq.com/s/Z_yXX9tA1KJL3ZHLPsOZ5w转载 2018-01-02 11:21:24 · 151 阅读 · 0 评论 -
解决js获取url中的参数中文乱码
let reg = "(^|&)master_name=([^&]*)(&|$)"; let r = window.location.search.substr(1).match(reg); if (r != null) { var master_name=decodeURI(r[2]);原创 2018-01-15 11:41:52 · 466 阅读 · 0 评论 -
兼容pc端移动端的点击按钮直接复制的方法
function copy(invite_code) { var text = document.createElement("input"); text.id = 'webcopyinput'; text.value = invite_code; text.style.position = 'fixed'; text.style.top = '-10000...原创 2018-02-02 10:54:43 · 1748 阅读 · 0 评论 -
module.exports与exports,export与export default之间的关系和区别
CommonJS模块规范Node应用由模块组成,采用CommonJS模块规范。根据这个规范,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module...转载 2018-03-08 17:01:58 · 174 阅读 · 0 评论 -
es6箭头函数this指向
http://blog.csdn.net/liwusen/article/details/70257837箭头函数自身是没有this的,它的this是继承它所处环境的this指向箭头函数没有自己的this对象,它总是搬运外部环境的this对象。因此,只要离它最近的外部环境中的this改变,箭头函数中的this就改变。如果离它最近的环境中的this,没有改变。那么箭头函数中的this就不会改变。1、...转载 2017-12-08 14:58:55 · 399 阅读 · 0 评论 -
详解prototype与__proto__区别
http://blog.csdn.net/ligang2585116/article/details/53522741转载 2018-03-15 13:01:12 · 157 阅读 · 0 评论 -
适配移动端不同尺寸的rem尺寸
function () { var w = document.documentElement.offsetWidth > window.screen.width ? window.screen.width : document.documentElement.offsetWidth; if (w < 540) { ...原创 2018-03-01 16:57:29 · 803 阅读 · 0 评论 -
js的异步
http://blog.csdn.net/aitangyong/article/details/46800615总结:JavaScript是单线程执行的,无法同时执行多段代码。当某一段代码正在执行的时候,所有后续的任务都必须等待,形成一个队列。一旦当前任务执行完毕,再从队列中取出下一个任务,这也常被称为 “阻塞式执行”。所以一次鼠标点击,或是计时器到达时间点,或是Ajax请求完成触发了回调函数,这...转载 2018-03-06 10:56:06 · 88 阅读 · 0 评论 -
js的prototype、proto和constructor的关系
https://www.cnblogs.com/xiaohuochai/p/5721552.htmlhttp://www.jb51.net/article/77039.htm转载 2018-03-06 11:43:30 · 157 阅读 · 0 评论 -
js生成随机数的方法
http://www.jb51.net/article/73503.htm转载 2018-03-06 14:49:41 · 280 阅读 · 0 评论 -
js升序和降序
http://blog.csdn.net/wangjie1616/article/details/51073570原创 2018-03-06 15:01:08 · 1995 阅读 · 0 评论 -
前端跨域的几种办法原理详细
参考链接:https://blog.csdn.net/wuliyun88/article/details/50522336https://www.sojson.com/blog/121.htmlhttp://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.htmlJSON和JSONPJSONP 是一种非正式传输协议,该...原创 2018-04-16 17:09:35 · 253 阅读 · 0 评论 -
深拷贝和浅拷贝的理解
参考自:https://blog.csdn.net/u014628388/article/details/77489400拷贝这里指的拷贝是指对象的拷贝,也只有对象才需要考虑是深拷贝还是浅拷贝。浅拷贝只是拷贝了基本类型的数据,而引用类型数据,复制后也是会发生引用,我们把这种拷贝叫做“(浅复制)浅拷贝”,换句话说,浅复制仅仅是指向被复制的内存地址,如果原地址中对象被改变了,那么浅复制出来的对象也会相...原创 2018-04-24 17:47:36 · 126 阅读 · 0 评论 -
关于javascript单线程的一些理解
参考自:https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md原创 2018-05-02 18:33:03 · 169 阅读 · 0 评论 -
js函数前面加分号的作用
;function($,undefined) 是什么用处 ?;(function($){$.extend($.fn...现般在一些 JQuery 函数前面有分号在前面加分号可以有多种用途:1、防止多文件集成成一个文件后,高压缩出现语法错误。2、这是一个匿名函数,一般js库都采用这种自执行的匿名函数来保护内部变量 (function(){})()...转载 2019-05-10 11:46:39 · 1360 阅读 · 0 评论