js高级程序设计（红宝书）学习笔记一

写在前面

算来算去自从2016年六月份毕业开始，到十月份培训结束开始正式工作，也已经将近两年了。。。没错，我并非是科班出身，走的培训路线，四个月的培训时间，课程被安排的满满当当，每天机械式的上课，下课，吃饭，自习，睡觉重复了一遍又一遍。但每当我工作的时间越长越感觉到当时学习知识的匮乏，越能感觉到基础知识的重要性。每次遇到问题，解决问题，不能及时的将错误和解决办法，以及工作中的经验记录下来导致自己没有养成总结的好习惯，遂有了写博客的想法，将自己的经验，感悟，学习方法记录在博客里，希望能在提升自己的同时也能帮助到别人。
注:博客中所引用的例子或者语句有的来自书中原文（JavaScript高级程序设计 第3版），在此做补充说明。

JS高级程序设计

红宝书这本书特别适合js初学者进行研读，入门级书籍的首选，里面的讲解通俗易懂，简单明了。在培训的时候曾经阅读过一遍，经过将近两年的工作还是感觉此书有必要再重新研读一遍，并以博客的形式将我认为比较重要的知识点记录下来，查漏补缺。

（一）DOM级别

说起来dom我们可能都熟悉，但是作为非科班出身的我第一次听说dom级别的时候一脸懵逼，怎么dom还要分级别的吗？不要慌，现在我们就来揭开dom级别的神秘面纱。

（1）DOM1级

dom1级由两个模块组成dom核心（dom core）和dom html。其中 dom core 规定的是如何映射基于xml的文档结构，而dom html 模块则在dom核心的基础上加以扩展，添加了针对html的对象和方法。简单来说，dom1级的目标就是主要为了映射文档的结构，以及扩展了一些html的对象和方法。

（2）DOM2级

在原来的dom基础上又扩充了一些 鼠标和用户界面事件，范围，遍历，等细分模块，增加了对css的支持。

（3）DOM3级

进一步扩展了dom，引入了以统一方式加载和 保存文档的方法（在dom加载和保存模块中定义），新增了验证文档的方法（在dom验证模块中定义）

（二）< script> 标签

在之前的培训过程中，只是知道< script> 标签只是用来加载js，src属性用来引用外部js文件，却不知道此标签还有其他属性以及对应的方法，现在我们一起来学习下吧。
async： 可选属性，表示应该立即下载脚本，但不妨碍页面中的其它操作，比如下载其它资源或等待加载其它脚本。此属性只对外部脚本文件有效。标记为 async 的脚本并不保证按照指定它们的先后顺序执行
charset： 可选属性，表示通过src属性指定代码的字符集。由于大多数浏览器会忽略这个值，因此这个属性很少有人用。
defer： 可选属性，表示浏览器对脚本立即下载，可以延迟到文档完全被解析和显示之后再执行。只对外部文件有效
language： 已废弃
src： 这个就不用说了吧。。。
type： 可选属性，可以成是language的替代属性，表示编写代码使用的脚本语言的内容类型（也成为MIME类型）目前 type 属性的值依旧还是text/javascript。不过，这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript

（三）数据类型

作为一个jser，js的基本数据类型肯定是要知道的（undefined,null,boolean,number,string,object）,具体的数据类型形式以及用法就不再赘述，只是记录一下各个基本数据类型容易忽略以及犯错的地方。

Undefined

undefined是指在使用var声明变量但未对其加以初始化时，这个变量就是undefined。比如 ：
var msg;
alert(msg); // "undefined"
alert(typeof msg); // "undefined"
对未初始化的变量执行 typeof 操作符会返回 undefined 值，而对未声明的变量执行 typeof 操作符同样也会返回 undefined 值。来看下面的例子:
var message; // 这个变量声明之后默认取得了 undefined 值
// 下面这个变量并没有声明
// var age
alert(typeof message)// "undefined"
alert(typeof age); // "undefined"

Null

null 表示一个空对象指针，而这也正是使用 typeof 操作符检测 null 值时会返回”object”的原因。如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null，而不是其他值。
实际上undefined值派生自null，因此规定 null == undefined 要返回 true

Boolean

该类型只有两个字面值：true 和 false。这两个值与数字值不是一回事，因此 true 不一定等于 1，而 false 也不一定等于 0。需要注意的是，Boolean 类型的字面值 true 和 false 是区分大小写的。也就是说，True 和 False（以及其他的混合大小写形式）都不是 Boolean 值。
虽然 Boolean 类型的字面值只有两个，但 ECMAScript 中所有类型的值都有与这两个 Boolean 值等价的值。要将一个值转换为其对应的 Boolean 值。下表给出了各种数据类型及其对应的转换规则。

数据类型	转换为true的值	转换为false的值
Boolean	true	false
String	任何非字符串	“”(空字符串)
Number	任何非零数字值（包括无穷大）	0和NaN
Object	任何对象	null
Undefined		undefined

Number

number 类型中有个值比较特殊 NaN。原书上表示任何数值除以0都会得到NaN，但实际上只有0除以0才会得到NaN，正数除以0会得到Infinity，负数除以0会得到-Infinity。NaN 本身有两个非同寻常的特点。首先，任何涉及 NaN 的操作（例如 NaN/10）都会返回 NaN，这个特点在多步计算中有可能导致问题。其次，NaN 与任何值都不相等，包括NaN本身。例如下面的代码会返回false： alert(NaN == NaN); //false
有三个函数可以把非数值转换为数值：Number(),parseInt(),parseFloat().。第一个函数，即转型函数 Number()可以用于任何数据类型，而另两个函数则专门用于把字符串转换成数值。
Number()函数的转换规则如下。
 如果是 Boolean 值，true 和 false 将分别被转换为 1 和 0。
 如果是数字值，只是简单的传入和返回。
 如果是 null，返回0。
 如果是 undefined，返回NaN。
 如果是字符串，遵循下列规则：
  如果字符串中只包含数字（包括前面带正号或负号的情况），则将其转换为十进制数值，即”1”会变成 1，”123”会变成 123，而”011”会变成 11（注意：前导的零被忽略了）；
  如果字符串中包含有效的浮点格式，如”1.1”，则将其转换为对应的浮点数值（同样，也会忽略前导零）；
  如果字符串中包含有效的十六进制格式，例如”0xf”，则将其转换为相同大小的十进制整数值；
  如果字符串是空的（不包含任何字符），则将其转换为 0；
  如果字符串中包含除上述格式之外的字符，则将其转换为 NaN。
 如果是对象，则调用对象的 valueOf()方法，然后依照前面的规则转换返回的值。如果转换的结果是 NaN，则调用对象的 toString()方法，然后再次依照前面的规则转换返回的字符串值。
var num1 = Number("Hello world!"); //NaN
var num2 = Number(""); //0
var num3 = Number("000011"); //11
var num4 = Number(true); //1
parseInt()函数在转换字符串时，更多的是看其是否符合数值模式。它会忽略字符串前面的空格，直至找到第一个非空格字符。为了更好地理解 parseInt()函数的转换规则，下面给出一些例子：
var num1 = parseInt("1234blue"); // 1234
var num2 = parseInt(""); // NaN
var num3 = parseInt("0xA"); // 10（十六进制数）
var num4 = parseInt(22.5); // 22
var num5 = parseInt("070"); // 56（八进制数）
var num7 = parseInt("70"); // 70（十进制数）
var num8 = parseInt("0xf"); // 15（十六进制数）

注：书上说var num5 = parseInt("070"); // 56（八进制数）但实际得到的值为70，不知道怎么回事，哪位大神可以给我解惑，请留言或者评论，小弟感激不尽。

为了消除在使用 parseInt()函数时可能导致的上述困惑，可以为这个函数提供第二个参数：转换时使用的基数（即多少进制）。如果知道要解析的值是十六进制格式的字符串，那么指定基数 16 作为第二个参数，可以保证得到正确的结果，例如：
var num = parseInt("0xAF", 16); //175
实际上，如果指定了 16 作为第二个参数，字符串可以不带前面的”0x”，如下所示：
var num1 = parseInt("AF", 16); //175
var num2 = parseInt("AF"); //NaN
与 parseInt()函数类似，parseFloat()也是从第一个字符（位置 0）开始解析每个字符。而且也是一直解析到字符串末尾，或者解析到遇见一个无效的浮点数字字符为止。也就是说，字符串中的第一个小数点是有效的，而第二个小数点就是无效的了，因此它后面的字符串将被忽略。举例来说，“22.34.5”将会被转换为 22.34。

除了第一个小数点有效之外，parseFloat()与 parseInt()的第二个区别在于它始终都会忽略前导的零。parseFloat()可以识别前面讨论过的所有浮点数值格式，也包括十进制整数格式。但十六进制格式的字符串则始终会被转换成 0。由于parseFloat()只解析十进制值，因此它没有用第二个参数指定基数的用法。最后还要注意一点：如果字符串包含的是一个可解析为整数的数（没有小数点，或者小数点后都是零），parseFloat()会返回整数。以下是使用 parseFloat()转换数值的几个典型示例。
var num1 = parseFloat("1234blue"); //1234 （整数）
var num2 = parseFloat("0xA"); //0
var num3 = parseFloat("22.5"); //22.5
var num4 = parseFloat("22.34.5"); //22.34
var num5 = parseFloat("0908.5"); //908.5
var num6 = parseFloat("3.125e7"); //31250000

String

在学习字符串的过程中，只知道字符串是一系列字符续写，去对它的特点知道的少之又少，其实在ECMAScript 中的字符串是不可变的，也就是说，字符串一旦创建，它们的值就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量，例如：
var lang = "Java";
lang = lang + "Script";
以上示例中的变量 lang 开始时包含字符串”Java”。而第二行代码把 lang 的值重新定义为”Java”与”Script”的组合，即”JavaScript”。实现这个操作的过程如下：首先创建一个能容纳 10 个字符的新字符串，然后在这个字符串中填充”Java”和”Script”，最后一步是销毁原来的字符串”Java”和字符串”Script”，因为这两个字符串已经没用了。这个过程是在后台发生的，这也就是在某些浏览器中拼接字符串时速度很慢的原因所在。
转换字符串
有两种方法toString() 和 String()
数值、布尔值、对象和字符串值（没错，每个字符串也都有一个 toString()方法，该方法返回字符串的一个副本）都有 toString()方法。但 null 和 undefined 值没有这个方法。
调用 toString()方法不必传递参数。但是，在调用数值的 toString()方法时，可以传递一个参数：输出数值的基数。默认情况下，toString()方法以十进制格式返回数值的字符串表示。而通过传递基数，toString()可以输出以二进制、八进制、十六进制，乃至其他任意有效进制格式表示的字符串值。下面给出几个例子：
var num = 10;
alert(num.toString()); // "10"
alert(num.toString(2)); // "1010"
alert(num.toString(8)); // "12"
alert(num.toString(10)); // "10"
alert(num.toString(16)); // "a"

在不知道要转换的值是不是 null 或 undefined 的情况下，还可以使用转型函数 String()，这个函数能够将任何类型的值转换为字符串。String()函数遵循下列转换规则：
 如果值有 toString()方法，则调用该方法（没有参数）并返回相应的结果；
 如果值是 null，则返回"null"；
 如果值是 undefined，则返回"undefined"

Object

Object 的每个实例都具有下列属性和方法。
 constructor：保存着用于创建当前对象的函数。对于前面的例子而言，构造函数（constructor）
就是 Object()。
 hasOwnProperty(propertyName)：用于检查给定的属性在当前对象实例中（而不是在实例的原型中）是否存在。其中，作为参数的属性名（propertyName）必须以字符串形式指定（例如：o.hasOwnProperty(“name”)）。
 isPrototypeOf(object)：用于检查传入的对象是否是传入对象的原型。
 propertyIsEnumerable(propertyName)：用于检查给定的属性是否能够使用 for-in 语句来枚举。hasOwnProperty()方法一样，作为参数的属性名必须以字符串形式指定。
 toLocaleString()：返回对象的字符串表示，该字符串与执行环境的地区对应。
 toString()：返回对象的字符串表示。
 valueOf()：返回对象的字符串、数值或布尔值表示。通常与 toString()方法的返回值相同。