JavaScript 网页编程从入门到精通 (清华社"视频大讲堂"大系·网络开发视频大讲堂)
上QQ阅读APP看书,第一时间看更新

4.7 案例实战

本节将通过题型化案例训练读者灵活应用数据类型和变量。

4.7.1 代码题

1.阅读下列程序,写出x、y、z的终值。

      var x = 1, y = z = 0;
      function add(n){
          return n = n + 1;
      }
      y = add(x);
      function add(n){
          return n = n + 3;
      }
      z = add(x);

2.下面代码的输出值是什么?

    function f1() {
        var n = 100;
        nAdd = function() {
            n += 1
        }
        function f2() {
            alert(n);
        }
        return f2;
     }
     var result = f1();
     result();
     nAdd();
     result();

3.阅读下面代码,判断输出值,并解释原因。

    var a;
    alert(typeof a);
    alert(b);

4.阅读下面代码,判断每个表达式的值,并解释原因。

    var undefined;
    undefined == null;
    1 == true;
    2 == true;
    0 == false;
    0 == '';
    NaN == NaN;
    [] == false;
    [] == ! [];

5.阅读下面代码,判断foo的值和类型。

    var foo = "11"+2-"1";
    console.log(foo);
    console.log(typeof foo);

6.阅读下面代码,写出输出值。

    var a = new Object();
    a.value = 1;
    b = a;
    b.value = 2;
    alert(a.value);

7.阅读下列代码,将会输出什么?

    var foo = 1;
    function(){
      console.log(foo);
      var foo = 2;
      console.log(foo);
  }

8.阅读下面代码,判断输出结果。

  function fn(a) {
      console.log(a);
      var a = 2;
      function a() {}
      console.log(a);
  }
  fn(1);

9.阅读下面代码,判断输出结果。

  var f = true;
  if (f === true) {
      var a = 10;
  }
  function fn() {
      var b = 20;
      c = 30;
  }
  fn();
  console.log(a);
  console.log(b);
  console.log(c);

10.阅读下面代码,判断输出结果。

  var f = true;
  if (f === true) {
      var a = 10;
  }
  function fn() {
      var b = 20;
      c = 30;
  }
  fn();
  console.log(a);
  console.log(b);
  console.log(c);

11.阅读下面代码,判断输出结果。

  var a = 10;
  a.pro = 10;
  console.log(a.pro + a);
  var s = 'hello';
  s.pro = 'world';
  console.log(s.pro + s);

12.阅读下面代码,判断输出结果。

      console.log(typeof fn);
      function fn() {};
      var fn;

13.阅读下面代码,判断输出结果。

      var a="undefined";
      var b="false";
      var c="";
      function assert(aVar){
          if(aVar)
            alert(true);
          else
            alert(false);
      }
      assert(a);
      assert(b);
      assert(c);

代码题参考答案

1.x=1、y=4、z=4。

解析:JavaScript在预编译期会使用function add(n){ return n = n + 3; }覆盖掉前面声明的add方法。

2.100、undefined、101。

解析:本题重点考查变量作用域,以及函数调用返回值问题,函数nAdd()没有声明返回值,则默认返回值为undefined。

3.undefined、报错。

解析:使用var声明变量,但未对其赋值进行初始化时,这个变量的默认值为undefined,而变量b未声明先使用将报错。注意,未声明和未赋值是不同的概念。

4.true、true、false、true、true、false、true、true

解析:本例各个特殊值比较说明如下。

Undefined与Null相等,但不恒等(===)。

一个是Number,一个是String时,会尝试将String转换为Number。

尝试将Boolean转换为Number,即0或1。

尝试将Object转换成Number或String,取决于另外一个对比量的类型。

所以,对于0、空字符串的判断,建议使用“===”。“===”会先判断两边的值类型,类型不匹配时为false。

5.值为111,类型为Number。

解析:先转换为字符串相连接,然后再转换为数字相减。

6.2。

解析:考察引用数据类型应用技巧。

7.undefined和2。

解析:上面代码相当于下面代码。

      var foo = 1;
      function(){
          var foo;
          console.log(foo); //undefined
          foo = 2;
          console.log(foo); //2;
      }

函数声明和变量声明会被JavaScript引擎隐式提升到当前作用域的顶部,但是只提升名称不会提升赋值操作。

8.function a() {}、2。

解析:var和function会提前声明,且function优先于var声明。所以提前声明后输出的a为function,然后代码往下执行,a被重新赋值,所以第二次输出为2。

9.10、报错、30。

解析:function(){}内声明的变量是局部变量,而没有使用var声明的变量是全局变量。while{}、if{}、for(){}之内声明的变量都是全局变量,除非其被包含在function内。

10.10。

解析:function和var会提前声明,而{...}内的变量也会提前声明。代码还没执行前,a变量已经被声明,于是’a' in window返回true, a被赋值。

11.NaN、'undefined 'hello'。

解析:给基本类型数据加属性不报错,但是引用的话返回undefined,10+undefined返回NaN,而Undefined和String相加时转变成了字符串。

12.function。

解析:因为函数声明优于变量声明。在代码逐行执行前,函数声明和变量声明会提前进行,而函数声明又会优于变量声明,这里的优于可以理解为晚于变量声明后,如果函数名和变量名相同,函数声明就能覆盖变量声明。所以以上代码将函数声明和变量声明调换顺序还是一样的结果。

13.true、true、false。

解析:undefined和false都是特殊数据类型,但是用双引号就不是本身类型了,而是字符串,空串相当于false,否则是true。

4.7.2 编程题

1.在JavaScript中如何检测一个变量是String类型?

提示:

String类型有两种生成方式:

      var str = "hello world";
      var str2 = new String("hello world");

参考代码:

      function IsString(str){
          return (typeof str == "string" || str.constructor == String);
      }
      var str = "";
      alert(IsString(1));
      alert(IsString(str));
      alert(IsString(new String(str)));

2.编写一个函数,检测参数是否为函数?

参考:

      /**
       * 判断对象是否为函数,如果当前运行环境对可调用对象(如正则表达式)
        * 的typeof返回’function',采用通用方法,否则采用优化方法。
        *
        *@param{Any}arg需要检测是否为函数的对象
        *@return{boolean} 如果参数是函数,返回true,否则false
        */
       function isFunction(arg) {
          if (arg) {
              if (typeof (/./) ! == 'function') {
                  return typeof arg === 'function';
              } else {
                  return Object.prototype.toString.call(arg) === '[object Function]';
              }
          }
          return false;
       }

3.为了保证页面输出安全,经常需要对一些特殊的字符进行转义,编写一个函数escapeHtml,将<、>、&、"进行转义。

参考:

      function escapeHtml(str) {
          return str.replace(/[<>"&]/g, function(match) {
          switch (match) {
                      case "<":
                          return "&lt; ";
                      case ">":
                          return "&gt; ";
                      case "&":
                          return "&amp; ";
                      case "\"":
                          return "&quot; ";
            }
        });
      }

4.实现一个函数clone,对JavaScript中的5种主要的数据类型(Number、String、Object、Array、Boolean)进行值复制操作。

参考:

      //考点1:对于基本数据类型和引用数据类型在内存中存放的是值还是指针是否清楚
      //考点2:是否知道如何判断一个变量是什么类型
      //考点3:递归算法的设计
      Object.prototype.clone = function(){
            var o = this.constructor === Array ? [] : {};
            for(var e in this){
                    o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
            }
            return o;
      }