JavaScript 应用技巧集合[推荐](3)

var person = { _name: '', getName: function() { return this._name || 'not defined'; } }; person.getName(); // "not defined"

下划线前缀用来作为私有变量的约定,但是其他开发人员仍然可以调用此私有变量:

复制代码 代码如下:

person._name; // ""

那么,如何在JavaScript中创建一个真正的私有变量呢?
主要技巧是使用匿名函数(anonymous function)和闭包(closure)。

复制代码 代码如下:

var person = {}; (function() { var _name = ''; person.getName = function() { return _name || 'not defined'; } })(); person.getName(); // "not defined" typeof(person._name); // "undefined"



JavaScript没有块级上下文(Scope)
JavaScript中块级代码没有上下文,实际上只有函数有自己的上下文。

复制代码 代码如下:

for(var i = 0; i < 2; i ++) { } i; // 2

如果想创建一个上下文,可以使用自执行的匿名函数:

复制代码 代码如下:

(function (){ for(var i = 0; i < 2; i ++) { } })(); typeof(i) === 'undefined'; // true



怪异的NaN
NaN用来表示一个值不是数字。
NaN在JavaScript中行为很怪异,是因为那NaN和任何值都不相等(包括它自己)。

复制代码 代码如下:

NaN === NaN; // false

因为下面的代码可能会让一些人抓狂:

复制代码 代码如下:

parseInt('hello', 10); // NaN parseInt('hello', 10) == NaN; // false parseInt('hello', 10) === NaN; // false

那么如何来检查一个值是否NaN?
可以使用window.isNaN来判断:

复制代码 代码如下:

isNaN(parseInt('hello', 10)); // true



真值和假值
JavaScript中所有值都能隐式地转化为Boolean类型。
在条件判断中,下面这些值会自动转化为false:
null, undefined, NaN, 0, ‘', false
因此,不需要做如下复杂的判断:

复制代码 代码如下:

if(obj === undefined || obj === null) { }

而只需要这样做就行了:

复制代码 代码如下:

if(!obj) { }



修改arguments
比如,添加一个值到arguments中:

复制代码 代码如下:

function add() { arguments.push('new value'); } add(); // error - arguments.push is not a function

这样会出错,因为arguments不是一个真正的数组,没有push方法。
解决办法:

复制代码 代码如下:

function add() { Array.prototype.push.call(arguments, 'new value'); return arguments; } add()[0]; // "new value"



Boolean 和 new Boolean
我们可以把Boolean看做是一个函数,用来产生Boolean类型的值(Literal):

复制代码 代码如下:

Boolean(false) === false; // true Boolean('') === false; // true

所以,Boolean(0)和!!0是等价的。
我们也可以把Boolean看做是一个构造函数,通过new来创建一个Boolean类型的对象:

复制代码 代码如下:

new Boolean(false) === false; // false new Boolean(false) == false; // true typeof(new Boolean(false)); // "object" typeof(Boolean(false)); // "boolean"



快速字符串连接
我们经常使用+将较短的字符串连接为一个长字符串,这在大部分的情况下是没问题的。
但是如果有大量的字符串需要连接,这种做法将会遇到性能问题,尤其是在IE下。

复制代码 代码如下:

var startTime = new Date(); var str = ''; for (var i = 0; i < 50000; i++) { str += i; } alert(new Date() - startTime); // Firefox - 18ms, IE7 - 2060ms

复制代码 代码如下:

var startTime = new Date(); var arr = []; for (var i = 0; i < 100000; i++) { arr.push(i); } var str = arr.join(""); alert(new Date() - startTime); // Firefox - 38ms, IE7 - 280ms


可以看到Firefox似乎对+操作符进行了优化,而IE则表现的傻乎乎的。

一元操作符 + 在JavaScript中,我们可以在字符串之前使用一元操作符“+”。这将会把字符串转化为数字,如果转化失败则返回NaN。

复制代码 代码如下:

2 + '1'; // "21" 2 + ( +'1'); // 3

如果把 + 用在非字符串的前面,将按照如下顺序进行尝试转化: 调用valueOf() 调用toString() 转化为数字

复制代码 代码如下:

+new Date; // 1242616452016 +new Date === new Date().getTime(); // true +new Date() === Number(new Date) // true




encodeURI和encodeURIComponent
window.encodeURI函数用来编码一个URL,但是不会对以下字符进行编码:“:”, “/”, “;”, “?”.
window.encodeURIComponent则会对上述字符进行编码。
我们通过一个例子来说明:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjysyg.html