JavaScript
文章平均质量分 67
汪小穆
走在成为web前端大牛路上......
展开
-
【ES6】两个例子明白箭头函数this指向
前言:es6箭头函数没出现之前,this的指向不是函数被创建时绑定,而是被怎么样的方式调用时绑定的。而箭头函数刚好相反,箭头函数的this指向是函数被创建时绑定的,它的指向就是当前词法作用域中的this,并且不会因为被怎么样的方式调用改变绑定。如果对非箭头函数this指向有问题的朋友,建议看我之前的文章。【JavaScript】this的指向详解(为了展示方便,这两个例子都是在浏览器环境中...原创 2018-09-28 16:05:03 · 13767 阅读 · 10 评论 -
【node】将Object内容写入到文件中,并获取的技巧
前言:接到这么一个需求,需要将每个模块exports出来的对象拼接成一个新的对象,并写入到一个新的js文件中。原创 2020-06-07 21:36:47 · 4310 阅读 · 0 评论 -
【性能优化】探究各类数组方法遍历性能,以及与Oject检索速率比较
前言:JavaScript中存在许多遍历数组的方法,如for in,forEach,map,filter等,以及ES6新增的for of方法。每个项目经常会出现频繁的遍历数组的场景,且JavaScript的执行是单线程的,所以对于性能的探究,就显得很有必要了。原创 2021-04-26 16:21:52 · 661 阅读 · 0 评论 -
【JavaScript】常见的隐式改变this指向的几种错误
前言:this是在函数被调用时发生绑定的,它指向什么完全取决于函数在哪里被调用。(也就是说,this的指向不是函数被创建时绑定,而是被怎么样的方式调用时绑定的)。可以看看我以前写的【this的指向问题】。 错误一:改变函数引用var name = 'window';var obj = { name: 'obj', show: function(){ console.log...原创 2018-04-25 16:30:04 · 1131 阅读 · 0 评论 -
【JavaScript】全面解析offsetLeft、offsetTop
前言:偏移量,很多动画效果的实现都是通过去改变偏移量的改变来实现的,但是你真的完全了解offsetLeft,offsetTop吗?一、第一个小例子<body><style> body { margin:0; } .box1 { width:300px; height:300px; margin:100px; background:#333...原创 2018-05-26 16:18:12 · 58531 阅读 · 18 评论 -
【JavaScript】获取到选中的文字、复制选中的文字
前言:两个小技巧获取到选中的文字、复制选中的文字原创 2018-05-16 15:16:21 · 13463 阅读 · 0 评论 -
【JavaScript】关于history.go()的ajax请求缓存问题
前言:window.history.go()方法可加载历史列表中的某个具体的页面,例如你打开一个浏览器后,然后又连续跳转了几个页面,window.history.go(-1)就会跳转到当前页面的上一个页面,window.history.go(1)就会跳转到当前页面的下一个页面。跟浏览器自带的“后退”“前进”键一样的效果。他们的特点就是,跳转页面后浏览器不会向服务器重新提交请求,而是会从缓存记录中加...原创 2018-05-24 17:54:43 · 2014 阅读 · 0 评论 -
【JavaScript】对象引用、浅拷贝、深拷贝详解
前言:ECMAScript有五种简单数据类型(也称为基本数据类型),也有一种复杂数据类型,那就是object了。数组可以是数组对象,函数可以是函数对象,普通对象类型也是,这些object都存在对象引用的问题。一、对象的引用var arr = ['nick'];var obj = { name: 'nick', hobit: ['eat']}var newArr =...原创 2018-06-06 19:01:47 · 910 阅读 · 0 评论 -
【JavaScript】for、forEach 、for in、each循环详解
前言:循环给我们的编程提供了很多方便,绝大多数编程语言都存在循环的方法,javasript中也存在着很多循环的方法有for,for in,while,do while等,还有ES5中的forEach,jquery中封装的each,ES6中的for of。现在聊聊常用的for,for in,forEach,each。一、for循环var arr = ['nick','freddy',...原创 2018-05-31 11:58:54 · 6223 阅读 · 2 评论 -
【JavaScript】DOM节点树操作总结
前言:打开一个页面,加载完html文件后,浏览器首先做的就是解析html代码并开始绘制节点树,也就是说,我们删除标签元素,添加标签元素,改变标签元素的大小,改变标签元素的内容,其实就是在删除DOM节点,添加DOM节点,改变DOM节点的大小,也就是说在DOM节点树上进行操作。一、节点树(画工技术一般般,哈哈..儿童节快乐)这是一个很简单的节点树,<!DOCTYPE htm...原创 2018-06-01 16:22:16 · 4300 阅读 · 1 评论 -
【JavaScript】你不全知道的replace的用法
前言:字符串方法replace相信大家都用过很多了,是个很实用的方法,但是你真的知道replace的全部用法吗? 一、简单字符替换var str = "-moz-flex";console.log(str.replace('-','&'));输出结果这个方法大家都知道,简单的将字符串中找到的第一个匹配字符进行替换。 二、配合正则进行字符替换var ...原创 2018-07-24 15:36:21 · 464 阅读 · 0 评论 -
【JavaScript】巧妙使用sort方法将数组内的对象进行排序
前言:在之前写过一篇【JavaScript】数组的sort方法排序原理详解。 sort排序方法实现很巧妙,运用也可以很巧妙,不但可以进行数组数字之间进行排序,还可以将数组内的对象进行排序。 一、将数组内的对象进行排序var presonArr = [ { name:'freddy', age:24, score:97 }, { name:'nick', age:18, sco...原创 2018-09-17 12:13:29 · 4066 阅读 · 1 评论 -
【JavaScript】Function.prototype.bind实现原理
前言:ECMAscript5中的bind()是ES6中箭头函数绑定this的基础。它是的实现原理是怎样的呢?原创 2018-10-19 18:05:44 · 1627 阅读 · 1 评论 -
【JavaScript】惰性加载函数
前言:在大型应用中,如果在使用频率很高的函数程序中存在客户端检测的判断语句,这样每次调用这个函数的时候都要进行一次客户端检测,有没有判断触发函数的时候就只进行一次客户端检测呢? 一、问题还原let addHandler = function(element, type, handler){ console.log('客户端检测......'); if(element....原创 2018-10-22 14:48:10 · 367 阅读 · 1 评论 -
【JavaScript】如何使用正则拆分复杂数据
前言:经常在技术群交流群遇到不会用正则拆分数据的网友在问,类似"2018-08-08","2018年08月08日","555<=ARPU<777"的复杂数据要怎么去拆分,获取到需要的部分。该篇就教你快速上手用正则拆分数据。(正则速查表会放在最后)注意文中紫色文字原创 2018-11-17 10:42:58 · 1366 阅读 · 2 评论 -
【JavaScript】this的指向详解
前言:this是在函数被调用时发生绑定的,它指向什么完全取决于函数在哪里被调用。(也就是说,this的指向不是函数被创建时绑定,而是被怎么样的方式调用时绑定的) 一、默认绑定var a = 'window';function show(){ console.log(this); console.log(this.a); }show(); //一次调用funct...原创 2017-11-04 15:49:21 · 1810 阅读 · 0 评论 -
【JavaScript】事件委托
前言:阻止事件冒泡,这句话经常听到,也会经常用到。其实事件冒泡也是有用处的,其中一个就是事件委托啦!一、简单事件绑定例子<body><ul> <li>1</li> <li>2</li> <li>3</li> <li>4&a原创 2018-04-20 14:15:42 · 334 阅读 · 0 评论 -
【JavaScript】防止事件被频繁触发。
前言:接到过这样一个任务,是做一个客户预约信息的填写界面,里面很多信息必须要填写。而设计那边提出要让所有信息都要有填写才能让“确认登记”按钮变颜色,并变得可以点击。问题就来了,如果用户每onkeyup一次我就去判断->所有input标签的value值是否为空,那用户填写一遍下来,估计事件要触发四五百次,这是多么恐怖的一件事情和资源浪费!!。一、问题起始<body>...原创 2018-04-20 11:38:09 · 4444 阅读 · 0 评论 -
【javaScript】数组方法
1、array.concat()(合并数组)1 var a = ['a', 'b', 'c'];2 var b = ['x', 'y', 'z'];3 var c = a.concat(b, true); //c==> ['a', 'b', 'c', 'x', 'y', 'z', true] 2、array.join()(把数组转换成字符串,默认是join(','))1 var a ...原创 2017-11-03 15:06:40 · 517 阅读 · 0 评论 -
【JavaScript】--num 与 num-- 的陷阱
一、首先看四个例子①var num1 = 9;document.writeln(num1); // 9--num1document.writeln(num1); //8②var num1 = 9;document.writeln(num1); // 9num1--document.writeln(num1); ...原创 2017-11-14 10:09:04 · 1361 阅读 · 1 评论 -
【JavaScript】五个简单例子,明白闭包原理
前言:当函数可以记住并访问当前所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行。 --摘自《你不知道的JavaScript(上卷)》function a(){ function b(){ } }我的理解:当函数b可以记住并访问当前所在的函数a的作用域时,就产生了闭包,即使函数b是在函数a的作用域之外执行。 第一个例子var i = 0;d...原创 2017-09-22 11:13:06 · 1424 阅读 · 0 评论 -
【JavaScript】数组的sort方法排序原理详解
js数组方法中的sort方法是很实用排序方法,可以对数组进行快速的正序排序,倒叙排序,或者是自定义排序。它的使用方法在很多文档中都可以查到,这里主要讲sort的原理。【JavaScript】巧妙使用数组sort排序方法var array = [12,10,7,5,2];array.sort(function(a,b){ return a-b;});console.log(array)...原创 2018-03-13 15:41:49 · 3194 阅读 · 2 评论 -
【JavaScript】最快捷的获取规定范围内随机数的方法
前言:获取规定范围内随机数的方法有很多,但是下面这种方法一定是最快捷的。原创 2018-03-26 18:21:43 · 1159 阅读 · 0 评论 -
【JavaScript】多行文本省略,并且判断是否需要省略。
前言:文本超出省略使用率非常高,不但可以省空间,也可以使页面看起来更加简洁。原创 2018-03-27 10:40:23 · 5812 阅读 · 0 评论 -
【JavaScript】定时器的陷阱与小技巧
前言:在开发实践中,定时器的使用频率很高,需特别注意定时器中一些陷阱。 一、陷阱①var msg1 = '第1个msg';var msg2 = '第2个msg';setTimeout(console.log(msg1),1000);console.log(msg2);输出结果:我们会发现,设置的延迟一秒的定时器已经失效了。console.log(msg1),这段代码...原创 2018-04-02 15:20:51 · 736 阅读 · 0 评论 -
【js面向对象】贪吃蛇
一、HTML代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>分数:0</title><style>html,body { margin:0; width:100%; heigh原创 2018-04-03 09:22:46 · 530 阅读 · 0 评论 -
【js面向对象】常用的面向对象写法和继承写法
前言:js在面向对象的写法有很多种,继承方式也有很多种。本篇的写法“我个人”认为比较好用,也比较简单的写法。一、创建构造函数,并创建一个实例function Person(name,age){ this.name = name; this.age = age; };Person.prototype.sayName = function(){ consol...原创 2018-04-04 11:30:44 · 641 阅读 · 0 评论 -
【JavaScript】探究数据类型之间的隐式转换和大小比较
前言:ECMAScript是松散数据类型,也就是说数据类型之间存在着隐式转换。这种隐式转换有利也有弊,我们不需要像java,c等强类型语言那样去强制转换类型后再去执行不同数据类型之间的操作;但我们也要时刻注意 隐式转换带来的陷阱。一、隐式转换成Boolean类型Boolean类型与其他类型之间的转换在开发中是比较频繁的用法了。①、隐式转换为truevar str = '123';...原创 2018-04-16 15:01:04 · 4856 阅读 · 0 评论 -
【JavaScript】封装可以辨别全部数据类型的方法
前言:ECMAScript有5中简单数据类型(也称为基本数据类型):Undefined,Null,Boolean,Number和String。还有一种复杂数据类型:object 。而用typeof操作符去分辨这些数据类型是件很让人奔溃的事情。一、typeof检测数据var obj = {};var str = 'string';var num = 123;var bool = true;v...原创 2018-04-16 15:39:16 · 892 阅读 · 0 评论 -
【js面向对象】拼图游戏
一、html代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>拼图小游戏</title><style>body,td { margin:0; padding:0; }#begi原创 2018-04-04 10:46:52 · 1055 阅读 · 0 评论 -
【JavaScript】 forEach陷阱
前言:forEach没有返回值!!!设置了返回值也没有返回值。 一、for循环的对比var arr = [1,2,3,4,5];function test(){ for(var i =0; i<arr.length; i++){ if(arr[i]== 3){ return '找到3了,并终止了循环'; } console.log(arr[i]);...原创 2018-04-12 17:18:15 · 4809 阅读 · 0 评论 -
【JavaScript】闭包的实战运用
前言:我前面已经写过,【五个简单例子明白闭包原理】,相信看过后对闭包已经有了基本的认识,现在一起进入闭包的实战,加深对闭包的认识。一、闭包之作用域①我在【作用域,作用域链详解】那块说过,for循环里是不存在局部作用域(for循环里面定义的i,是暴露在for循环外)的。这会导致以下错误:for(var i = 1; i<=5; i++){ setTimeout(fu...原创 2017-11-04 15:46:04 · 1459 阅读 · 1 评论 -
【JavaScript】作用域,作用域链详解
前言:es5缺少局部作用域的概念,而es6已经补充了es6的概念。一、作用域把作用域比作一个个封闭的方块,在相同一个封闭方块中的物体可以相互接触,但是无法和别的封闭方块中的物体直接接触。二、全局作用域<body><script> var i1 = 1;</script><script> var i2 = 2; function add()...原创 2017-09-25 10:09:54 · 520 阅读 · 0 评论