js的一些妙用

ES7前端异步玩法：async/await理解 js原生API妙用（一）

ES7前端异步玩法:async/await理解在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是“异步”的意思,async用于声明一个函数是异步的.而await从字面意思上是“等待”的意思,就是用于等待异步完成.并且await只能在async函数中使用通常async.await都是跟随Promise一起使用的.为什么这么说呢?因为async返回的都是一个Promise对象同时async适用于任何类型的函数上.…

位运算符在JS中的妙用

正文位运算 JavaScript 中最臭名昭著的 Bug 就是 0.1 + 0.2 !== 0.3,因为精度的问题,导致所有的浮点运算都是不安全的,具体原因可详见<0.1 + 0.2不等于0.3?为什么JavaScript有这种"骚"操作?>. 因此,之前有大牛提出,不要在 JS 中使用位运算: Javascript 完全套用了 Java 的位运算符,包括按位与&.按位或|.按位异或^.按位非~.左移<<.带符号的右移>>和用0补足的右移&…

JS 原型的妙用

原型是JS的一个重要的特征,通过它可以实现类和实例直接的继承关系. 1.原型来来实现数据备份 // 通过原型来来实现数据备份 function p(x){ this.x = x; } p.prototype.backup = function(){ //备份函数.初始化第一个对象时 //进行备份,还原也只能还原第一个 //对象的数据 for(i in this){ p.prototype[i] = this[i]; } } var p1 = new p(1); console.log(p1.x)…

js原生API妙用（一）

复制数组我们都知道数组是引用类型数据.这里使用slice复制一个数组,原数组不受影响. let list1 = [1, 2, 3, 4]; let newList = list1.slice(); list1.push(5); // [1,2,3,4,5] //newList [1,2,3,4] 不受影响 console.log(newList); //[1,2,3,4] console.log(list1); //[1, 2, 3, 4, 5] let list2 = [5,6,7,8];…

在一个数组上直接附加上另一个数组: Array.prototype.push.apply(array1, array2); 将对象转换成一个数组: Array.prototype.slice.call(arguments); 判断是不是一个数字: function isNumber(n){ return !isNaN(parseFloat(n)) && isFinite(n); } 给字符串添加去首末空格: String.prototype.trim = function(){…

js &&与||的妙用

&&表达式中,若前一个为false则不会执行下去,||表达式中,一直寻找到true即停止例:成长速度为5显示1个箭头,为10显示2个箭头,为 15显示3个箭头,其余显示0个箭头var arrows = (speed==5 && 1) || (speed==10&&2) || (speed==15 && 3) ||0//缺点:可读性差方法二:JSON实现var arrows = {'5' : 1 ; '10' : 2 ; '15' : 3}…

js中!!的妙用

0.-0.null."".false.undefined 或者 NaN转化为false,其他为true…

js按位运算符及其妙用

大多数语言都提供了按位运算符,恰当的使用按位运算符有时候会取得的很好的效果. 在我看来按位运算符应该有7个: 1.& 按位与 &是二元运算符,它以特定的方式的方式组合操作数中对应的位,如果对应的位都为1,那么结果就是1, 如果任意一个位是0 则结果就是0. 1 & 3的结果为1 那我们来看看他是怎么运行的 1的二进制表示为 0 0 0 0 0 0 1 3的二进制表示为 0 0 0 0 0 1 1 根据 & 的规则得到的结果为 0 0 0 0 0 0 0 1,十进制表示就是…

js 实现 aop

Aop又叫面向切面编程,用过spring的同学肯定对它非常熟悉,而在js中,AOP是一个被严重忽视的技术点,这篇就通过下面这几个小例子,来说说AOP在js中的妙用. 1, 防止window.onload被二次覆盖.2,无侵入的统计代码.3, 分离表单请求和校验.4,给ajax请求动态添加参数.5,职责链模式.6, 组合代替继承. 先给出before和after这2个“切面”函数. 顾名思义,就是让一个函数在另一个函数之前或者之后执行,巧妙的是,before或者after都可以和当前的函数公用th…

js学习笔记--基础部分

自增自增 ++ 通过自增可以使变量在自身的基础上增加1 对于一个变量自增以后,原变量的值会立即自增1 无论使a++, 还是++a,都会立即使原变量的值自增1. 不同的是a++ 和++a的值不同. a++的值的等于原变量的值 ++a的值是原变量自增后的值 var a=1; console.log("a++ =" +a++);//输出1 console.log("++a = "+ ++a);//输出3 console.log("a =",3);//…

JavaScript简易日历

<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

[转]用AOP改善javascript代码

有时候,不光要低头写代码,也要学着站在更高的角度,来思考代码怎么写,下面这篇文章,讲的关于代码设计的问题,脑洞大开. 原文: http://www.alloyteam.com/2013/08/yong-aop-gai-shan-javascript-dai-ma/ 自己的改进版本: 因为觉得原文作者的这种实现方式,在Function.prototype 上面实现的方式,有点不妥.所以,结合我上面一篇的思考,我做出了如下的修改, function after(old, callback){ ret…

用AOP改善javascript代码

Aop又叫面向切面编程,用过spring的同学肯定对它非常熟悉,而在js中,AOP是一个被严重忽视的技术点,这篇就通过下面这几个小例子,来说说AOP在js中的妙用. 1, 防止window.onload被二次覆盖. 2,无侵入的统计代码. 3, 分离表单请求和校验. 4,给ajax请求动态添加参数. 5,职责链模式. 6, 组合代替继承. 先给出before和after这2个“切面”函数. 顾名思义,就是让一个函数在另一个函数之前或者之后执行,巧妙的是,这2个函数可以公用this和argumen…

js 与或运算符 || && 妙用

js 与或运算符 || && 妙用,可用于精简代码,降低程序的可读性. 首先出个题: 如图: 假设对成长速度显示规定如下: 成长速度为5显示1个箭头: 成长速度为10显示2个箭头: 成长速度为12显示3个箭头: 成长速度为15显示4个箭头: 其他都显示都显示0各箭头. 用代码怎么实现? 差一点的if,else: Js代码 var add_level = 0; if(add_step == 5){ add_level = 1; } else if(add_step == 10){ add…

JS异步执行之setTimeout 0的妙用

最近在工作中遇到一些问题,大致是关于js执行问题的.由于没搞清执行顺序,导致出现了一些奇怪的bug. 所以这里整理一些有关异步执行的知识(冰山一角角)... 大家都知道js是单线程的,执行起来是顺序的,在顺序的业务逻辑中当然没有问题.如果遇到可以并发执行的业务逻辑,再排队就很低级了,所以需要异步执行! 1.什么是异步? setTimeout(function(){ console.log(0); },0) console.log(1); // 先打印 1 // 再打印 0 比方说有些饭店你去吃饭…

JS逻辑运算符&&与||的妙用

JS逻辑运算符&&与||的妙用 /* 文章写的不错就此分享 */ &&中第一个表达式为假就不会去处理第二个表达式,直接放回结果. || 中就刚很好相反.如果第一个表达式为true,就直接返回结果.否则就将继续比较后面的表达式.. 首先出个题: 如图: 假设对成长速度显示规定如下: 成长速度为5显示1个箭头: 成长速度为10显示2个箭头: 成长速度为12显示3个箭头: 成长速度为15显示4个箭头: 其他都显示都显示0各箭头. 用代码怎么实现? 差一点的if,else: …

关于js代码中与或运算符||&&的妙用

看bootstrap时看到如下一行JavaScript代码产生了疑惑. return window.pageYOffset || e.scrollTop ||在这里的作用是什么呢? 首先明确概念,在js逻辑运算中,0."".null.false.undefined.NaN都会判为false,其他都为true. a&& b :如果执行a后返回true,则执行b并返回b的值:如果执行a后返回false,则整个表达式返回a的值,b不执行: a || b :如果执行a后返回tr…

js 与或运算符 || && 妙用（转）

原文转自:http://www.jb51.net/article/21339.htm 首先出个题: 假设对成长速度显示规定如下: 成长速度为5显示1个箭头: 成长速度为10显示2个箭头: 成长速度为12显示3个箭头: 成长速度为15显示4个箭头: 其他都显示都显示0各箭头. 用代码怎么实现? 如,成长速度:5↑ 差一点的if,else: Js代码 var add_level = 0; if(add_step == 5){ add_level = 1; } else if(add_step ==…

妙用缓存调用链实现JS方法的重载

来自于我的博客http://sweets.cf/,转载注明出处 1.什么是方法重载方法重载是指在一个类中定义多个同名的方法,但要求每个方法具有不同的参数的类型或参数的个数. 简而言之就是:方法重载就是方法名称重复,加载参数不同. 具体看请左转: 方法重载/百度百科那么js如何实现这个呢??? 2. js如何实现? 首先javascript是没有重载函数/方法这个概念的,但是js提供了一个arguments这个方法参数,通过这个参数的length属性就可以拿到方法参数的长度,o~对了,咱们今天…

[妙味JS基础]第六课：作用域、JS预解析机制

知识点总结浏览器的解析方法 script 全局变量,全局函数自上而下函数由里到外 "JS的解析器": 1)“找一些东西”:var function 参数 var a=未定义 =>所有的变量,在预解析时,赋一个值:未定义 fn1 = function fn1(){alert(2)} =>所有的函数,在预解析时,是整个函数块 function fn1(n1) {} =>这里的参数n1,相当于var n1 ,因此也是未定义在预解析时,遇到重名的:只留一个,var和…

[妙味JS基础]第四课：JS数据类型、类型转换

知识点总结 JS数据类型:number数字(NaN).string字符串.boolean布尔值.函数类型.object对象(obj.[].{}.null).undefined未定义 typeof 用来判断基本数据类型,instanceof可以判断引用数据类型显示/强制类型转换( Number().parseInt().parseFloat() ) Number() ＝>字符串变数值 NaN => json.函数.未定义进行运算(var a).数组里有一堆内容 null.''.[] =>…

[妙味JS基础]第一课：属性操作、图片切换、短信发送模拟

知识点总结 HTML的属性操作:读.写元素.属性名 => “读” 元素.属性名＝新的值 => “写” 例如: oBtn.value => “读” oBtn.value='按钮' => “写” 注意事项: 1.表单元素的类型不要乱改,即oInput.type='checkbox',因为IE6.IE7.IE8不支持如果还要实现这种效果, 比如:点击后,由button变成checkbox 实现方法:将button隐藏起来,checkbox显示来实现 2.float IE(styleF…

原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果（scroll（）、offsetTop、滚动监听的妙用）

想实现窗口滚动到一定位置时,部分网页的页面发生一些变化,但是手头没有合适的插件,所以就想到自己编写一个简易的方法, 想到这个方法要有很高的自由度和适应性,在这,就尽量的削减其功能,若有错误的地方或者更好的建议,请大家评论,一同探讨, 好了废话不多说,下面开始干活了! 首先,说一下我想实现的基本功能: 此方法需要有2个基本形参,,一个是我要监测的标签a,另一个是我要监测标签相对于哪个标签b做的距离检测. 当a和b的距离达到一定范围的时候,让网页局部发生一些变化效果,这是我们的预期. 以下是我的方法…