JavaScript精进篇

JavaScript是所有前端框架中最基础的框架,在工作了两年以后又重新回到了这里。过去两年里用的最多的前端框架是jquery,因为它简单易上手,而jquery就是封装了JavaScript。重新系统的回顾一下JavaScript,你能了解到很多以前不知道的小知识、忽略的小细节,夯实基础。可能了解的这些在编码中用到的很少或者基本用不到,但是却能够加深理解,而且会有一种茅塞顿开的感觉,还不时会遇到以前不理解但是匆匆掠过的问题,看完了以后会说一句“原来如此”,使技术精进。相信重新回顾一下不仅会打牢基础,而且对以后学习别的前端框架会起到事半功倍的作用。

1、CData

在HTML 中,有特殊的规则用以确定<script>元素中的哪些内容可以被解析,但这些特殊的规则在XHTML 中不适用。这里比较语句a < b 中的小于号(<)在XHTML 中将被当作开始一个新标签来解析。但是作为标签来讲,小于号后面不能跟空格,因此就会导致语法错误。

避免在XHTML 中出现类似语法错误的方法有两个。一是用相应的HTML 实体(&lt;)替换代码中所有的小于号(<),替换后的代码类似如下所示:

<script type="text/javascript">
  function compare(a, b) {
    if (a &lt; b) {
      alert("A is less than B");
    } else if (a > b) {
      alert("A is greater than B");
    } else {
      alert("A is equal to B");
    }
    }
</script>

虽然这样可以让代码在XHTML 中正常运行,但却导致代码不好理解了。为此,我们可以考虑采用另一个方法。

保证让相同代码在XHTML 中正常运行的第二个方法,就是用一个CData 片段来包含JavaScript 代码。在XHTML(XML)中,CData 片段是文档中的一个特殊区域,这个区域中可以包含不需要解析的任意格式的文本内容。因此,在CData 片段中就可以使用任意字符——小于号当然也没有问题,而且不会导致语法错误。引入CData 片段后的JavaScript 代码块如下所示:

<script type="text/javascript"><![CDATA[
  function compare(a, b) {
    if (a < b) {
      alert("A is less than B");
    } else if (a > b) {
      alert("A is greater than B");
    } else {
      alert("A is equal to B");
    }
    }
]]></script>

在兼容XHTML 的浏览器中,这个方法可以解决问题。但实际上,还有不少浏览器不兼容XHTML,因而不支持CData 片段。怎么办呢?再使用JavaScript 注释将CData 标记注释掉就可以了:

<script type="text/javascript">
//<![CDATA[
  function compare(a, b) {
    if (a < b) {
      alert("A is less than B");
    } else if (a > b) {
      alert("A is greater than B");
    } else {
      alert("A is equal to B");
    }
    }
//]]>
</script>

2、var 局部变量与全局变量

用var 操作符定义的变量将成为定义该变量的作用域中的局部变量。也就是说,如果在函数中使用var 定义一个变量,那么这个变量在函数退出后就会被销毁,例如:

function test(){
  var message = "hi"; // 局部变量
}
test();
alert(message); // 错误!

这里,变量message 是在函数中使用var 定义的。当函数被调用时,就会创建该变量并为其赋值。而在此之后,这个变量又会立即被销毁,因此例子中的下一行代码就会导致错误。不过,可以像下面这样省略var 操作符,从而创建一个全局变量:

function test(){
  message = "hi"; // 全局变量
}
test();
alert(message); // "hi"

这个例子省略了var 操作符,因而message 就成了全局变量。这样,只要调用过一次test()函数,这个变量就有了定义,就可以在函数外部的任何地方被访问到。

注意:虽然省略var 操作符可以定义全局变量,但这也不是我们推荐的做法。因为在局部作用域中定义的全局变量很难维护,而且如果有意地忽略了var 操作符,也会由于相应

变量不会马上就有定义而导致不必要的混乱。给未经声明的变量赋值在严格模式下会导致抛出ReferenceError 错误。

3、null == undefined

首先 alert(null == undefined); 返回的值是 true。

接下来分别解释一下这两个类型

Undefined 类型只有一个值,即特殊的undefined。在使用var 声明变量但未对其加以初始化时,这个变量的值就是undefined,例如:

var message;
alert(message == undefined); //true

这个例子只声明了变量message,但未对其进行初始化。比较这个变量与undefined 字面量,结果表明它们是相等的。

不过,包含undefined 值的变量与尚未定义的变量还是不一样的。看看下面这个例子:

var message; // 这个变量声明之后默认取得了undefined 值
// 下面这个变量并没有声明
// var age
alert(message); // "undefined"
alert(age); // 产生错误

运行以上代码,第一个警告框会显示变量message 的值,即"undefined"。而第二个警告框——由于传递给alert()函数的是尚未声明的变量age——则会导致一个错误。对于尚未声明过的变量,只能执行一项操作,即使用typeof 操作符检测其数据类型(对未经声明的变量调用delete 不会导致错误,但这样做没什么实际意义,而且在严格模式下确实会导致错误)。

然而,令人困惑的是:对未初始化的变量执行typeof 操作符会返回undefined 值,而对未声明的变量执行typeof 操作符同样也会返回undefined 值。来看下面的例子:

var message; // 这个变量声明之后默认取得了undefined 值
// 下面这个变量并没有声明
// var age
alert(typeof message); // "undefined"
alert(typeof age); // "undefined"

结果表明,对未初始化和未声明的变量执行typeof 操作符都返回了undefined 值;这个结果有其逻辑上的合理性。因为虽然这两种变量从技术角度看有本质区别,但实际上无论对哪种变量也不可能执行真正的操作。

结论:即便未初始化的变量会自动被赋予undefined 值,但显式地初始化变量依然是明智的选择。如果能够做到这一点,那么当typeof 操作符返回"undefined"值时,我们就知道被检测的变量还没有被声明,而不是尚未初始化。

Null 类型是第二个只有一个值的数据类型,这个特殊的值是null。从逻辑角度来看,null 值表示一个空对象指针,而这也正是使用typeof 操作符检测null 值时会返回"object"的原因,如下面的例子所示:

var car = null;
alert(typeof car); // "object"

如果定义的变量准备在将来用于保存对象,那么最好将该变量初始化为null 而不是其他值。这样一来,只要直接检查null 值就可以知道相应的变量是否已经保存了一个对象的引用,如下面的例子所示:

if (car != null){
  // 对car 对象执行某些操作
}

实际上,undefined 值是派生自null 值的,因此ECMA-262 规定对它们的相等性测试要返回true:

alert(null == undefined); //true

这里,位于null 和undefined 之间的相等操作符(==)总是返回true,不过要注意的是,这个操作符出于比较的目的会转换其操作数。

尽管null 和undefined 有这样的关系,但它们的用途完全不同。如前所述,无论在什么情况下都没有必要把一个变量的值显式地设置为undefined,可是同样的规则对null 却不

适用。换句话说,只要意在保存对象的变量还没有真正保存对象,就应该明确地让该变量保存null 值。这样做不仅可以体现null 作为空对象指针的惯例,而且也有助于进一步

区分null 和undefined。

4、Boolean和Boolean()

Boolean 类型是ECMAScript 中使用得最多的一种类型,该类型只有两个字面值:true 和false。这两个值与数字值不是一回事,因此true 不一定等于1,而false 也不一定等于

0。

虽然Boolean 类型的字面值只有两个,但ECMAScript 中所有类型的值都有与这两个Boolean 值等价的值。要将一个值转换为其对应的Boolean 值,可以调用转型函数

Boolean(),如下例所示:

var message = "Hello world!";
var messageAsBoolean = Boolean(message);

在这个例子中,字符串message 被转换成了一个Boolean 值,该值被保存在messageAsBoolean变量中。可以对任何数据类型的值调用Boolean()函数,而且总会返回一个

Boolean 值。至于返回的这个值是true 还是false,取决于要转换值的数据类型及其实际值。下表给出了各种数据类型及其对应的转换规则。

这些转换规则对理解流控制语句(如if 语句)自动执行相应的Boolean 转换非常重要,请看下面的代码:

var message = "Hello world!";
if (message){
  alert("Value is true");
}

运行这个示例,就会显示一个警告框,因为字符串message 被自动转换成了对应的Boolean 值(true)。由于存在这种自动执行的Boolean 转换,因此确切地知道在流控制语

句中使用的是什么变量至关重要。错误地使用一个对象而不是一个Boolean 值,就有可能彻底改变应用程序的流程。

原文地址:https://www.cnblogs.com/banma/p/7481293.html