0

0

20个实用的JavaScript技巧分享_javascript技巧

php中文网

php中文网

发布时间:2016-05-16 16:29:55

|

1675人浏览过

|

来源于php中文网

原创

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

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

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

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

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

立即学习Java免费学习笔记(深入)”;

2.使用===替换==

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

Linux+PHP+MySQL案例教程
Linux+PHP+MySQL案例教程

本书以培养高级网站建设与管理人才为目标,内容循序渐进,由浅入深,通过大量的实例系统全面地介绍了Linux+PHP+MySQL环境下的网络后台开发技术。本书详尽分析了近30个典型案例。包括计数器、网站流量统计、留言板、论坛系统、聊天室、投票与调查、用户管理、新闻发布系统、广告轮播、购物系统等等,力求让读者通过对案例的学习,轻松掌握PHP和MySQL的编程精要,迅速掌握网络后台开发技巧。   本书适

下载
复制代码 代码如下:

[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++)

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

复制代码 代码如下:

function generateRandomAlphaNum(len) { 
    var rdmstring = ""; 
    for( ; rdmString.length     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 , 124124 , 98 , 10 ];   
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124124]. 

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

复制代码 代码如下:

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

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
ip地址修改教程大全
ip地址修改教程大全

本专题整合了ip地址修改教程大全,阅读下面的文章自行寻找合适的解决教程。

86

2025.12.26

压缩文件加密教程汇总
压缩文件加密教程汇总

本专题整合了压缩文件加密教程,阅读专题下面的文章了解更多详细教程。

50

2025.12.26

wifi无ip分配
wifi无ip分配

本专题整合了wifi无ip分配相关教程,阅读专题下面的文章了解更多详细教程。

100

2025.12.26

漫蛙漫画入口网址
漫蛙漫画入口网址

本专题整合了漫蛙入口网址大全,阅读下面的文章领取更多入口。

293

2025.12.26

b站看视频入口合集
b站看视频入口合集

本专题整合了b站哔哩哔哩相关入口合集,阅读下面的文章查看更多入口。

589

2025.12.26

俄罗斯搜索引擎yandex入口汇总
俄罗斯搜索引擎yandex入口汇总

本专题整合了俄罗斯搜索引擎yandex相关入口合集,阅读下面的文章查看更多入口。

725

2025.12.26

虚拟号码教程汇总
虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程,阅读下面的文章了解更多详细操作。

63

2025.12.25

错误代码dns_probe_possible
错误代码dns_probe_possible

本专题整合了电脑无法打开网页显示错误代码dns_probe_possible解决方法,阅读专题下面的文章了解更多处理方案。

30

2025.12.25

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

94

2025.12.25

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Rust 教程
Rust 教程

共28课时 | 3.9万人学习

Vue 教程
Vue 教程

共42课时 | 5.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号