编程 Javascript

JavaScript 学习技巧

Posted in Javascript onFebruary 17, 2010

转化为Boolean类型
所有JavaScript中的值都能隐式的转化为Boolean类型，比如：

0 == false; // true

   1 == true; // true

   '' == false // true

   null == false // true

但是这些值都不是Boolean类型。
因此当我们使用三个等于号进行比较时：

0 === false; // false

   1 === true; // false

   '' === false // false

   null === false // false

现在的问题是如何将其他类型转化为Boolean类型：

!!0 === false; // true

   !!1 === true; // true

   !!'' === false // true

   !!null === false // true

为参数赋初值
JavaScript中没有重载的概念，但是JavaScript中函数的参数都是可选的，如果调用时少写了一个参数，将会被undefined 所代替。
```
function plus(base, added) {

    return base + added;

   }

   plus(2); // NaN
```
在这个例子中，plus(2) 和plus(2, undefined) 是等价的，2 + undefined 的结果是NaN 。
现在的问题是，如果没有传递第二个参数，如何为它赋初值呢？
```
function plus(base, added) {

    added = added || 1;

    return base + added;

   }

   plus(2); // 3

   plus(2, 2); // 4
```
有网友提到 plus(2, 0) = 3; 的确是这样的，看来这个地方还要做一些特殊处理：
```
function plus(base, added) {

    added = added || (added === 0 ? 0 : 1);

    return base + added;

   }
```
阻止别人在Iframe中加载你的页面
如果你的网站变得非常有人气的时候，就有很多网站想链接到你的网站，甚至想把你的网页通过IFrame嵌入它自己的网页。
这样就不好玩了，那么如何来阻止这样行为呢？
```
if(top !== window) {

    top.location.href = window.location.href;

   }
```
这段代码应该放在你每个页面的head 中，如果你想知道现实中有没人在用，看看baidu的博客你就知道了。
字符串替换
String.prototype.replace 函数经常会让那些非常熟悉C#或者Java的程序员感到迷惑。
比如：
```
'Hello world, hello world'.replace('world', 'JavaScript');

   // The result is "Hello JavaScript, hello world"
```
replace 函数的第一个参数是正则表达式。
如果你传递一个字符串到第一个参数，则只有第一个找到的匹配字符串被替换。
为了解决这个问题，我们可以使用正则表达式：
```
'Hello world, hello world'.replace(/world/g, 'JavaScript');

   // The result is "Hello JavaScript, hello JavaScript"
```
我们还可以指定在替换时忽略大小写：
```
'Hello world, hello world'.replace(/hello/gi, 'Hi');

   // The result is "Hi world, Hi world"
```
将arguments转化为数组
函数中的预定义变量arguments 并非一个真正的数组，而是一个类似数组的对象。
它具有length 属性，但是没有slice, push, sort等函数，那么如何使arguments 具有这些数组才有的函数呢？
也就是说如何使arguments 变成一个真正的数组呢？
```
function args() {

    return [].slice.call(arguments, 0);

   }

   args(2, 5, 8); // [2, 5, 8]
```
为parseInt函数指定第二个参数
parseInt 用来将字符串转化为整形的数字，语法为：
```
parseInt(str, [radix])
```
其中第二个参数是可选的，用来指定第一个参数是几进制的。
如果没有传递第二个参数，则按照如下规则：
->如果str 以 0x 开头，则认为是16进制。
->如果str 以 0 开头，则认为是8进制。
->否则，认为是10进制。
因此如下的代码将会让人很迷惑，如果你不知道这些规则：
```
parseInt('08'); // 0

   parseInt('08', 10); // 8
```
所以，安全起见一定要为parseInt 指定第二个参数。
从数组中删除一个元素
或许我们可以通过delete 来做到：
```
var arr = [1, 2, 3, 4, 5];

   delete arr[1];

   arr; // [1, undefined, 3, 4, 5]
```
可以看到，delete 并不能真正的删除数组中的一个元素。删除的元素会被undefined 取代，数组的长度并没有变化。
事实上，我们可以通过Array.prototype中的splice 函数来删除数组中的元素，如下所示：
```
var arr = [1, 2, 3, 4, 5];

   arr.splice(1, 1);

   arr; // [1, 3, 4, 5]
```

函数也是对象
在JavaScript中函数也是对象，因为我们可以为函数添加属性。
比如：

function add() {

    return add.count++;

   }

   add.count = 0;

   add(); // 0

   add(); // 1

   add(); // 2

我们为函数add 添加了count 属性，用来记录此函数被调用的次数。

当然这可以通过更优雅的方式来实现：

function add() {

    if(!arguments.callee.count) {

     arguments.callee.count = 0;

    }

    return arguments.callee.count++;

   }

   add(); // 0

   add(); // 1

   add(); // 2

arguments.callee 指向当前正在运行的函数。

数组中的最大值
如何在全是数字的数组中找到最大值，我们可以简单的通过循环来完成：
```
var arr = [2, 3, 45, 12, 8];

   var max = arr[0];

   for(var i in arr) {

    if(arr[i] > max) {

     max = arr[i];

    }

   }

   max; // 45
```
有没有其他方法？我们都知道JavaScript中有一个Math 对象进行数字的处理：
```
Math.max(2, 3, 45, 12, 8); // 45
```
然后，我们可以这样来找到数组中最大值：
```
var arr = [2, 3, 45, 12, 8];

   Math.max.apply(null, arr); // 45
```
为IE添加console.log 函数
在Firefox下并有Firebug的支持下，我们经常使用console.log 来在控制台记录一些信息。
但是这种做法在IE下会阻止JavaScript的执行（在Firefox下没有启用Firebug情况下也是一样），因为此时根本没有console 对象存在。
我们可以通过如下小技巧来防止这样情况的发生：
```
if (typeof(console) === 'undefined') {

    window.console = {

     log: function(msg) {

      alert(msg);

     }

    };

   }

   console.log('debug info.');
```
undefined 是JavaScript中保留关键字么？
看起来像是的，但实际上undefined并不是JavaScript中的关键字:
```
var undefined = 'Hello'; 

   undefined; // 'Hello'
```
这段代码可能会让你感到很奇怪，不过它的确能够正常运行，undefined 只是JavaScript中一个预定义的变量而已。
注：在JavaScript程序中，千万不要这样做，这个技巧只是告诉你有这么一回事而已。
判断一个变量是否为undefined
两种情况下，一个变量为undefined：
1. 声明了变量，但是没有赋值
```
var name; 

   name === undefined; // true
```
2. 从来没有声明过此变量
```
name2 === undefined; // error ? name2 is not defined
```
在第二种情况下，会有一个错误被抛出，那么如果判断一个变量是否为undefined而不产生错误呢？
下面提供了一种通用的方法：
```
typeof(name2) === ‘undefined'; // true
```

预加载图片
预加载图片就是加载页面上不存在的图片，以便以后使用JavaScript把它们快速显示出来。
比如你想在鼠标移动到某个图片上时显示另一张图片:

var img = new Image(); 

   img.src = "clock2.gif";

<img src="clock.gif" src="clock.gif" alt="" 

    onmouseover="this.src='clock2.gif';" 

    onmouseout="this.src=clock.gif';" />

那么，如何加载一组图片呢？考虑如下代码：

var source = ['img1.gif','img2.gif']; 

   var img = new Image(); 

   for(var i = 0; i < source.length; i++) { 

    img.src = source[i]; 

   }

实际上，这段代码只能预加载最后的一张图片，因为其他的图片根本没有时间来预加载在循环到来的时候。
因此正确的写法应该是：

var source = ['img1.gif','img2.gif']; 

   for(var i = 0; i < source.length; i++) { 

    var img = new Image(); 

    img.src = source[i]; 

   }

闭包（closure）
闭包指的是函数内的局部变量，当函数返回时此变量依然可用。
当你在函数内部定义另外一个函数时，你就创建了一个闭包，一个著名的例子：
```
function add(i) { 

    return function() { 

     return ++i; 

    }; 

   } 

   add(2).toString(); // "function () { return ++i; }" 

   add(2)(); // 3
```
add(2) 是一个函数，它可能获取外部函数的局部变量i 。
参考文章

私有变量
我们经常使用命名规范来标示一个变量是否为私有变量（最常用来标示）：

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
```
如果把 + 用在非字符串的前面，将按照如下顺序进行尝试转化：
1. 调用valueOf()
2. 调用toString()
3. 转化为数字
```
+new Date; // 1242616452016

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

   +new Date() === Number(new Date) // true
```
参考文章
encodeURI和encodeURIComponent
window.encodeURI函数用来编码一个URL，但是不会对以下字符进行编码：“:”, “/”, “;”, “?”.
window.encodeURIComponent则会对上述字符进行编码。
我们通过一个例子来说明：
```
'index.jsp?page='+encodeURI('/page/home.jsp'); // "index.jsp?page=/page/home.jsp"

   'index.jsp?page='+encodeURIComponent('/page/home.jsp'); // "index.jsp?page=%2Fpage%2Fhome.jsp"
```
因此，在对URL进行编码时我们经常会选择 encodeURIComponent。

table.innerHTML在IE下是只读属性
我们经常通过节点的innerHTML 属性来填充节点，比如：

<div id="container1"> </div>

document.getElementById('container1').innerHTML = "Hello World!";

但是在IE下设置table.innerHTML 将会导致错误：

<table id="table1"> </table>

// works well in Firefox, but fail to work in IE

   document.getElementById('table1').innerHTML = "<tr><td>Hello</td><td>World!</td></tr>";

实际上，table, thead, tr, select等元素的innerHTML属性在IE下都是只读的。

那么如果动态的创建一个table呢，下面提供了一种可行的方法：

<div id="table1"> </div>

document.getElementById('table1').innerHTML = "<table><tr><td>Hello</td><td>World!</td></tr></table>";

0.1+0.2 != 0.3
JavaScript将小数作为浮点数对待，所以可能会产生一些四舍五入的错误，比如：
```
0.1 + 0.2; // 0.30000000000000004
```
你可以通过toFixed方法指定四舍五入的小数位数：
```
(0.1 + 0.2).toFixed(); // "0"

   (0.1 + 0.2).toFixed(1); // "0.3"
```

javascript 是一种区分大小写的程序语言.

定义数组:
var strweek= new Array(7);

问号表达式
var i= (condition)?A:B;
相当于if-else 语句;condition 成立执行A ，不成立执行B;

switch 语句

var i=3;
var result="";
swithck(i);
{
case 1;
result="First";
case 2;
result="Second";
case 3;
result="Three";
break;
}

Date类
getDate() getYear() getMont()
getMinutes() getHours() getSeconds()
setTimeout("fution()",1000);

JavaScript 学习技巧

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

深入领悟JavaScript中的面向对象

Nov 18 Javascript

JQuery实现超链接鼠标提示效果的方法

Jun 10 Javascript

基于JavaScript的操作系统你听说过吗？

Jan 28 Javascript

Vue.js系列之项目结构说明(2)

Jan 03 Javascript

Angular下H5上传图片的方法（可多张上传）

Jan 09 Javascript

jquery仿ps颜色拾取功能

Mar 08 Javascript

基于Bootstrap框架菜鸟入门教程(推荐)

Sep 17 Javascript

JS实现利用两个队列表示一个栈的方法

Dec 13 Javascript

基于vue-simplemde实现图片拖拽、粘贴功能

Apr 12 Javascript

vue keep-alive请求数据的方法示例

May 16 Javascript

vue 录制视频并压缩视频文件的方法

Jul 27 Javascript

webpack css加载和图片加载的方法示例

Sep 11 Javascript

JavaScript Timer实现代码

Feb 17 #Javascript

两个比较有用的Javascript工具函数代码

Feb 17 #Javascript

类似GMAIL的Ajax信息反馈显示

Feb 16 #Javascript

JavaScript 10件让人费解的事情

Feb 15 #Javascript

JQuery 动画卷页返回顶部动画特效(兼容Chrome)

Feb 15 #Javascript

jQuery 处理表单元素的代码

Feb 15 #Javascript

jQuery 树形结构的选择器

Feb 15 #Javascript