JavaScript高级程序设计（第三版）学习笔记1~5章
Posted 平凡世界平凡人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript高级程序设计（第三版）学习笔记1~5章相关的知识，希望对你有一定的参考价值。
第2章，在html中使用javascript
Html引入外部js脚本
<script type="text/javascript" src="test.js">两个</script>之间不应放脚本，因为并不会被执行</script>
<script>标签有一个defer属性可以延迟脚本执行，但是并不保证会按脚本排列顺序执行
建议：将脚本引入放在<body>标签的所有内容之后，而不放在<head>标签中进行引入，加快页面响应
<noscript></noscript>标签中的内容会在浏览器不支持脚本或脚本被禁用的时候输出，启用了脚本的浏览器将不会看到标签中的内容
第3章，基本概念
标识符
第一个字符必须是字母，下划线（_）或美元符号（$），有效命名为字母、数字、下划线和美元符号构成的
采用驼峰命名法：第一个字母小写，后面的每个单词首字母大写
单行注释：
//这是单行注释
多行注释：
/*这是 多行 注释 */
typeof 操作符
typeof – 判断给定变量的数据类型
返回：
“undefined” – 未定义的数据类型
“boolean” – 布尔值
“string” – 字符串
“number” – 数值
“object” – 对象或者NULL
“function” – 函数
注：函数在js中是对象，不是数据类型，因此使用typeof区分函数和对象是有必要的
typeof在有些时候会返回令人迷惑但技术上确是正确的值，例如，null和对象，两者都会返回“object”
null与undefined是相等的，null == undefined 将返回true
进行算术计算时，所有的八进制和十六进制都将转换成十进制
Infinity 无穷大，有正负无穷大，可以使用isFinite()判断是否无穷大
Number.MAX_VALUE，Number.MIN_VALUE分别保存着数值类型的最大值和最小值
Number.NEGATIVE_INFINITY和Number.POSITIVE_INFINITY分别保存着负和正无穷大
NaN 非数值，可以使用isNaN判断一个变量是否非数值
数值转换
强制转换Number()，但是结果并不合理，建议使用parseInt()函数，并带入需要转换的基数
例：
parseInt(“10”,2); //以二进制解析 parseInt(“10”,8); //以八进制解析
不带入基数意味着让parseInt自己决定如何解析字符串，这会在某些时候造成错误
parseFloat()与parseInt()基本相同，将字符串解析成浮点数，始终忽略前导零，只解析十进制值，十六进制将被解析成0，因此他没有第二个参数
字符串类型
字符串类型变量是不可变，亦即字符串变量是为一个常量，可以使用单引号（’），也可以使用双引号（”）定义字符串变量，但必须匹配，如果需要混用，建议加上转义字符（\）
使用toString()函数将一个值转换为字符串，数值则可以使用基数值进行转换
例：
var num = 10; num.toString(“2”); //”1010” num.toString(“8”); //”12”
也可以使用String()进行强制转换
Object类型
constructor：构造函数
hasOwnProperty(propertyName)：检查给定的属性在当前对象中是否存在
isPrototypeOf(object)：检查传入的对象是否是传入对象的原型
propertyIsEnumerable(propertyName)：检查给定的属性是否能够使用for-in语句来枚举，与hasOwnProperty一样，给定的属性名必须以字符串的形式指定
toLocalString()：返回对象的字符串表示，与执行环境的地区对应
toString()：返回对象的字符串表示
valueOf()：返回对象的字符串、数值或布尔值表示。通常与toString返回相同
操作符
按位非：~，按位与：&，按位或：|，按位异或：^，左移：<<，有符号右移：>>（以符号位填充），无符号右移：>>>（以零填充），逻辑非：!，逻辑与：&&，逻辑或：||
关系操作符：<，>，<=，>=
相等和不相等：==，!=，先转换再比较
全等和不全等：===，!==，只比较，不转换，类型不同则不同
条件操作符：? :，三目运算符
逗号操作符：（,），返回最后一个表达式的值：var num = (3,5,6,2)，num = 2
语句
if{}，do{}while();，while(){}，for(;;){}
for-in语句：
精准的迭代语句，可以用来枚举对象的属性
for(property in expression) statement
例：
for(var propName in window){ document.write(propName); }
注：当对象的变量值为null或者为undefined时，for-in会发生错误，虽然ECMAScript5更改了这一错误，不过，为了最大限度的保证兼容性，在使用for-in循环之前，先检测该对象的值不是null或者undefined
label语句：标签语句
start:for(var I = 0;i<count;i++){ statement }
这个start标签可以在之后的break和continue语句中使用，标签语句一般与循环语句一起使用
with语句：
将代码的作用域设置到一个特定的对象中
with(expression) statement;
严格模式下不允许使用with语句，否则将被视为语法错误
大量使用with语句会导致性能下降以及代码调试困难，建议大型应用程序的开发不使用with语句
switch语句
switch(expression){ case selection:statement; break; …… default:statement; break; }
函数
严格模式对函数限制：
函数不能命名为eval和arguments
参数不能命名为eval和arguments
不能出现两个命名参数同名的情况
理解函数参数
js中的函数并不介意传进来多少个函数参数，即使与定义的情况不同，因为在函数接收到的永远都是一个类似数组形式的参数，函数并不关心数组包含的参数。可以在函数体内通过arguments对象来访问这个参数数组。
arguments只是与数组类似，因为可以使用方括号来访问它的元素，使用length来确定传进来的参数个数。arguments中的参数顺序与传进来的参数顺序一致，并且是同步改变的。
注：没有传递值的命名参数，将会被赋值为undefined值。
严格模式对arguments对象作出了一些限制：在函数中对arguments进行赋值将会变得无效，重写arguments值将会导致语法错误
使用arguments对参数的类型和数量进行判断，可以模仿重载
第4章，变量、作用域和内存问题
注：js中所有函数的参数都是按值传递的
检测类型：instanceof
instanceof操作符，只能操作引用类型，即对象，对基本数据类型的测试始终返回true，因为基本数据类型不是对象
result = variable instanceof constructor
若变量是给定的引用类型，则返回true
例：
person instanceof Object; //person是Object类型吗？ color instanceof Array; //color是Array类型吗？
没有块级作用域
if(true){ var j = “blue”; } alert(j); //将会得到输出blue
如果在C/C++中将会出现错误，而js并不会出现错误，在块里面定义的变量将会添加到当前的花括号之外的作用域中。
垃圾收集
标记清除
引用计数
第5章，引用类型
Object类型
两种创建实例方式：
一、使用new操作符后跟Object构造函数
var obj = new Object(); obj.name = “name”; obj.age = 23;
二、使用对象字面量（通过对象字面量定义对象时，实际上并不会调用Object构造函数）
var obj = { name : “name”; age : 23 }
可以使用点表示法和方括号表示法访问对象的属性
点表示法： 方括号表示法：（必须以字符串的形式表示要访问的属性名）
obj.name obj[“name”]
注：当属性名包含会导致语法错误的字符，或属性名使用的是关键字或保留字时，可以使用方括号表示法，还可以通过变量访问属性
建议：除非必须使用变量访问属性，否则最好使用点表示法
Array类型
创建方式：
一、使用Array构造函数
var arr = new Array(); //创建一个空数组 var arr = new Array(20); //创建一个包含20个项的数组 var arr = new Array(“one”,”two”,”three”); //创建包含one，two，three三项的数组
还可以将new操作符省略
二、使用数组字面量表示法
var color = [“red”,”blue”]; //创建包含两个项的数组 var color = [“yellow”,”green”,]; //不要这样创建数组，浏览器的解析不同，结果会不同
注：使用数组字面量创建数组时，也不会调用Array构造函数
arr.length，将会返回数组的项数，即将返回数组的大小
对arr.length进行赋值，将会动态改表数组大小，赋值大于原数组大小将扩大数组，新增项获得undefined的值，小于原数组大小，将保留前面的数值，多的数值将被移除
数组检测：
对于只有一个全局作用域而言，instanceof可以很方便的检测某个变量是否是数组，但对于多个框架的网页而言，则存在多个不同的版本的Array构造函数，instanceof将不能够满足要求，为此引入Array.isArray(value)方法，这个方法可以最终确定某个值是否是数组，而不管是哪个框架构造的。支持的浏览器为：IE9+，Firefox4+，Safari5+，Opera10.5+，chrome。
转换方法：
调用数组的toString()方法，将会返回由数组中每个值的字符串形式拼接而成的以逗号分隔的字符串，valueOf()方法返回的还是数组，与toString()是一样的结果
toLocaleString()返回的通常与toString()和valueOf()返回结果是一样的，但并不总是如此，使用toLocaleString()方法，则会去调用数组中每一项的toLocaleString()方法，而不是toString()方法。
join方法
join方法接受一个参数，即作为分隔符的字符串
例：
var arr = [“one”,”two”]; arr.join(“|”); //one|two
如果不给join传递参数，则返回以逗号作为分隔的字符串
注：如果数组中某一项的值为null或者undefined，则调用join，toLocaleString()，toString()，valueOf()返回的结果则使用空字符串表示
数组的栈方法
var arr = new Array();
arr.push()，在数组末尾添加数据，可以传入多个参数，并返回修改后的数组长度
arr.pop()，从数组末尾移除最后一个数据，减少数组的length值，并返回该项的值
数组的队列方法
var arr = new array();
arr.shift()，移除数组的第一项，减少数组的length值，并返回该项的值
arr.unshift()，在数组的前端添加任意个项，并返回修改后的数组长度
使用shift和push结合，可以模拟队列操作
使用unshift和pop结合，可以从相反方向模拟队列
重排序方法：
var arr = new Array();
arr.reverse()，翻转数组的项，即首尾顺序调转
arr.sort()，默认情况下升序排列，注：排列顺序是数组值转换成字符串之后的升序排列，通常不是所需要的排序
sort方法可以接受一个比较函数作为参数，实现所需的排序方法，方法返回负数则按升序排列，返回整数则按降序排列，注：可以适应大多数排序情况
操作方法：
var arr = new Array();
arr.concat()，进行数组连接，并返回连接后的数组，可传入多个参数
arr.slice()，可以基于当前数组中的一个或多个值创建一个新数组返回，接受一个或两个参数，即返回原数组的起始位置和结束位置之间的所有项，不包含结束位置的项，只有一个参数则返回从该参数指定位置到末尾的所有项。
注：如果参数是负数，则会将数组的长度加上这个负数得到的结果来确定位置。结束位置小于起始位置则返回空
splice()方法：
删除：指定两个参数，要删除的起始位置和要删除的项数，例：splice(0,2);
插入：指定三个参数，起始位置，要删除的项数（0），要插入的项，插入的项可以是多个项
例：splice(2,0,”red”,”green”); //从位置2插入red，green
替换：与插入相同，第二个参数有变化，起始位置，要删除的项数，要插入的项，插入的项数可以是多个项
位置方法：
indexOf()，lastIndexOf()，都接收两个参数，要查找的项和查找起点位置索引indexOf从数组头开始查找，lastIndexOf从数组末尾开始查找。若没有找到则返回-1.
注：查找时进行的比较使用的是全等操作符，就像使用“===”一样
迭代方法：
ECMAScript5定义了5个迭代方法，全部接收两个参数：每一项上运行的函数，运行该函数的作用域对象—影响this的值。函数则接收三个参数：数组项的值，该项在数组中的位置，和数组对象本身
var arr = new Array();
every()，对数组中每一项运行给定函数，每一项都返回true，则返回true
filter()，对数组每一项运行给定函数，返回该执行函数返回true的项组成的数组
例：
var num = [1,2,3,4,5,4,3,2,1]; var filter = num.filter(function(item,index,array){ return item > 2; }); //[3,4,5,4,3]
forEach()，对数组中每一项运行给定函数，没有返回值，本质上与for循环迭代数组一致
map()，对数组中每一项运行给定函数，返回每次函数调用的结果组成的结果
some()，对数组中每一项运行给定函数，只要任一项的函数结果是true，则返回true
注：以上所有函数并不会对数组进行修改
例：
var num = [1,2,3,4,5,4,3,2,1]; var mapResult = num.map(function(item,index,array(){ return item * 2; }); //以上代码返回数组每一项都乘2以后的数组
归并方法：
reduce()和reduceRight()
两个函数都会迭代数组的所有项，然后构建一个最终返回的值，其中reduce从数组第一项开始，reduceRight从数组最后一项开始
这两个方法都接收2个参数：一个在每一项上都调用的函数和（可选的）作为归并基础的初始值。传递的函数需要接收4个参数：前一个值，当前值，项的索引和数组对象。这个函数的返回值会作为第一个参数传递给下一项，第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项。
例：
var value = [1,2,3,4,5]; var sum = value.reduce(function(prev,cur,index,array){ return prev + cur; }); //sum = 15 //第一次执行回调函数，prev = 1,cur = 2,第二次，prev = 3（第一次函数返回结果1+2），cur = 3（当前数组项）。这个过程会把数组每一项都访问一遍。reduceRight除了方向不一样，其他都一样。
Date类型
Date类型使用自UTC1970.1.1午夜零时开始经过的毫秒数来保存日期，可以将日期精确到1970.1.1之前或之后100 000 000（一亿）年。
使用Date构造函数而不传参数，新对象会获得当前日期和时间，要创建特定日期时间，必须传入表示该日期的毫秒数，ECMAScript提供了两个方法Date.parse和Date.UTC方法来简化操作。
Date.parse方法接收一个表示日期的字符串参数。这个方法因实现而异，而且通常因地区而异。美国地区的浏览器支持以下格式：
月/日/年，如6/13/2004
英文月名 日，年，如January 12,2004
英文名星期几 英文月名 日 年 时：分：秒 时区，如Tue May 25 2004 00:00:00 GMT-0700
ISO 8601扩展格式YYYY-MM-DDTHH:mm:ss.sssZ，如2004-05-25T00:00:00，只有支持js5的实现支持这种格式
Date.UTC也同样返回表示日期毫秒数，参数分别为：年份、基于0的月份（一月份是0）、月中哪一天（1-31）、小时数（0-23）、分钟、秒及毫秒数，其中只有前两个参数是必须的。
例：
var someDate = new Date(Date.UTC(2000,0)); //2000年1月1日0时0分0秒 var someDate = new Date(Date.UTC (2000,0,1,15,23,23)); //2000年1月1日15时23分23秒
Date构造函数会模仿Date.parse和Date.UTC函数。
Date.now方法返回调用这个函数时的日期和时间毫秒数。在不支持的浏览器上面，可以使用+操作符获取Date对象时间戳
var start = +new Date();
var stop = +new Date();
日期格式化方法
toDateString—以特定于实现的格式显示星期几、月、日、年
toTimeString—以特定于实现的格式显示时、分、秒和时区
toLocaleDateString—以特定于地区的格式显示星期几、月、日、年
toLocaleTimeString—以特定于实现的格式显示时、分、秒
toUTCString—以特定于实现的格式完整的UTC时间
与toLocaleString和toString一样，以上方法没有一个能够用来在用户界面中显示一致的日期信息。
RegExp类型，正则
语法：类似于Perl语法
var expression = / pattern /flags;
模式（pattern）部分可以是简单或复杂的正则表达式，每个表达式可以使用一个或多个标识符，支持以下3个标识符
g:全局模式，将被应用于所有字符串，而不是在匹配到第一个字符串后就停止，
i:表示不区分大小写，
m:表示多行模式，即达到一行文本末尾时，会继续查找下一行
注：模式中所有元字符都需要转义
元字符：( [ { \ ^ $ | } ? * + . ] )
以上方法是以字面量模式创建正则表达式
使用RegExp构造正则表达式
var partten = new RegExp(“bat”,”I”);
注：使用RegExp构造函数，所有元字符必须双重转义
例：/\[bc\]at/ ===> “\\[bc\\]at”
RegExp实例属性
global：布尔值，表示是否设置了g标志
ignoreCase：布尔值，表示是否设置了i标志
lastIndex：整数，表示开始搜索的下一个匹配项的字符位置，从0算起
multiline：布尔值，表示是否设置了m标志
source：正则表达式的字符串表示，按照字面量形式，而非传入构造函数中的字符串模式返回
RegExp对象的主要方法是exec()，exec()接收一个参数，即要应用模式的字符串，返回一个匹配项（即使设置了g标志），有没有设置g标志的差别在于，没有设置则总是返回同一个结果，设置了则返回下一个匹配
test方法，接收一个字符串，只返回是否匹配，不返回结果
Function类型
函数是对象，函数名是指针
定义方法：
//函数声明的形式 function sum(num1,num2){ return num1 + num2; } //函数表达式的形式 var sum = function(num1,num2){ return num2 + num2; } var sum = new Function(“num2”,”num2”,”return num1 + num2”); //不建议，性能渣，但能更好的理解函数是对象的思想。
function add(num){ return num + 100; } function add(num1,num2){ return num + 200; } //实际如同下面的代码 function add(num){ return num + 100; } add = function(num){ return num + 200; }
所以函数没有重载。
函数内部属性
函数内部有两个特殊对象，arguments和this
arguments有一个属性callee，指向拥有这个arguments的函数
定义递归函数时，最好使用arguments.callee()来代替函数名，降低耦合，减少问题的出现
例：
function factorial(num){ if(num<1) return 1; else return num * factorial(num – 1); } function factorial(num){ if(num<1) return 1; else return num * arguments.callee(num – 1); }
this对象
函数的this对象引用的是函数据以执行的环境对象
ECMAScript5规范定义了另一个函数对象的属性：caller，保存着调用当前函数的函数的引用
函数包含了两个属性：length（希望接收的函数个数）和prototype，prototype不可枚举，所以for-in无法发现他。prototype是所有引用类型保存其所有实例方法的真正所在
包含两个非继承而来的方法：apply和call
apply方法接收两个参数：一个是在其中运行函数的作用域，也就是this对象，一个是参数数组，可以是Array实例，也可以是arguments对象
call与apply基本相同，区别在于，使用call函数，参数必须逐个列举出来
传递参数并非apply和call真正用武之地，真正强大的地方在于能够扩充函数的作用域
例：
window.color = “red”; var o = {color:”blue”}; function sayColor(){ alert(this.color); } sayColor(); //red sayColor.call(this); //red sayColor.call(window); //red sayColor.call(o); //blue
不需要再将sayColor函数放到o对象中，就可以使o对象能够使用sayColor函数
ECMAScript5还定义了另一个方法：bind，这个方法会创建一个函数实例，其this值会被绑定到传给bind函数的值
window.color = “red”; var o = {color:”blue”}; function sayColor(){ alert(this.color); } var objSayColor = sayColor.bind(o); objSayColor(); //blue
toLocaleString和toString始终返回函数代码，但由于浏览器差异，并没有办法根据返回结果实现任何重要功能，valueOf也只返回函数代码
基本包装类型
Boolean、Number、String
对基本包装类型的实例调用typeof会返回object，而且所有的基本包装类型的实例都会返回true，
Object构造函数也会像工厂方法一样，根据传入的值的类型返回响应的基本包装类型的实例
例：
var obj = new Object(“some text”); alert(obj instanceof String); //true
使用new调用基本包装类型和直接使用同名的转型函数是不一样的。例：
var value = “25”; var num = Number(value); //转型函数 alert(typeof num); //”number” var obj = new Number(value); //构造函数 alert(typeof obj); //”object”
Number类型
另外提供的方法
toFixed();接收一个参数，表示要以几位小数表示当前值，当前小数位过长则四舍五入，此方法可以表示带有0到20个小数位的数值，这只是标准实现范围
toExponential();接收一个参数，返回指数形式表示，参数指定返回的结果中的小数位数
toPrecision();接收一个参数，表示所有数字的位数，不包括指数部分
string类型
var str = “hello world”; str.charAt(1); //”e”，返回字符 str.charCodeAt(1); //”101”，返回字符编码 str.concat();//连接字符串，可以接收任意个字符串
slice(),substring(),substr(),都接收一或两个参数，接收的第一个参数均代表起始位置，slice(),substring()接收的第二个参数表示终止位置，substr()的第二个参数表示返回的字符个数，若不给第二个参数，则返回从起始位置到字符串结束位置的字符
带入负数表现不同：slice会将所有带入的负数与字符串长度相加，substr会将第一参数加上字符串长度，第二个参数转换为0，substring()将所有负值转为0
indexOf，lastIndexOf方法都返回子字符串的位置，indexOf从头查找，lastIndexOf从末尾查找，没有找到返回-1，两个方法都可以接收第二个可选参数，表示字符从哪里开始搜索
trim()，返回源字符串删除前后缀所有空格的结果
toLowerCase，toLocaleLowerCase，toUpperCase，toLocaleUpperCase，带有Locale的方法是针对特定地区的实现。通常而言是没有什么差别，但少数语言会为Unicode大小写转换应用特殊规则，这就必须使用针对特定地区的实现
match(),search()这两个方法均接收一个参数，字符串或者RegExp对象指定的一个正则表达式
replace()方法，接收两个参数，第一个参数可以是一个RegExp对象或字符串（不会被转换成正则表达式），第二个参数可以是一个字符串或函数，若要替换所有字符串，则必须使用正则表达式，并加全局（g）标志
split()，接收一个参数作为字符串的分隔符，返回由分隔符分隔得到的数组，可以接收第二个可选参数，作为返回结果的数组大小
localeCompare()，比较两个字符串，关于是否区分大小写，视地区而定
1、源字符串应排在参数字符串之前，返回负数（具体视情况而定，通常为-1）
2、源字符串与参数字符串相同，返回0
3、源字符串排在参数字符串之后，返回整数（具体视情况而定，通常为1）
fromCharCode()，接收一个或多个字符编码，转换成字符串，与charCodeAt()执行的是相反操作
URI（通用资源标识符）
方法：encodeURI，encodeURIComponent，decodeURI，decodeURIComponent，编码和解码，解码方法只能识别各自对应的编码方法
eval()，将带入的字符串参数，转换成可执行语句，并插入到当前位置
eval创建的任何变量和函数都不会被提升，严格模式下，外部无法访问eval创建的变量和函数
注：尽量不使用eval方法，仅属于个人意见
Math对象
min(),max(),ceil()向上舍入，floor()向下舍入，round()标准舍入，即四舍五入，random()返回大于等于0小于1的随机数
以上是关于JavaScript高级程序设计（第三版）学习笔记1~5章的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript高级程序设计（第三版）学习笔记202123章
JavaScript高级程序设计（第三版）学习笔记8910章