阅读更多

众所周知,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

来自: flippinawesome

来自: csdn
4
1
评论 共 6 条 请登录后发表评论
6 楼 一头狼 2014-02-13 13:50
mark....
5 楼 rather_lonely 2014-01-03 18:07
一个好习惯 采用 "use strict";
4 楼 guozhen_168 2014-01-02 14:57
楼主大神,var myArray = window.frames[window.frames.length-1].Array;  不是ie的专属写法嘛?
3 楼 mfkvfn 2014-01-02 08:54
都是一些基本常识,顶多可以叫注意事项,标题有点大了。

而且中间有很多写得太绝对了。

比如:
第1个,有时是需要全局常量的,故意不加var,比如timer=setTimeout(...)
第2个,“永远不要使用==或!=”,这个永远太绝对了。有时为了检查一个参数是否是null/undefined/"",用x==0可比 x===null || x===undefined || x==="" 要简单清楚得多。
第4个,只有在多次重用或者构造很复杂的时候才推荐。简单的数量不多的多个对象初始化还不如直接用JSON字面量。
第6个用途没有说明,主要用于复杂计算,且仅一次调用,又不想污染全局变量的情况
第15个逻辑不正确,可以用"0"试一下,这个严格来说是字符串不是数字。如果想要说字符串数字也算的话,还凑合可以,但是也不完全正确,可以用n={a:'xyz',toString:function(){return 1}}试试,这个isNumber(n)会返回true
第18个,最好还是用myArray=[],这样可以去掉引用,加快垃圾回收。
2 楼 cosmo1987 2014-01-01 16:36
很多细节都在JS精粹中讲到。算是使用JS应该注意的地方
1 楼 快乐的boy 2014-01-01 13:49
应该注意的细节

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 20个实用的JavaScript技巧分享

    主要介绍了20个实用的JavaScript技巧分享,本文讲解的都是开发中总结出的编码技巧、和最佳实践,需要的朋友可以参考下

  • 13个Javascript 技巧和最佳实践

    英文 | https://medium.com/@girish.mehra713/javascript-tips-and-best-practices-5a73a0b3e513翻译 | 杨小爱JavaScript 是最常用的编程语言之一,同时有数据显示,它世界上十大最受欢迎的编码语言之一。...

  • 20个超实用的javascript技巧及最佳实践

    20个超实用的JavaScript技巧及最佳实践 发表于3小时前| 1263次阅读| 来源CSDN| 12 条评论| 作者张红月 javascript编程语言开发经验 摘要:JavaScript是一门非常流行的编程语言,许多开发者都会把JavaScript...

  • 20个超实用的JavaScript技巧及最佳实践(上)

    众所周知,JavaScript是一门非常流行的编程语言,开发者用它不仅可以开发出炫丽的Web程序,还可以用它来开发一些移动应用程序(如PhoneGap或Appcelerator),它还有一些服务端实现,比如NodeJS、Wakanda以及其它实现...

  • 前端开发的超小巧,快速的技巧,窍门和最佳实践-JavaScript开发

    前端开发的超小,快速提示,技巧和最佳实践前端提示前端开发的超小,快速提示,技巧和最佳实践。 在本地运行它克隆项目:$ git clone https://github.com/phuoc-ng/frontend-tips安装依赖项:$ cd frontend-tips $ ...

  • YOLO算法-数据集数据集-330张图像带标签-椅子-书桌.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

  • java毕设项目之ssm蜀都天香酒楼的网站设计与实现+jsp(完整前后端+说明文档+mysql+lw).zip

    项目包含完整前后端源码和数据库文件 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3 服务器:tomcat7

  • weixin138社区互助养老+ssm(论文+源码)-kaic.zip

    weixin138社区互助养老+ssm(论文+源码)_kaic.zip

  • 光纤到户及通信基础设施报装申请表.docx

    光纤到户及通信基础设施报装申请表.docx

  • java毕设项目之ssm基于jsp的精品酒销售管理系统+jsp(完整前后端+说明文档+mysql+lw).zip

    项目包含完整前后端源码和数据库文件 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3 服务器:tomcat7

  • 功能完善的电商数据智能爬虫采集系统项目全套技术资料.zip

    功能完善的电商数据智能爬虫采集系统项目全套技术资料.zip

  • YOLO算法-刀数据集-198张图像带标签-刀-枪.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

  • Android程序开发初级教程WORD文档doc格式最新版本

    ### Android程序开发初级教程(一):初识Android **平台概述** Google推出的Android操作系统平台已经正式亮相,这是一个基于Linux内核的开源操作系统。对于开发者而言,了解其架构和支持的开发语言至关重要。以下是Android平台的架构概览: **平台架构及功能** 1. **应用框架(Application Framework)**:包含可重用和可替换的组件,确保所有软件在该层面上的平等性。 2. **Dalvik虚拟机(Dalvik Virtual Machine)**:一个基于Linux的虚拟机,为Android应用提供运行环境。 3. **集成浏览器(Integrated Browser)**:基于开源WebKit引擎的浏览器,位于应用层。 4. **优化图形(Optimized Graphics)**:包括自定义的2D图形库和遵循OpenGL ES 1.0标准的3D实现。 5. **SQLite数据库**:用于数据存储。 6. **多媒体支持(Media Support)**:支持通用音频、视频以及多种图片格式(如MPEG4, H.264

  • 【组合数学答案】组合数学-苏大李凡长版-课后习题答案

    内容概要:本文档是《组合数学答案-网络流传版.pdf》的内容,主要包含了排列组合的基础知识以及一些经典的组合数学题目。这些题目涵盖了从排列数计算、二项式定理的应用到容斥原理的实际应用等方面。通过对这些题目的解析,帮助读者加深对组合数学概念和技巧的理解。 适用人群:适合初学者和有一定基础的学习者。 使用场景及目标:可以在学习组合数学课程时作为练习题参考,也可以在复习考试或准备竞赛时使用,目的是提高解决组合数学问题的能力。 其他说明:文档中的题目覆盖了组合数学的基本知识点,适合逐步深入学习。每个题目都有详细的解答步骤,有助于读者掌握解题思路和方法。

  • .net core mvc在线考试系统asp.net考试系统源码考试管理系统 主要技术: 基于.net core mvc架构和sql server数据库,数据库访问采用EF core code fir

    .net core mvc在线考试系统asp.net考试系统源码考试管理系统 主要技术: 基于.net core mvc架构和sql server数据库,数据库访问采用EF core code first,前端采用vue.js和bootstrap。 功能模块: 系统包括前台和后台两个部分,分三种角色登录。 管理员登录后台,拥有科目管理,题库管理,考试管理,成绩管理,用户管理等功能。 教师登录后台,可进行题库管理,考试管理和成绩管理。 用户登录前台,可查看考试列表,参加考试,查看已考试的结果,修改密码等。 系统实现了国际化,支持中英两种语言。 源码打包: 包含全套源码,数据库文件,需求分析和代码说明文档。 运行环境: 运行需vs2019或者以上版本,sql server2012或者以上版本。

  • YOLO算法-易拉罐识别数据集-512张图像带标签-可口可乐.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

  • (175415460)基于SpringBoot的通用管理系统源码+数据库+项目文档,前后端分离的通用管理系统模版,可用于开发毕业设计

    包含了登陆注册、用户管理、部门管理、文件管理、权限管理、日志管理、个人中心、数据字典和代码生成这九个功能模块 系统采用了基于角色的访问控制,角色和菜单关联,一个角色可以配置多个菜单权限;然后再将用户和角色关联,一位用户可以赋予多个角色。这样用户就可以根据角色拿到该有的菜单权限,更方便管理者进行权限管控。 本系统还封装了文件管理功能,在其他模块如若要实现图片/文件上传预览时,前端只需导入现成的 Vue 组件即可实现(使用 viewerjs 依赖实现),后端只需定义 String 类型的实体类变量即可,无需再去研究文件上传预览的相关功能,简化了开发者的工作量。内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。

  • 三相10Kw光伏并网逆变器 包含全套理图 PCB 源代码

    三相10Kw光伏并网逆变器。包含全套理图 PCB 源代码

Global site tag (gtag.js) - Google Analytics