引言:

  本章没有深奥的讲解js一些底层原理,比如this指针、作用域、原型啦,涉及的都是一些有利于平时开发时简化代码,提高执行效率或者说可以当做一种经验方法来使用,篇幅都不长,小步快跑的让你阅读完整篇文章,体验编程的快乐

                另 推 荐 阅 读  >>悟透javaScript<<


获取两个区间之内随机数

  1. function getRandomNum(Min, Max){ // 获取两个区间之内随机数
  2. // @逆火狂飙 提出有可能第一个参数大于第二个参数,所以增加一下判断更可靠
  3. if (Min > Max)
  4. Max = [Min, Min = Max][0]; // 快速交换两个变量值
  5.  
  6. var Range = Max - Min + 1;
  7. var Rand = Math.random();
  8. return Min + Math.floor(Rand * Range);
  9. };

随机返回一个 正/负参数

  1. function getRandomXY(num){ // 随机返回一个 正/负参数
  2. num = new Number(num);
  3. if (Math.random() <= 0.5)
  4. num = -num;
  5. return num;
  6. }

setInterval()或setTimeOut()计时器函数传参

  1. var s = '我是参数';
  2. function fn(args) {
  3. console.log(args);
  4. }
  5. var a = setInterval(fn(s),100); // xxxxxx错误xxxxx
  6. var b = setInterval(function(){ // 正确,用匿名函数调用被计时函数
  7. fn(s);
  8. }, 100);

setInterval()或setTimeOut()计时器递归调用

  1. var s = true;
  2. function fn2(a, b){ // 步骤三
  3. if (s) {
  4. clearInterval(a);
  5. clearInterval(b);
  6. }
  7. };
  8. function fn(a){ // 步骤二
  9. var b = setInterval(function(){
  10. fn2(a, b) // 传入两个计时器
  11. }, 200)
  12. };
  13. var a = setInterval(function(){ // 步骤一
  14. fn(a); // b代表计时器本身,可座位参数传递
  15. }, 100);

字符串转换为数字

  1. // 无需 new Number(String) 也无需 Number(String) 只需字符串减去零即可
  2. var str = '100'; // str: String
  3. var num = str - 0;// num: Number

    // var num = +str;

空值判断

  1. var s = ''; // 空字符串
  2. if(!s) // 空字符串默认转换为布尔false,可以直接写在判断语句里面
  3. if(s != null) // 但是空字符串 != null
  4. if(s != undefined) // 空字符串也 != undefined

IE浏览器parseInt()方法

  1. // 下面的转换在IE下为0,其他浏览器则为1,这跟IE浏览器解释数字的进制有关
  2. var iNum = parseInt(01);
  3. // 所以,兼容的写法为
  4. var num = parseInt(new Number(01));

Firebug便捷调试js代码

  1. //Firebug内置一个console对象,提供内置方法,用来显示信息
  2. /**
  3. * 1:console.log(),可以用来取代alert()或document.write(),支持占位符输出,字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)。如:console.log("%d年%d月%d日",2011,3,26)
  4. * 2:如果信息太多,可以分组显示,用到的方法是console.group()和console.groupEnd()
  5. * 3:console.dir()可以显示一个对象所有的属性和方法
  6. * 4:console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码
  7. * 5:console.assert()断言,用来判断一个表达式或变量是否为真
  8. * 6:console.trace()用来追踪函数的调用轨迹
  9. * 7:console.time()和console.timeEnd(),用来显示代码的运行时间
  10. * 8:性能分析(Profiler)就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile()....fn....console.profileEnd()
  11. */

快速取当前时间毫秒数

  1. // t == 当前系统毫秒值,原因:+号运算符会,会调用Date的valueOf()方法。
  2. var t = +new Date();

快速取小数整数位

  1. // x == 2,以下x值都为2,负数也可转换
  2. var x = 2.00023 | 0;
  3. // x = '2.00023' | 0;

两个变量值互换(不用中间量)

  1. var a = 1;
  2. var b = 2;
  3. a = [b, b=a][0]
  4. alert(a+'_'+b) // 结果 2_1,a和b的值已经互换。

逻辑或'||'运算符

  1. // b不为null:a=b, b为null:a=1。
  2. var a = b || 1;
  3. // 较常见的用法为为一个插件方法传参,和获取事件目标元素:event = event || window.event
  4. // IE有window.event对象,而FF没有。

只有方法对象才有prototype原型属性

  1. // 方法有对象原型prototype属性,而原始数据没有该属性,如 var a = 1, a没有prototype属性
  2. function Person() {} // 人的构造函数
  3. Person.prototype.run = function() { alert('run...'); } // 原型run方法
  4. Person.run(); // error
  5. var p1 = new Person(); // 只有在new操作符时,此时才会把原型run方法赋值给p1
  6. p1.run(); // run...

快速获取当天为星期几

  1. // 计算系统当前时间是星期几
  2. var week = "今天是:星期" + "日一二三四五六".charat(new date().getDay());

闭包偏见

  1. /**
  2. * 闭包:任何一个js方法体都可以称为一个闭包,并非什么只有内嵌函数来引用了外部函数的某个参数或属性才会发生。
  3. * 它有一个独立作用域,在该作用域内可存在若干的子作用域(就是方法嵌套方法),最终该闭包作用域为最外层方法的作用域
  4. * 它包含了本身方法参数和所有内嵌函数的方法参数,所以当一个内嵌函数在外部有引用时,该引用的作用域为引用函数所在的(顶级)方法作用域
  5. */
  6. function a(x) {
  7. function b(){
  8. alert(x); // 引用外部函数参数
  9. }
  10. return b;
  11. }
  12. var run = a('run...');
  13. // 由于作用域的扩大,可以引用到外部函数a的变量并显示
  14. run(); // alert(): run..

获取地址参数字符串和定时刷新

  1. // 获取问号?后面的内容,包括问号
  2. var x = window.location.search
  3. // 获取警号#后面的内容,包括#号
  4. var y = window.location.hash
  5. // 配合定时器可实现网页自动刷新
  6. window.location.reload();

Null和Undefined

  1. /**
  2. * Undefined类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined。
  3. * Null类型也只有一个值,即null。null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。
  4. * ECMAScript认为undefined是从null派生出来的,所以把它们定义为相等的。
  5. * 但是,如果在一些情况下,我们一定要区分这两个值,那应该怎么办呢?可以使用下面的两种方法
  6. * 在进行判断时根据需要,判断对象是否有值时最好用‘===’强类型判断。
  7. */
  8. var a;
  9. alert(a === null); // false,因为a不是一个空对象
  10. alert(a === undefined); // true,因为a未初始化,值为undefined
  11. // 引申
  12. alert(null == undefined); // true,因为‘==’运算符会进行类型转换,
  13. // 同理
  14. alert(1 == '1'); // true
  15. alert(0 == false); // true,false转换为Number类型为0

给方法动态添加参数

  1. // 方法a多了一个参数2
  2. function a(x){
  3. var arg = Array.prototype.push.call(arguments,2);
  4. alert(arguments[0]+'__'+arguments[1]);
  5. }

自定义SELECT边框样式

  1. <!-- 复制到页面试试效果吧,可以随意自定义样式 -->
  2. <span style="border:1px solid red; position:absolute; overflow:hidden;" >
  3. <select style="margin:-2px;">
  4. <option>自定义SELECT边框样式</option>
  5. <option>222</option>
  6. <option>333</option>
  7. </select>
  8. </span>

最简单的调色盘

  1. <!-- JS来提取其value值即可给任意对象设置任意颜色哦 -->
  2. <input type=color />

函数、对象 is 数组?

  1. var anObject = {}; //一个对象
  2. anObject.aProperty = Property of object”; //对象的一个属性
  3. anObject.aMethod = function(){alert(“Method of object”)}; //对象的一个方法
  4.  
  5. //主要看下面:
  6. alert(anObject[“aProperty”]); //可以将对象当数组以属性名作为下标来访问属性
  7. anObject[“aMethod”](); //可以将对象当数组以方法名作为下标来调用方法
  8. for( var s in anObject) //遍历对象的所有属性和方法进行迭代化处理
  9. alert(s + is a + typeof(anObject[s]));
  10.  
  11. // 同样对于function类型的对象也是一样:
  12. var aFunction = function() {}; //一个函数
  13. aFunction.aProperty = Property of function”; //函数的一个属性
  14. aFunction.aMethod = function(){alert(“Method of function”)}; //函数的一个方法

  15. //主要看下面:
  16. alert(aFunction[“aProperty”]); //可以将函数当数组以属性名作为下标来访问属性
  17. aFunction[“aMethod”](); //可以将函数当数组以方法名作为下标来调用方法
  18. for( var s in aFunction) //遍历函数的所有属性和方法进行迭代化处理
  19. alert(s + is a + typeof(aFunction[s]));
  1. /**
  2. * 是的,对象和函数可以象数组一样,用属性名或方法名作为下标来访问并处理。
  3. * 那么,它到底应该算是数组呢,还是算对象?我们知道,数组应该算是线性数据结构,线性数据结构一般有一定的规律,适合进行统一的批量迭代操作等,有点像波。
  4. * 而对象是离散数据结构,适合描述分散的和个性化的东西,有点像粒子。
  5. * 因此,我们也可以这样问:JavaScript 里的对象到底是波还是粒子?如果存在对象量子论,那么答案一定是:波粒二象性!
  6. * 因此,JavaScript里的函数和对象既有对象的特征也有数组的特征。这里的数组被称为“字典”,一种可以任意伸缩的名称值对儿的集合。其实, object和function的内部实现就是一个字典结构,但这种字典结构却通过严谨而精巧的语法表现出了丰富的外观。正如量子力学在一些地方用粒子来 解释和处理问题,而在另一些地方却用波来解释和处理问题。你也可以在需要的时候,自由选择用对象还是数组来解释和处理问题。只要善于把握 JavaScript 的这些奇妙特性,就可以编写出很多简洁而强大的代码来。
  7. */

点击空白处能触发某一元素关闭/隐藏

  1. /**
  2. * 有时候页面有个下拉菜单或者什么的效果,需要用户点击空白处或者点击其他元素时将其隐藏
  3. * 可用一个全局document点击事件来触发
  4. * @param {Object} "目标对象"
  5. */
  6. $(document).click(function(e){
  7. $("目标对象").hide();
  8. });
  9.  
  10. /**
  11. * 但是有一个缺点就是当你点击该元素又想让他显示
  12. * 如果你不及时阻止事件冒泡至全局出发document对象点击时,上面方法就会执行
  13. */
  14. $("目标对象").click(function(event){
  15. event = event || window.event;
  16. event.stopPropagation(); // 当点击目标对象时,及时阻止事件冒泡
  17. $("目标对象").toggle();
  18. });

检测window.open()方法弹出窗口是否被拦截

  1. var blocked = false;
  2. try {
  3. var wroxWin = window.open("http://www.baidu.com", "_blank");
  4. if (wroxWin == null){
  5. blocked = true;
  6. }
  7. } catch (ex){
  8. blocked = true;
  9. }
  10. if (blocked){
  11. alert("弹窗被拦截!");
  12. }

location 对象(最有用的 BOM 对象之一)

js四舍五入保留2位小数

  1. tofixed方法
  2.   toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。例如将数据Num保留2位小数,则表示为:toFixed(Num);但是其四舍五入的规则与数学中的规则不同,使用的是银行家舍入规则,银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法。具体规则如下:
  3.  
  4. 简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一。
  5.  
  6. 显然这种规则不符合我们平常在数据中处理的方式。为了解决这样的问题,可以自定义去使用Math.round方法进行自定义式 的实现指定保留多少位数据进行处理。
  7.  
  8. round方法
  9.   round() 方法可把一个数字舍入为最接近的整数。例如:Math.round(x),则是将x取其最接近的整数。其取舍的方法使用的是四舍五入中的方法,符合数学中取舍的规则。对于小数的处理没有那么便捷,但是可以根据不同的要求,进行自定义的处理。
  10.  
  11. 例如:对于X进行保留两位小数的处理,则可以使用Math.round(X * 100) / 100.进行处理。

:)如有不错的方法还请慷慨留言推荐,我会一并加入进来。

ps:欢迎转载,转载请注明出处:http://www.cnblogs.com/liuyitian/p/4081517.html

                          写作不易,难免有疏漏和错误,还请慷慨指正,不错请推荐


                                    每天多学一点点     代码少敲一点点 

js便携小方法,你值得拥有的更多相关文章

  1. s便携小方法,你值得拥有

    引言: 本章没有深奥的讲解js一些底层原理,比如this指针.作用域.原型啦,涉及的都是一些有利于平时开发时简化代码,提高执行效率,或者说可以当做一种经验方法来使用,篇幅都不长,小步快跑的让你阅读完整 ...

  2. js调用后台方法(如果你能容忍执行的后台方法变成一个常量)

    最近一直在做一个电话拨号的系统,系统不大,但是做的时间有点长了.其中用到了一个技术:js调用后台方法.解决这个问题花了不少时间,现如今仍然还有些不明白的地方,今天跟大家分享一下.真正明白的同学欢迎指正 ...

  3. 浅谈 js 字符串 trim 方法之正则篇

    原文:浅谈 js 字符串 trim 方法之正则篇 关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格   等 ...

  4. 原生Js 两种方法实现页面关键字高亮显示

    原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...

  5. iScroll.js插件使用方法

    iScroll.js 用法参考 (share) 分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍 ...

  6. 关于js函数,方法,对象实例的一些说明

    朋友们大家好,好久没有更新文章了,最近正好有空就想着写点什么吧,加上这段时间总是能听到一些朋友们问关于js函数,方法,对象实例到底有什么区别这个问题,所以今天就献丑来简单说明一些吧! 其实这些主要都是 ...

  7. 原生JS实现new方法、new一个对象发生的四部、new里面常用的优先级

    一.js中new一个对象的过程 首先了解new做了什么,使用new关键字调用函数(new ClassA(…))的具体步骤: 1.创建一个新对象: var obj = {}; 2.设置新对象的const ...

  8. Centos7 中 Node.js安装简单方法

    最近,我一直对学习Node.js比较感兴趣.下面是小编给大家带来的Centos7 中 Node.js安装简单方法,在此记录一下,方便自己也方便大家,一起看看吧! 安装node.js 登陆Centos ...

  9. wdatepicker控件de使用小方法汇总

    在总结wdatepicker控件的使用前,先插播一条吧,下午刚心血来潮百度的一条 问?C#中Int16.Int32.Int64.之间的区别,:::嘿嘿其实百度知道就有,但还是写上吧! Int16 表示 ...

随机推荐

  1. js 代码几种方式

    var nameSpace={ //public } (function(){ //private })(); var module=(function(){ //private return { / ...

  2. 关于svn和maven结合使用的讨论

    目前项目组在开发一个项目,由多个子模块构成,构建工具是maven,版本控制工具是svn.本文想对如何结合使用maven和svn提出一点初步的想法 一.只有svn的情况 首先考虑没有maven的情况.这 ...

  3. UVA10054_The Necklace

    很简单,求欧拉回路.并且输出. 只重点说一下要用栈来控制输出. 为啥,如图: 如果不用栈,那么1->2->3->1就回来了,接着又输出4->5,发现这根本连接不上去,所以如果用 ...

  4. python自动化之读写

    ############################################################################# #############在Windows上 ...

  5. xml 类详解

  6. DB磁盘满导致Zabbix Server Crash一例

    故障描述 今天线上zabbix出现几次数据中断的情况,经排查为DB服务器磁盘空间不足导致的.还好我们目前我们zabbix,falcon两套监控系统并存,哈哈. 故障排查过程没什么技术含量,简单的将故障 ...

  7. Java变量初始化之后的默认值问题

    1) 局部变量初始化(局部变量:函数.语句中的变量,只在所属区域内有效)局部变量声明后,Java虚拟机不会自动给它初始化为默认值.因此对于局部变量,必须经过显示的初始化,才能使用它.如果使用一个没有被 ...

  8. Visual Studio Code运行Python文件出现 “Linter pylint is not installed ”提示解决办法

    运行Python代码后出现 “Linter pylint is not installed ”提示 只需要添加一行代码就可以解决 { "python.pythonPath": &q ...

  9. python参数传递方式

    原文地址:http://www.cnblogs.com/zhaopengcheng/p/5492183.html python中一切皆对象,函数中参数传递的是对象的引用. 1在函数中改变变量指向的对象 ...

  10. Mythological VI

    Description 有\(1...n\)一共\(n\)个数.保证\(n\)为偶数. 小M要把这\(n\)个数两两配对, 一共配成\(n/2\)对.每一对的权值是他们两个数的和. 小M想要知道这\( ...