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

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

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

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

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

  2.使用===替换==

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

1
2
3
4
5
6
7
8
[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.创建构造函数

1
2
3
4
5
6
function Person(firstName, lastName){
    this.firstName =  firstName;
    this.lastName = lastName;       
var Saad = new Person("Saad", "Mousliki");

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

1
2
3
4
var arr = ["a", "b", "c"];
typeof arr;   // return "object"
arr  instanceof Array // true
arr.constructor();  //[]

  6.创建一个Self-calling函数

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

1
2
3
4
5
6
7
(function(){
    // some private code that will be executed automatically
})(); 
(function(a,b){
    var result = a+b;
    return result;
})(10,20)

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

1
2
3
var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];
var  randomItem = items[Math.floor(Math.random() * items.length)];

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

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

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

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

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

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

1
2
3
4
5
6
function generateRandomAlphaNum(len) {
    var rdmstring = "";
    for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));
    return  rdmString.substr(0, len);
}

  11.打乱数字数组

1
2
3
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等多门语言里。

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

  13.数组追加

1
2
3
4
5
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.将参数对象转换为数组

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

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

1
2
3
function isNumber(n){
    return !isNaN(parseFloat(n)) && isFinite(n);
}

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

1
2
3
function isArray(obj){
    return Object.prototype.toString.call(obj) === '[object Array]' ;
}

  注意,如果toString()方法被重写了,你将不会得到预期结果。

  或者你可以这样写

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

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

1
2
3
4
5
6
7
8
9
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; // fals

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

1
2
3
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.清空数组

1
2
var myArray = [12 , 222 , 1000 ]; 
myArray.length = 0; // myArray will be equal to [].

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

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

1
2
3
4
5
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]   */

  也可以……

1
2
3
4
5
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属性缩短数组。

1
2
var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ]; 
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

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

1
2
myArray.length = 10; // the new array length is 10
myArray[myArray.length - 1] ; // undefined

  来自: flippinawesome

超实用的JavaScript技巧及最佳实践相关推荐

  1. 45个超实用的JavaScript技巧及最佳实践(一)

    2019独角兽企业重金招聘Python工程师标准>>> 21. 使用逻辑AND/OR来处理条件语句 var foo = 10; foo == 10 && doSome ...

  2. codepen_CodePen技巧和最佳实践

    codepen by Michael Henderson 通过迈克尔·亨德森 CodePen技巧和最佳实践 (CodePen Tips and Best Practice) When working ...

  3. idea资源包下创建资源包_资源包技巧和最佳实践

    idea资源包下创建资源包 今天是资源捆绑日. 通常,这是Java中最著名的国际化机制(i18n). 使用它应该很容易. 但是,弄污双手时会出现许多小问题. 如果您有相同的想法,则此文章适合您. 基本 ...

  4. 资源包技巧和最佳实践

    今天是资源捆绑日. 通常,这是Java中最著名的国际化机制(i18n). 使用它应该很容易. 但是,在弄脏手时会出现许多小问题. 如果您有相同的想法,则此文章适合您. 基本 java.util.Res ...

  5. Spotfire在文本区域添加自定义JavaScript代码的最佳实践

    这边文章包含了如何在TIBCO Spotfire分析文件的文本区域中以一种可支持和可维护的方式来开发自定义JavaScript代码的最佳实践和建议,因此,这些分析文件将持续与TIBCO Spotfir ...

  6. java 8入门与实践_30个Java入门技巧和最佳实践

    java 8入门与实践 Java是最流行的编程语言之一-无论是Win应用程序,Web应用程序,移动,网络,消费电子产品,机顶盒设备,Java随处可见. 在Java上运行的设备超过30亿. 据Oracl ...

  7. 【JS】982- 11个JavaScript代码重构最佳实践

    模式和重构之间有着一种与生俱来的关系.从某种角度来看,设计模式的目的就是为许多重构行为提供目标. 1.提炼函数 在JavaScript开发中,我们大部分时间都在与函数打交道,所以我们希望这些函数有着良 ...

  8. 11个JavaScript代码重构最佳实践

    点击上方关注 前端技术江湖,一起学习,天天进步 模式和重构之间有着一种与生俱来的关系.从某种角度来看,设计模式的目的就是为许多重构行为提供目标. 1.提炼函数 在JavaScript开发中,我们大部分 ...

  9. javaScript高程笔记--最佳实践

    1.可维护性 <1>什么是可维护的代码 (1)可理解性 (2)直观性 (3)可适应性 (4)可扩展性 (5)可调试性 <2>代码约定 (1)可读性---适当的进行注释[函数和方 ...

最新文章

  1. 遗传算法实例-求解函数极值
  2. php实现下单成功提示语,推荐10款提示语源码(收藏)汇总
  3. 判断一个数是否是2的平方
  4. 45岁,一个平凡大叔的异地打工生活
  5. 智能情绪分析技术_石化缘推荐:炼化企业智能机器人巡检技术应用前景分析!...
  6. HOWTO:将 IOCTL 发送到筛选器驱动程序
  7. 实时--1.1 日志数据分析
  8. PHP连接pda,OTG接口是什么
  9. 【路由和交换之H3C自导自演】
  10. 探码SaaS帮助企业开展数字化营销之路!
  11. jQuery插件开发实战
  12. 网络硬件常识:光模块
  13. 游戏客户端性能(内存)【前篇】
  14. Android开发者进退两难的出路;转行还是进阶?转行转什么最好
  15. linux shell获取当前脚本所在目录
  16. Win10彻底关闭Windows Defender
  17. NLP-基础任务-中文分词算法(1)-基于词典: 机械分词(词典字符串匹配):前向最大匹配、后向最大匹配、双向最大匹配【OOV:基于现有词典,不能进行新词发现处理】
  18. MyEclispe发布web项目-遁地龙卷风
  19. 《程序员》精彩推荐:如何为新员工找到团队“归属感”
  20. Lintcode 428. Pow(x, n) (Medium) (Python)

热门文章

  1. 有权限的网页能分享内页?_有哪些舍不得分享的办公软件?
  2. linux卡片电脑源码,x4412开发板ibox卡片电脑项目实战9-搭建最简单的linux文件系统...
  3. 爱克发胶片_GE AGFA 胶片
  4. c语言无符号扩展,C语言无符号和有符号的区别
  5. go post请求的响应数据渲染到html模板_干货你需要了解的六种渲染模式
  6. 虚拟机和linux系统整理??
  7. 导入maven项目报错无法运行
  8. Spark基础学习笔记14:Scala数据结构
  9. Java学习笔记2.3.2 运算符与表达式 - 赋值运算符
  10. Python案例:四种方式编程求解一元二次方程