JavaScript初学者需要了解10个小技巧


Posted in Javascript onAugust 25, 2010

因为绝大多数的浏览器都和它兼容,你可以在这些浏览器中使用它。JavaScript被接受的相当快,因为它是如此的简单,而且使用范围相当广泛。许多程序员过去常常认为JavaScript是一门“玩具语言”,但是,AJAX进入市场后表现出了完全相反的一面,它让JavaScript展现出了完全不同的能力和功能。
由于这个发明的出现,程序员现在已经可以创建带有桌面应用程序效果的Web应用程序了,这是很有益处的,因为数据可以更快地改变。这是一些迷你技巧,它们可以帮助初学者更好地使用JavaScript。JavaScript的使用范围相当广泛,而且还有这么多的风格,所以它可以有很多的技巧。另外,虽然它很多的编程方法,但是我只挑选了10个技巧,我认为这些技巧对初学者理解JavaScript来说是很好的的起点。
1,在一个数组的最后添加一个元素
这个技巧可以让你使用Length属性在一个数组的最后添加一个元素,因为Length属性比数组的最后一个元素的下标多1。这个方法和“push”方法是相同的。例如:

var myArray = []; 
myArray[myArray.length] = 'New Element';

2,调整一个数组的长度
Length属性不是只读的,所以你可以设置Length属性的值。而且,你可以使用它增大或缩小数组的长度。例如:
var myArray = [1,2,3]; 
myArray.length // 3 
myArray.length = 2; //Delete the last element 
myArray.length = 20 // add 18 elements to the array; the elements have the undefined value.

3,使用“!!”把任意数据类型转换成Boolean
这个技术可以让你使用“!!”把任意数据类型(比如string, number或integer)转换成Boolean。例如:

var myString = '23255'; 
typeof myString; //String 
myString = !!myString; 
typeof myString //Boolean

4,把Number转换成String
这个技巧可以让你在number的结尾添加一个空的string来把number转换成string,例如:
var mynumber = 234; 
typeof mynumber; //Number 
mynumber += ''; 
typeof mynumber; //String

5,了解一个函数需要多少个变量
这是一个伟大的技巧,可以让你准确地知道一个函数需要多少个变量。例如:
function add_nums(num1, num2){ 
return num1 + num2; 
} 
add_nums.length // 2 is the amount of parameters expected by the function add_nums

6,使用“arguments”对象来了解一个函数接收到了多少个参数
这个技术可以让你使用“arguments”对象来了解一个函数接收到了多少个参数。例如:
function add_nums(){ 
return arguments.length; 
} 
add_nums(23,11,32,56,89,89,89,44,6); //this return the number 9

当你需要检查参数个数的有效性的时候,或者当你需要创建一个不确定参数个数的函数的时候,这个技巧是很有用的。
function sum_three_nums( ){ 
if(arguments.length!=3) throw new Error('received ' + arguments.length + ' parameters and should work with 3'); 
} 
sum_three_nums(23,43); //Return the error message 
function sum_num(){ 
var total = 0; 
for(var i=0;i<arguments .length;i++){ 
total+=arguments[i]; 
} 
return total; 
} 
sum_num(2,34,45,56,56);

7,把对象当成参数,来组织和改善函数
在现代Web开发中,对象最普遍的一个用途是把它们当成函数的参数。要记住函数参数的这个规则总是很困难的;但是,使用一个对象是十分有好处的,因为我们不必再担心参数的规则了。而且,它更有组织性,可以让用户更好的理解我们要做什么。这个方法可以让你把对象当成参数,来组织和改善函数。例如:
function insertData(name,lastName,phone,address){ 
code here; 
}

重构以后的代码是这样的:
function insertData(parameters){ 
var name = parameters.name; 
var lastName = parameters.lastName; 
var phone = parameters.phone; 
var address = parameters.address; 
}

当你要使用默认值的时候,它也是十分有用的。例如:
function insertData(parameters){ 
var name = parameters.name; 
var lastName = parameters.lastName; 
var phone = parameters.phone; 
var address = parameters.address; 
var status = parameters.status || 'single' //If status is not defined as a property 
//in the object the variable status take single as value 
}

现在,要使用这个函数十分的简单;我们可以用两种方式来发送数据:
//Example 1 
insertData({name:'Mike', lastName:'Rogers', phone:'555-555-5555',address:'the address', status:'married'}); //Example 2 
var myData = { name:'Mike', 
lastName:'Rogers', 
phone:'555-555-5555', 
address:'the address', 
status:'married' 
}; 
insertData(myData);

8,函数就是数据
函数就是像strings或numbers那样的数据,我们可以把它们当成函数参数来传递它们,这可以创建十分令人惊讶而又“威风凛凛”的Web应用程序。这个方法是非常有用的,几乎所有的主流框架都使用了这个方法。例如:
function byId(element, event, f){ 
Document.getElementById(element).['on'+event] = f; //f is the function that we pass as parameter 
} 
byId('myBtn','click',function(){alert('Hello World')}); 
Another example of functions as data: 
//Example 1 
function msg(m){ 
Alert(m); 
} 
//Example 2 
var msg = function(m){ alert(m);} 
这些函数几乎是完全相同的。唯一的区别是使用它们的方式。例如:第一个函数,在你声明它以前,你就可以使用它了;但是第二个函数只有声明以后才能使用: 
//Example 1 
msg('Hello world'); //This will work 
function msg(m){ 
alert(m); 
} 
//Example 2 
msg('Hello world'); //Does not work because JavaScript cannot find the function msg because is used before is been declared. 
var msg = function(m){ alert(m)}

9,扩展本地对象
虽然一些JavaScript的领袖不推荐这个技术,但是它已经被一些框架使用了。它可以让你针对JavaScript API来创建一些辅助性的方法。
//We create the method prototype for our arrays 
//It only sums numeric elements 
Array.prototype.sum = function(){ 
var len = this.length; 
total = 0; 
for(var i=0;i<len ;i++){ 
if(typeof this[i]!= 'number') continue; 
total += this[i]; 
} 
return total; 
} 
var myArray = [1,2,3,'hola']; 
myArray.sum(); 
Array.prototype.max = function(){ 
return Math.max.apply('',this); 
}

10,Boolean
注意它们之间的区别,因为这会节省你调试脚本的时间。
'' == '0' // false 
0 == '' // true 
0 == '0' // true 
false == 'false' // false 
false == '0' // true 
false == undefined // false 
false == null // false 
null == undefined // true 
true == 1 // true 
'' == null // false 
false == '' // true

如果你在其他地方看过这些脚本,那么这些技巧可以帮助你融会贯通。这些技巧甚至还不及JavaScript所有功能的冰山一角,但是这是一个开始!请不要客气,留下你的评论,问题,额外的技巧或疑虑吧,但是请记住,这是一篇针对初学者的文章!!我希望能收到一些开发者同行的来信!Enjoy!
Javascript 相关文章推荐
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
js select常用操作控制代码
Mar 16 Javascript
理解javascript回调函数
Dec 28 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 #Javascript
js中判断控件是否存在
Aug 25 #Javascript
JavaScript浏览器选项卡效果
Aug 25 #Javascript
Javascript之旅 对象的原型链之由来
Aug 25 #Javascript
Javascript new关键字的玄机 以及其它
Aug 25 #Javascript
jquery下组织javascript代码(js函数化)
Aug 25 #Javascript
jquery实现居中弹出层代码
Aug 25 #Javascript
You might like
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
php 变量未定义等错误的解决方法
2011/01/12 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
js生成随机数之random函数随机示例
2013/12/20 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
vue中监听返回键问题
2019/08/28 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
python类装饰器用法实例
2015/06/04 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
公司应聘求职信
2014/06/21 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript