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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
js读取本地文件的实例
2017/12/22 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
Python对象转换为json的方法步骤
2019/04/25 Python
django-初始配置(纯手写)详解
2019/07/30 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
义诊活动总结
2015/02/04 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis