javascript实用方法总结

2014-06-14  来源:本站原创  分类:javascript技巧  人气:0 

本文这里给大家总结了一些常用的javascript方法,都是些短小精悍的小代码,提高执行效率,这里推荐给大家。

引言:

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

获取两个区间之内随机数

function getRandomNum(Min, Max){ // 获取两个区间之内随机数

    // @逆火狂飙  提出有可能第一个参数大于第二个参数,所以增加一下判断更可靠

    if (Min > Max) 

    Max = [Min, Min = Max][0]; // 快速交换两个变量值

    var Range = Max - Min + 1;

    var Rand = Math.random();

    return Min + Math.floor(Rand * Range);

};

随机返回一个 正/负参数

复制代码 代码如下:

function getRandomXY(num){ // 随机返回一个 正/负参数

    num = new Number(num);

    if (Math.random() <= 0.5) 

        num = -num;

    return num;

}

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

复制代码 代码如下:

var s = '我是参数';

function fn(args) {

    console.log(args);

}

var a = setInterval(fn(s),100);    // xxxxxx错误xxxxx

var b = setInterval(function(){    // 正确,用匿名函数调用被计时函数

    fn(s);

}, 100);

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

复制代码 代码如下:

var s = true;

function fn2(a, b){        //  步骤三

    if (s) {

        clearInterval(a);

        clearInterval(b);

    }

};

function fn(a){     //  步骤二

    var b = setInterval(function(){

        fn2(a, b) // 传入两个计时器

    }, 200)

};

var a = setInterval(function(){      //  步骤一

    fn(a); // b代表计时器本身,可座位参数传递

}, 100);

字符串转换为数字

复制代码 代码如下:

// 无需 new Number(String)   也无需 Number(String) 只需字符串减去零即可

var str = '100';  // str: String

var num = str - 0;// num: Number

空值判断

复制代码 代码如下:

var s = '';  // 空字符串

if(!s)         // 空字符串默认转换为布尔false,可以直接写在判断语句里面

if(s != null) // 但是空字符串 != null

if(s != undefined) // 空字符串也 != undefined

IE浏览器parseInt()方法

复制代码 代码如下:

// 下面的转换在IE下为0,其他浏览器则为1,这跟IE浏览器解释数字的进制有关

var iNum = parseInt(01);

// 所以,兼容的写法为

var num = parseInt(new Number(01));

Firebug便捷调试js代码

复制代码 代码如下:

//Firebug内置一个console对象,提供内置方法,用来显示信息

/**

 * 1:console.log(),可以用来取代alert()或document.write(),支持占位符输出,字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)。如:console.log("%d年%d月%d日",2011,3,26)

 * 2:如果信息太多,可以分组显示,用到的方法是console.group()和console.groupEnd()

 * 3:console.dir()可以显示一个对象所有的属性和方法

 * 4:console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码

 * 5:console.assert()断言,用来判断一个表达式或变量是否为真

 * 6:console.trace()用来追踪函数的调用轨迹

 * 7:console.time()和console.timeEnd(),用来显示代码的运行时间

 * 8:性能分析(Profiler)就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile()....fn....console.profileEnd()

 */

快速取当前时间毫秒数

复制代码 代码如下:

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

var t = +new Date();  

快速取小数整数位

复制代码 代码如下:

// x == 2,以下x值都为2,负数也可转换

var x = 2.00023 | 0;

// x = '2.00023' | 0;

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

复制代码 代码如下:

var a = 1;

var b = 2;

a = [b, b=a][0]

alert(a+'_'+b)    // 结果 2_1,a和b的值已经互换。

逻辑或'||'运算符

复制代码 代码如下:

// b不为null:a=b, b为null:a=1。

var a = b || 1;

// 较常见的用法为为一个插件方法传参,和获取事件目标元素:event = event || window.event

// IE有window.event对象,而FF没有。

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

复制代码 代码如下:

// 方法有对象原型prototype属性,而原始数据没有该属性,如  var a = 1, a没有prototype属性

function Person() {} // 人的构造函数

Person.prototype.run = function() { alert('run...'); } // 原型run方法

Person.run(); // error

var p1 = new Person(); // 只有在new操作符时,此时才会把原型run方法赋值给p1

p1.run(); // run...

快速获取当天为星期几

复制代码 代码如下:

// 计算系统当前时间是星期几

var week = "今天是:星期" + "日一二三四五六".charat(new date().getDay());

闭包偏见

复制代码 代码如下:

/**

 * 闭包:任何一个js方法体都可以称为一个闭包,并非什么只有内嵌函数来引用了外部函数的某个参数或属性才会发生。

 * 它有一个独立作用域,在该作用域内可存在若干的子作用域(就是方法嵌套方法),最终该闭包作用域为最外层方法的作用域

 * 它包含了本身方法参数和所有内嵌函数的方法参数,所以当一个内嵌函数在外部有引用时,该引用的作用域为引用函数所在的(顶级)方法作用域

 */ 

function a(x) {

    function b(){

        alert(x); // 引用外部函数参数

    }

    return b;

}

var run = a('run...'); 

// 由于作用域的扩大,可以引用到外部函数a的变量并显示

run(); // alert(): run..

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

复制代码 代码如下:

// 获取问号?后面的内容,包括问号

var x = window.location.search

// 获取警号#后面的内容,包括#号

var y = window.location.hash

// 配合定时器可实现网页自动刷新

window.location.reload();

Null和Undefined

复制代码 代码如下:

/**

 * Undefined类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined。

 * Null类型也只有一个值,即null。null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。

 * ECMAScript认为undefined是从null派生出来的,所以把它们定义为相等的。

 * 但是,如果在一些情况下,我们一定要区分这两个值,那应该怎么办呢?可以使用下面的两种方法

 * 在进行判断时根据需要,判断对象是否有值时最好用‘==='强类型判断。

 */

var a;

alert(a === null); // false,因为a不是一个空对象

alert(a === undefined); // true,因为a未初始化,值为undefined

// 引申

alert(null == undefined); // true,因为‘=='运算符会进行类型转换,

// 同理

alert(1 == '1'); // true

alert(0 == false); // true,false转换为Number类型为0

给方法动态添加参数

复制代码 代码如下:

// 方法a多了一个参数2

function a(x){

    var arg = Array.prototype.push.call(arguments,2);

    alert(arguments[0]+'__'+arguments[1]);

}

自定义SELECT边框样式

复制代码 代码如下:

<!-- 复制到页面试试效果吧,可以随意自定义样式 -->

<span style="border:1px solid red; position:absolute; overflow:hidden;" >

    <select style="margin:-2px;">

        <option>自定义SELECT边框样式</option>

        <option>222</option>

        <option>333</option>

    </select>

</span> 

最简单的调色盘

复制代码 代码如下:

<!-- JS来提取其value值即可给任意对象设置任意颜色哦 -->

<input type=color />

函数、对象 is 数组?

复制代码 代码如下:

var anObject = {}; //一个对象

anObject.aProperty = “Property of object”; //对象的一个属性

anObject.aMethod = function(){alert(“Method of object”)}; //对象的一个方法

//主要看下面:

alert(anObject[“aProperty”]); //可以将对象当数组以属性名作为下标来访问属性

anObject[“aMethod”](); //可以将对象当数组以方法名作为下标来调用方法

for( var s in anObject) //遍历对象的所有属性和方法进行迭代化处理

alert(s + ” is a ” + typeof(anObject[s]));

// 同样对于function类型的对象也是一样:

var aFunction = function() {}; //一个函数

aFunction.aProperty = “Property of function”; //函数的一个属性

aFunction.aMethod = function(){alert(“Method of function”)}; //函数的一个方法

//主要看下面:

alert(aFunction[“aProperty”]); //可以将函数当数组以属性名作为下标来访问属性

aFunction[“aMethod”](); //可以将函数当数组以方法名作为下标来调用方法

for( var s in aFunction) //遍历函数的所有属性和方法进行迭代化处理

alert(s + ” is a ” + typeof(aFunction[s]));

复制代码 代码如下:

/**

 * 是的,对象和函数可以象数组一样,用属性名或方法名作为下标来访问并处理。

 * 那么,它到底应该算是数组呢,还是算对象?我们知道,数组应该算是线性数据结构,线性数据结构一般有一定的规律,适合进行统一的批量迭代操作等,有点像波。

 * 而对象是离散数据结构,适合描述分散的和个性化的东西,有点像粒子。

 * 因此,我们也可以这样问:JavaScript 里的对象到底是波还是粒子?如果存在对象量子论,那么答案一定是:波粒二象性!

 * 因此,JavaScript里的函数和对象既有对象的特征也有数组的特征。这里的数组被称为“字典”,一种可以任意伸缩的名称值对儿的集合。其实, object和function的内部实现就是一个字典结构,但这种字典结构却通过严谨而精巧的语法表现出了丰富的外观。正如量子力学在一些地方用粒子来 解释和处理问题,而在另一些地方却用波来解释和处理问题。你也可以在需要的时候,自由选择用对象还是数组来解释和处理问题。只要善于把握 JavaScript 的这些奇妙特性,就可以编写出很多简洁而强大的代码来。

 */ 

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

复制代码 代码如下:

/**

 * 有时候页面有个下拉菜单或者什么的效果,需要用户点击空白处或者点击其他元素时将其隐藏

 * 可用一个全局document点击事件来触发

 * @param {Object} "目标对象"

 */

$(document).click(function(e){

    $("目标对象").hide();

});

/**

 * 但是有一个缺点就是当你点击该元素又想让他显示

 * 如果你不及时阻止事件冒泡至全局出发document对象点击时,上面方法就会执行

 */

$("目标对象").click(function(event){

    event = event || window.event;

    event.stopPropagation(); // 当点击目标对象时,及时阻止事件冒泡

    $("目标对象").toggle();

});

以上就是个人总结的一些javascript常用的方法了,希望大家能够喜欢。

相关文章
  • javascript实用方法总结 2014-06-14

    本文这里给大家总结了一些常用的javascript方法,都是些短小精悍的小代码,提高执行效率,这里推荐给大家. 引言: 本章没有深奥的讲解js一些底层原理,比如this指针.作用域.原型啦,涉及的都是一些有利于平时开发时简化代码,提高执行效率,或者说可以当做一种经验方法来使用,篇幅都不长,小步快跑的让你阅读完整篇文章,体验编程的快乐. 获取两个区间之内随机数 function getRandomNum(Min, Max){ // 获取两个区间之内随机数 // @逆火狂飙 提出有可能第一个参数大于

  • 在Swift中使用JavaScript的方法和技巧 2015-01-24

    本文作者Nate Cook是一位独立的Web及移动应用开发者,是继Mattt大神之后NSHipster的主要维护者,也是非常知名活跃的Swift博主,并且还是支持自动生成Swift在线文档的SwiftDoc.org网站创造者.在本文中,他介绍了在Swift中使用JavaScript的方法和技巧,对于iOS和Web应用工程师有着非常实用的价值,以下为译文: 在RedMonk发布的2015年1月编程语言排行榜中,Swift采纳率排名迅速飙升,从刚刚面世时的68位跃至22位,Objective-C仍然

  • 12个提高效率的JavaScript实用技巧 2014-03-17

    我们知道,编写JavaScript程序是一项繁琐而又容易出错的工作,不仅要完成特定的功能,而且还要满足各种浏览器的兼容性,因而导致JavaScript开发者的效率很低.本文总结了12个提高效率的JavaScript实用技巧,每一个技巧都有相应的示例代码供你参考,相信这12个JavaScript代码可以帮助你提高编程效率,如果喜欢就赶紧收藏和分享吧. 1.根据索引移除数组中的某个元素 假如需要从Javascript数组中移除某个元素,可以使用splice方法,该方法将根据传入参数n,移除数组中移除

  • JS 在数组插入字符的实现代码(可参考JavaScript splice() 方法) 2013-10-07

    在数组插入字符,添加数组,删除数组可以用slice自带的方法.操作比较方便,这个代码是作者通过push与shift方法实现,只能是个思路,但不推荐这样的方法. Array.prototype.ArrayInsertAfter=function(Num,obj) { var tempArr=new Array(); var l=this.length; for(var i=0;i<l;i++) { tempArr.push(this.shift()); } l=tempArr.length; fo

  • JavaScript strike方法入门实例(给字符串加上删除线) 2013-11-09

    这篇文章主要介绍了JavaScript strike方法入门实例,strike方法用于给字符串加上删除线,需要的朋友可以参考下 JavaScript strike 方法 strike 方法返回使用 HTML strike 标签属性定义的删除线样式的字符串.其语法如下: str_object.strike() 提示:该方法不符合 ECMA 标准,不建议使用. strike 方法实例 复制代码 代码如下: <script language="JavaScript"> var s

  • JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码) 2013-12-07

    这篇文章主要介绍了JavaScript charCodeAt方法入门实例,charCodeAt方法用于取得指定位置字符的Unicode编码,需要的朋友可以参考下 JavaScript charCodeAt 方法 charCodeAt 方法用于从字符串中取得指定位置字符的 Unicode 编码.其语法如下: str_object.charCodeAt( x ) 参数说明: 参数 说明 str_object 要操作的字符串(对象) x 必需.表示位置的数字 提示:字符串是从 0 开始计数的. cha

  • PowerShell中执行Javascript的方法示例 2013-12-24

    这篇文章主要介绍了PowerShell中执行Javascript的方法示例,特殊场景下可能会用到这个技巧,需要的朋友可以参考下 背景与问题 别人写了一个Web应用程序,使用的是ASP.NET Forms技术.其中用到了一个DropdownList控件,用户选择了某项后,页面会回传,然后在下面再动态的显示另外一个控件,逻辑很简单. 这是产生的的部分的html源码: <select name="eventTypeDropDown" id="eventTypeDropDown

  • JavaScript sub方法入门实例(把字符串显示为下标) 2013-12-31

    这篇文章主要介绍了JavaScript sub方法入门实例,sub方法用于把字符串显示为下标,需要的朋友可以参考下 JavaScript sub 方法 sub 方法返回使用 HTML sub 标签属性定义的下标字符串.其语法如下: str_object.sub() 提示:该方法不符合 ECMA 标准,不建议使用. sub 方法实例 复制代码 代码如下: <script language="JavaScript"> document.write( '脚本之家' + '每一点进

  • JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串) 2014-01-08

    这篇文章主要介绍了JavaScript fontcolor方法入门实例,fontcolor方法用于按照指定的颜色来显示字符串,需要的朋友可以参考下 JavaScript fontcolor 方法 fontcolor 方法返回使用 HTML font 标签中 color 属性定义的带有颜色的字符串.其语法如下: str_object.fontcolor( color ) 参数说明: 参数 说明 str_object 要操作的字符串(对象) color 必需.颜色名(red).RGB 值(rgb(2

  • JavaScript sup方法入门实例(把字符串显示为上标) 2014-03-24

    这篇文章主要介绍了JavaScript sup方法入门实例,sup方法用于把字符串显示为上标,需要的朋友可以参考下 sup 方法返回使用 HTML sup 标签属性定义的上标字符串.其语法如下: str_object.sup() 提示:该方法不符合 ECMA 标准,不建议使用. sup 方法实例: 复制代码 代码如下: <script language="JavaScript"> document.write( '脚本之家' + '每一点进步,都是我们通往成功道路上的坚实脚

  • 深入理解Javascript动态方法调用与参数修改的问题 2014-04-02

    这篇文章主要是对Javascript动态方法调用与参数修改的问题进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 Javascript中可以对所传参数在函数内进行修改,如下 function func1(name) { name = 'lily'; alert(name); } func1('jack');//输出lily 再看一个例子 复制代码 代码如下: function fun1(n) { this.name = n; } function fun2(name) { fu

  • JavaScript splice()方法详解 2014-04-03

    这篇文章介绍了JavaScript splice()方法,有需要的朋友可以参考一下 定义和用法 splice() 方法用于插入.删除或替换数组的元素. 语法 arrayObject.splice(index,howmany,element1,.....,elementX) 参数 描述 index 必需.规定从何处添加/删除元素. 该参数是开始插入和(或)删除的数组元素的下标,必须是数字. howmany 必需.规定应该删除多少元素.必须是数字,但可以是 "0". 如果未规定此参数,则删

  • Python中os和shutil模块实用方法集锦 2014-06-26

    这篇文章主要介绍了Python中os和shutil模块实用方法集锦,需要的朋友可以参考下 # os 模块 os.sep 可以取代操作系统特定的路径分隔符.windows下为 '\\' os.name 字符串指示你正在使用的平台.比如对于Windows,它是'nt',而对于Linux/Unix用户,它是 'posix' os.getcwd() 函数得到当前工作目录,即当前Python脚本工作的目录路径 os.getenv() 获取一个环境变量,如果没有返回none os.putenv(key, v

  • JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置) 2014-08-07

    这篇文章主要介绍了JavaScript indexOf方法入门实例,indexOf方法用于计算指定字符在字符串中首次出现的位置,需要的朋友可以参考下 JavaScript indexOf 方法 indexOf 方法用于计算某个指定的字符串在字符串中首次出现的位置,并返回该数值.其语法如下: str_object.indexOf( search, start ) 参数说明: 参数 说明 str_object 要操作的字符串(对象) search 必需.要检索的字符串 start 可选.指定开始检索

  • 深入探密Javascript数组方法 2014-08-29

    这篇文章主要详细介绍了Javascript数组方法,十分的全面详尽,有需要的小伙伴可以来研究下,希望对大家能有所帮助 在JavaScript中,数组可以使用Array构造函数来创建,或使用[]快速创建,这也是首选的方法.数组是继承自Object的原型,并且他对typeof没有特殊的返回值,他只返回'object'. 1. Array.prototype.slice方法 数组的 slice 方法通常用来从一个数组中抽取片断.不过,它还有将"类数组"(比如arguments和​HTMLCo

  • JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置) 2014-11-22

    这篇文章主要介绍了JavaScript字符串对象的lastIndexOf方法入门实例,lastIndexOf方法用于计算指定字符在字符串中最后一次出现的位置,需要的朋友可以参考下 JavaScript lastIndexOf 方法 lastIndexOf 方法用于计算指定的字符串在整个字符串中最后一次出现的位置,并返回该数值.其语法如下: str_object.lastIndexOf( search, start ) 参数说明: 参数 说明 str_object 要操作的字符串(对象) sear

  • JavaScript italics方法入门实例(把字符串显示为斜体) 2014-11-27

    这篇文章主要介绍了JavaScript italics方法入门实例,italics方法用于把字符串显示为斜体,需要的朋友可以参考下 JavaScript italics 方法 italics 方法返回使用 HTML i 标签属性定义的(斜体)字符串.其语法如下: str_object.italics() 提示:该方法不符合 ECMA 标准,不建议使用. italics 方法实例 复制代码 代码如下: <script language="JavaScript"> var st

  • 使用Rhino让java执行javascript的方法实例 2014-12-21

    这篇文章主要介绍了java使用Rhino执行javascript的方法,Rhino由Mozilla开发,是 JavaScript 一种基于Java的实现 下载Rhino https://developer.mozilla.org/en-US/docs/Rhino 把js.jar拷贝到项目工程 实现从Java中执行js中的函数.从js中调用Java中的方法,代码: public class MainActivity extends Activity { @Override protected vo

  • JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串) 2014-12-24

    这篇文章主要介绍了JavaScript fontsize方法入门实例,fontsize方法用于按照指定的尺寸来显示字符串,需要的朋友可以参考下 JavaScript fontsize 方法 fontsize 方法返回使用 HTML font 标签中 size 属性定义字体大小的字符串.其语法如下: str_object.fontsize( size ) 参数说明: 参数 说明 str_object 要操作的字符串(对象) size 必需.1 到 7 的数字,数字越大字体越大,字体大小对比如下:

  • JavaScript link方法入门实例(给字符串加上超链接) 2015-02-17

    这篇文章主要介绍了JavaScript link方法入门实例,link方法用于给字符串加上超链接,需要的朋友可以参考下 link 方法返回使用 HTML a 标签属性定义的(斜体)字符串.其语法如下: str_object.link( url ) 参数说明: 参数 说明 str_object 要操作的字符串(对象) url 必需.字符串要链接的 URL 地址,完整格式. 提示:该方法不符合 ECMA 标准,不建议使用. link 方法实例 www.jb51.net 提示:该方法返回使用 HTML