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 相关文章推荐
深入领悟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
You might like
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
python去掉行尾的换行符方法
2017/01/04 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
python创建学生成绩管理系统
2019/11/22 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
农村婚礼证婚词
2014/01/08 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
联欢晚会主持词
2014/03/25 职场文书
环境日宣传活动总结
2014/07/09 职场文书
档案工作汇报材料
2014/08/21 职场文书
三严三实对照检查材料
2014/08/25 职场文书
标准版离职证明书
2014/09/12 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书