JavaScript高階程式設計（第三版）學習筆記1~5章_javascript技巧

Chapter 2, Using JavaScript in html

Html introduces external js script

<script type="text/javascript" src="test.js">两个</script>之间不应放脚本，因为并不会被执行</script>

The

3f1c4e4b6b16bbbd69b2ee476dc4f83a tag has a defer attribute that can delay script execution, but it does not guarantee that it will be executed in the order in which the script is arranged

Suggestion: Place the script introduction after all the content of the 6c04bd5ca3fcae76e30b72ad730ca86d tag instead of in the 93f0f5c25f18dab9d176bd4f6de5d30e tag to speed up the page response

The content in the

2b0b25ff593c5b6c03403dd6234ffb2cf920f363442462683100636cb2662870 tag will be output when the browser does not support scripts or scripts are disabled. Browsers that enable scripts will not see the

in the tag.

Content

Chapter 3, Basic Concepts

Identifier

The first character must be a letter, underscore (_) or dollar sign ($). Valid names are
composed of letters, numbers, underscores and dollar signs.

Adopt camel case naming: the first letter is lowercase, and the first letter of each subsequent word is capitalized

Single line comment:

//This is a single line comment

Multi-line comments:

/*This is
Multiple lines
Comment
*/

typeof operator

typeof – Determine the data type of a given variable

Return:

“undefined” – undefined data type

“boolean” – Boolean value

"string" – String

“number” – numerical value

“object” – object or NULL

“function” – function

Note: Functions are objects in js, not data types, so it is necessary to use typeof to distinguish functions and objects

Typeof sometimes returns confusing but technically correct values, for example, null and object, both of which return "object"

Null and undefined are equal, null == undefined will return true

When performing arithmetic calculations, all octal and hexadecimal numbers will be converted to decimal

Infinity is infinity, including positive and negative infinity. You can use isFinite() to determine whether it is infinite

Number.MAX_VALUE and Number.MIN_VALUE respectively store the maximum and minimum values ​​of numeric types

Number.NEGATIVE_INFINITY and Number.POSITIVE_INFINITY store negative and positive infinity respectively

NaN is not a numeric value. You can use isNaN to determine whether a variable is not a numeric value

Numeric conversion

Force conversion to Number(), but the result is unreasonable. It is recommended to use the parseInt() function and bring in the base to be converted

Example:

parseInt(“10”,2); //以二进制解析
parseInt(“10”,8); //以八进制解析

Not bringing in the base means letting parseInt decide how to parse the string, which will cause errors at some point

parseFloat() is basically the same as parseInt(), parsing the string into a floating point number, always ignoring leading zeros, only parsing decimal values, hexadecimal will be parsed to 0, so

It has no second parameter

String type

String type variables are immutable, that is, a string variable is a constant. You can use single quotes (') or double quotes (") to define string variables, but they must match. If you need to mix them, It is recommended to add the escape character ()

Use the toString() function to convert a value to a string. Numeric values ​​can be converted using base values

Example:

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返回相同

操作符

按位非：~，按位与：&，按位或：|，按位异或：^，左移：868d74464fbfc82f1286fcaa1c775123>（以符号位填充），无符号右移：>>>（以零填充），逻辑非：!，逻辑与：&&，逻辑或：||

关系操作符：bff82425ba327b991a066901888e460e，496e850c10959de588f4dd05d6fbb478=

相等和不相等：==，!=，先转换再比较

全等和不全等：===，!==，只比较，不转换，类型不同则不同

条件操作符：? :，三目运算符

逗号操作符：（,），返回最后一个表达式的值：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()的第二个参数表示返回的字符个数，若不给第二个参数，则返回从起始位置到字符串结束位置的字符

Bringing in negative numbers behaves differently: slice will add all the negative numbers brought in to the string length, substr will add the string length to the first parameter, and convert the second parameter to 0, and substring() will add all negative numbers to the string length. The value is converted to 0

The indexOf and lastIndexOf methods both return the position of the substring. indexOf searches from the beginning and lastIndexOf searches from the end. If not found, it returns -1. Both methods can receive a second optional parameter, indicating where to start searching for characters

trim(), returns the result of the source string removing all spaces before and after the prefix

toLowerCase, toLocaleLowerCase, toUpperCase, toLocaleUpperCase, methods with Locale are implementations for specific regions. Generally there is no difference, but a few languages ​​apply special rules for Unicode case conversion, which necessitates the use of locale-specific implementations

Both methods match() and search() receive a parameter, a string or a regular expression specified by the RegExp object

replace() method receives two parameters. The first parameter can be a RegExp object or string (will not be converted into a regular expression). The second parameter can be a string or a function. If you want To replace all strings, you must use regular expressions and add the global (g) flag

split(), receives a parameter as the separator of the string, returns an array separated by the separator, and can receive a second optional parameter as the array size of the returned result

localeCompare(), compares two strings, whether it is case-sensitive or not depends on the region

1. The source string should be ranked before the parameter string, and a negative number will be returned (depending on the situation, usually -1)

2. The source string is the same as the parameter string, and 0 is returned

3. The source string is ranked after the parameter string, and an integer is returned (depending on the situation, usually 1)

fromCharCode(), receives one or more character codes and converts them into strings. It performs the opposite operation to charCodeAt()

URI (Universal Resource Identifier) ​​

Methods: encodeURI, encodeURIComponent, decodeURI, decodeURIComponent, encoding and decoding, the decoding method can only identify the corresponding encoding method

eval(), converts the string parameters brought in into executable statements and inserts them into the current position

Any variables and functions created by eval will not be promoted. In strict mode, variables and functions created by eval cannot be accessed from the outside

Note: Try not to use the eval method, this is just a personal opinion

Math object

min(), max(), ceil() round up, floor() round down, round() standard rounding, that is, rounding, random() returns a random number greater than or equal to 0 and less than 1

The above are chapters 1~5 of the JavaScript Advanced Programming (Third Edition) study notes introduced by the editor. I hope it will be helpful to you!