JavaScript 学习技巧


Posted in Javascript onFebruary 17, 2010
  1. 转化为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

  2. 为参数赋初值
    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;
    
       }

  3. 阻止别人在Iframe中加载你的页面
    如果你的网站变得非常有人气的时候,就有很多网站想链接到你的网站,甚至想把你的网页通过IFrame嵌入它自己的网页。
    这样就不好玩了,那么如何来阻止这样行为呢?
    if(top !== window) {
    
        top.location.href = window.location.href;
    
       }
    这段代码应该放在你每个页面的head 中,如果你想知道现实中有没人在用,看看baidu的博客你就知道了。

  4. 字符串替换
    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"

  5. 将arguments转化为数组
    函数中的预定义变量arguments 并非一个真正的数组,而是一个类似数组的对象。
    它具有length 属性,但是没有slice, push, sort等函数,那么如何使arguments 具有这些数组才有的函数呢?
    也就是说如何使arguments 变成一个真正的数组呢?
    function args() {
    
        return [].slice.call(arguments, 0);
    
       }
    
       args(2, 5, 8); // [2, 5, 8]

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

    所以,安全起见一定要为parseInt 指定第二个参数。
  7. 从数组中删除一个元素
    或许我们可以通过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]

  8. 函数也是对象
    在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 指向当前正在运行的函数。

  9. 数组中的最大值
    如何在全是数字的数组中找到最大值,我们可以简单的通过循环来完成:
    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

  10. 为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.');

  11. undefined 是JavaScript中保留关键字么?
    看起来像是的,但实际上undefined并不是JavaScript中的关键字:
    var undefined = 'Hello'; 
    
       undefined; // 'Hello'
    这段代码可能会让你感到很奇怪,不过它的确能够正常运行,undefined 只是JavaScript中一个预定义的变量而已。
    注:在JavaScript程序中,千万不要这样做,这个技巧只是告诉你有这么一回事而已。

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

  13. 预加载图片
    预加载图片就是加载页面上不存在的图片,以便以后使用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]; 
    
       }

  14. 闭包(closure)
    闭包指的是函数内的局部变量,当函数返回时此变量依然可用。
    当你在函数内部定义另外一个函数时,你就创建了一个闭包,一个著名的例子:
    function add(i) { 
    
        return function() { 
    
         return ++i; 
    
        }; 
    
       } 
    
       add(2).toString(); // "function () { return ++i; }" 
    
       add(2)(); // 3
    add(2) 是一个函数,它可能获取外部函数的局部变量i
    参考文章

  15. 私有变量
    我们经常使用命名规范来标示一个变量是否为私有变量(最常用来标示):
    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"

  16. JavaScript没有块级上下文(Scope)
    JavaScript中块级代码没有上下文,实际上只有函数有自己的上下文。
    for(var i = 0; i < 2; i ++) { 
       } 
    
       i; // 2
    如果想创建一个上下文,可以使用自执行的匿名函数:
    (function (){ 
    
        for(var i = 0; i < 2; i ++) { 
        }
    
       })(); 
    
       typeof(i) === 'undefined'; // true

  17. 怪异的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

  18. 真值和假值
    JavaScript中所有值都能隐式地转化为Boolean类型。
    在条件判断中,下面这些值会自动转化为false:
    null, undefined, NaN, 0, ‘', false
    因此,不需要做如下复杂的判断:
    if(obj === undefined || obj === null) { 
    
       }
    而只需要这样做就行了:
    if(!obj) { 
       }

  19. 修改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"

  20. 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"

  21. 快速字符串连接
    我们经常使用+ 将较短的字符串连接为一个长字符串,这在大部分的情况下是没问题的。
    但是如果有大量的字符串需要连接,这种做法将会遇到性能问题,尤其是在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则表现的傻乎乎的。
  22. 一元操作符 +
    在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
    参考文章

  23. 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。

  24. 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>";

  25. 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 相关文章推荐
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
AngularJs表单验证实例详解
May 30 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
JavaScript编写开发动态时钟
Jul 29 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
You might like
转PHP手册及PHP编程标准
2006/12/17 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
PDO::query讲解
2019/01/29 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
bpython 功能强大的Python shell
2016/02/16 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
深入了解Django中间件及其方法
2019/07/26 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
利用python汇总统计多张Excel
2020/09/22 Python
python 对xml解析的示例
2021/02/27 Python
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
《桂林山水》教学反思
2014/02/08 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
歌唱比赛主持词
2014/03/18 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
社区端午节活动总结
2015/02/11 职场文书