20个实用的JavaScript技巧分享


Posted in Javascript onNovember 28, 2014

众所周知,JavaScript是一门非常流行的编程语言,开发者用它不仅可以开发出炫丽的Web程序,还可以用它来开发一些移动应用程序(如PhoneGap或Appcelerator),它还有一些服务端实现,比如NodeJS、Wakanda以及其它实现。此外,许多开发者都会把JavaScript选为入门语言,使用它来做一些弹出窗口等小东西。

在这篇文章中,作者将会向大家分享JavaScript开发的小技巧、最佳实践等非常实用的内容,不管你是前端开发者还是服务端开发者,都应该来看看这些小技巧,它们绝对会让你受益的。

文中所提供的代码片段都已经过最新版的Chrome 30测试,该浏览器使用V8 JavaScript引擎(V8 3.20.17.15)。

1.第一次给变量赋值时,别忘记var关键字

给一个未声明的变量赋值,该变量会被自动创建为全局变量,在JS开发中,应该避免使用全局变量。

2.使用===替换==

并且永远不要使用=或!=。

[10] === 10    // is false  

[10]  == 10    // is true  

'10' == 10     // is true  

'10' === 10    // is false  

 []   == 0     // is true  

 [] ===  0     // is false  

 '' == false   // is true but true == "a" is false  

 '' ===   false // is false  

3.使用分号来作为行终止字符

在行终止的地方使用分号是一个很好的习惯,即使开发人员忘记加分号,编译器也不会有任何提示,因为在大多数情况下,JavaScript解析器会自动加上。

4.创建构造函数

function Person(firstName, lastName){  

    this.firstName =  firstName;  

    this.lastName = lastName;          

}    

  

var Saad = new Person("Saad", "Mousliki"); 

5.应当小心使用typeof、instanceof和constructor

var arr = ["a", "b", "c"];  

typeof arr;   // return "object"   

arr  instanceof Array // true  

arr.constructor();  //[] 

6.创建一个Self-calling函数

这通常会被称为自我调用的匿名函数或立即调用函数表达式(LLFE)。当函数被创建的时候就会自动执行,好比下面这个:

(function(){  

    // some private code that will be executed automatically  

})();    

(function(a,b){  

    var result = a+b;  

    return result;  

})(10,20) 

7.给数组创建一个随机项

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];  

  

var  randomItem = items[Math.floor(Math.random() * items.length)]; 

8.在特定范围里获得一个随机数

下面这段代码非常通用,当你需要生成一个假的数据用来测试时,比如在最低工资和最高之前获取一个随机值。

var x = Math.floor(Math.random() * (max - min + 1)) + min; 

9.在数字0和最大数之间生成一组随机数

var numbersArray = [] , max = 100;  

  

for( var i=1; numbersArray.push(i++) < max;);  // numbers = [0,1,2,3 ... 100] 

10.生成一组随机的字母数字字符

function generateRandomAlphaNum(len) {  

    var rdmstring = "";  

    for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));  

    return  rdmString.substr(0, len);  

  

} 

11.打乱数字数组

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];  

numbers = numbers.sort(function(){ return Math.random() - 0.5});  

/* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205]  */

12.字符串tim函数

trim函数可以删除字符串的空白字符,可以用在Java、C#、PHP等多门语言里。

String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, "");};

13.数组追加

var array1 = [12 , "foo" , {name "Joe"} , -2458];  

  

var array2 = ["Doe" , 555 , 100];  

Array.prototype.push.apply(array1, array2);  

/* array1 will be equal to  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */ 

14.将参数对象转换为数组

var argArray = Array.prototype.slice.call(arguments); 

15.验证一个给定参数是否为数字

function isNumber(n){  

    return !isNaN(parseFloat(n)) && isFinite(n);  

} 

16.验证一个给定的参数为数组

function isArray(obj){  

    return Object.prototype.toString.call(obj) === '[object Array]' ;  

} 

注意,如果toString()方法被重写了,你将不会得到预期结果。
或者你可以这样写:

Array.isArray(obj); // its a new Array method 

同样,如果你使用多个frames,你可以使用instancesof,如果内容太多,结果同样会出错。

var myFrame = document.createElement('iframe');  

document.body.appendChild(myFrame);  

  

var myArray = window.frames[window.frames.length-1].Array;  

var arr = new myArray(a,b,10); // [a,b,10]    

  

// instanceof will not work correctly, myArray loses his constructor   

// constructor is not shared between frames  

arr instanceof Array; // false 

17.从数字数组中获得最大值和最小值

var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];   

var maxInNumbers = Math.max.apply(Math, numbers);   

var minInNumbers = Math.min.apply(Math, numbers); 

18.清空数组

var myArray = [12 , 222 , 1000 ];    

myArray.length = 0; // myArray will be equal to []. 

19.不要用delete从数组中删除项目

开发者可以使用split来代替使用delete来删除数组项。与其删除数组中未定义项目,还不如使用delete来替代。

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];   

items.length; // return 11   

delete items[3]; // return true   

items.length; // return 11   

/* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154,       119]   */ 

也可以……
var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];   

items.length; // return 11   

items.splice(3,1) ;   

items.length; // return 10   

/* items will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154,       119]   */

delete方法应该删除一个对象属性。

20.使用length属性缩短数组

如上文提到的清空数组,开发者还可以使用length属性缩短数组。

var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];    

myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124]. 

如果你所定义的数组长度值过高,那么数组的长度将会改变,并且会填充一些未定义的值到数组里,数组的length属性不是只读的。

myArray.length = 10; // the new array length is 10   

myArray[myArray.length - 1] ; // undefined 
Javascript 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
Javascript 加载和执行-性能提高篇
Dec 28 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
js实现3d悬浮效果
Feb 16 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
js获取浏览器基本信息大全
Nov 27 #Javascript
jQuery实现多按钮单击变色
Nov 27 #Javascript
jQuery的ready方法详解
Nov 27 #Javascript
javascript 面向对象封装与继承
Nov 27 #Javascript
javascript制作坦克大战全纪录(2)
Nov 27 #Javascript
javascript制作坦克大战全纪录(1)
Nov 27 #Javascript
使用jsonp完美解决跨域问题
Nov 27 #Javascript
You might like
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
JavaScript 基础问答三
2008/12/03 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
node.js中的console用法总结
2014/12/15 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
vue实现全选和反选功能
2017/08/31 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
Python实现保证只能运行一个脚本实例
2015/06/24 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
python之文件读取一行一行的方法
2018/07/12 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
python中time.ctime()实例用法
2021/02/03 Python
python实现学生通讯录管理系统
2021/02/25 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
会计电算化专业应届大学生求职信
2013/10/22 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
工商干部先进事迹
2014/05/14 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
Elasticsearch 批量操作
2022/04/19 Python