JavaScript高级程序设计(第5章引用类型)_高级程序语言设计《引用》-CSDN博客

本文链接：https://blog.csdn.net/einafetsslly/article/details/78042446

第5章引用类型

引用类型的值（对象）是引用类型的一个实例。

引用类型（也被称为对象定义）是一种数据结构，用于将数据和功能组织在一起。

新对象是使用new操作符后跟一个构造函数来创建的。

var person = new Object();

5.1 Page 83 Object 类型（对象类型）

创建Object实例的方式有两种。

方法一：使用new操作符

var person = new Object(); //等同于var person = {}; 花括号中为空

person.name = "Nicholas";

person.age = 29;

方法二：使用对象字面量,属性名外可加可不加引号，5会自动转换为字符串

var person = {

name:"Nicholas",

age: 29,

5：true；

}

扩展：

表达式上下文（expression context）：指该上下文期待一个值（表达式），上面的例子中的蓝色的部分就是。

语句上下文（statement context）：指语句块前后的部分，比如if语句中的两个花括号就是语句上下文的一部分。

对象字面量方法也适用于向函数传参。

实例：

function displayInfo(args){

...

}

displayInfo({

name:"Nicholas",

age: 29;

})

5.1.1 Page 68 动态的属性

访问对象属性的方法：

1、点表示法：对象.属性

2、方括号表示法：对象["属性"]

方括号表示法可以通过变量来访问属性，如：

var propertyName = "name";

alert(person[propertyName]);

方括号表示法中的属性能包含空格，非字母非数字。

5.2 Page 86 Array类型（数组）

数组是数据的有序列表，数组的每一项可以保存任何类型的数据，做多可以包含4294967295项。

数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。

创建数组的基本方式有两种。

（1）使用Array构造函数

var colors = new Array(数组长度); //其中数组长度可填可不填，new操作符也可以省略

var colors = new Array(3); //表示数组长度为3

var colors = new Array（“Greg”）; //数组里有一项，内容为字符串Greg

（2）使用数组字面量表示法

var colors = ["red","blue","green"]; //方括号里也可以不填内容，即为空数组

在读取和设置数组值时，要使用方括号并提供相应值的基于0的数字索引:

数组名[索引号（从0开始）];

实例：

alert(colors[0]);

colors[2] = "blue";

如果索引超过数组项数，则会自动增加数组长度。比如：

colors[3] = "black";

数组colors就会增加一项black

通过设置数组的长度（length值），可以改变数组的长度。

5.2.1 Page 88 检测数组

（1）对于一个网页或者一个全局作用域，可以使用instanceof方法检测是否是数组类型：

语法：对象 instanceof Array

（2）对于网页含多个框架，存在2个及以上全局作用域的情况，可以使用Array.isArray()方法：

语法：Array.isArray(对象)

5.2.2 Page 89 转换方法

（1）toLocaleString()、toString()、valueOf()三种方法：都会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。

实例：

var colors = ["red","blue","green"];

alert(colors.valueOf()); //red,blue,green

（2）join()方法：可以使用不同的分隔符来构建这个字符串

语法：数组名.join("分隔符"); //参数为空或者undefined时，默认用逗号作分隔符

实例：

var colors = ["red","blue","green"];

alert(colors.join("||")); //red||blue||green

5.2.3 Page 90 栈方法

栈是一种LIFO(Last-In-First-Out，后进先出)的组数结构，也就是最新添加的项最早被移除。

栈中，项的插入（叫做推入）和移除（叫做弹出），只发生在一个位置——栈的顶部。

ECMAScript为数组专门提供了push()和pop()方法，以便实现类似栈的行为。

（1）push()：可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度值；

（2）pop()：从数组末尾移除最后一项，减少数组的length值，返回移除的项。

实例：

var colors = [];

var num = colors.push("red","blue");

alert(num); //2

var add = colors.pop();

alert(add); //red

5.2.4 Page 91 队列方法

队列数组结构的访问规则是FIFO(First-In-First-Out,先进先出)。

队列在数组列表的末端添加项，从前端移除项。

（1）shift()：能移除数组中的第一项并返回该项，同时数组长度减1；

（2）unshift()：在数组前端添加任意个项并返回新数组的长度；

实例：

var colors = ["red","blue"];

alert(colors.shift()); //red

var num = colors.unshift("black","white");

alert(num); //black,white,blue

5.2.5 Page 92 重排序方法

（1）reverse()：反转数组项的顺序

（2）sort()：默认是升序排列数组，会先调用每一项的toString()方法后排序，即便每一项都是数值。

但sort()方法也接收一个比较函数作为排序参数。

实例（升序）：

fucntion compare (value1, value2) {

if (value1 < value2) {

return -1;

} else if (value1 > value2) {

return 1;

} else {

return 0;

}

var values = [0, 1, 10, 5, 3];

values.sort(compare);

alert (values); //0,1,3,5,10

如果要降序排列，把-1和1的值对换即可。

减法操作：对于数值类型或者其valueOf()方法会返回数值类型的对象类型，可以使用一个更简单的比较函数。

function compare(value1,value2){

return value2-value1;

}

5.2.6 Page 94 操作方法

（1）concat()：将数组与值或者数组拼接起来,并返回新数组

实例：

var colors1 = ["red", "blue", "green"];

var colors2 = colors1.concat("yellow", ["black", "white"]);

（2）slice()：从当前数组中抽取部分项，返回新数组，可接收两个参数（起始位置和结束位置的索引号，但不包含结束位置的项），如果只有一个参数，则默认抽取从起始位置开启的所有项。

实例：

var colors2 = ["red", "blue", "green", "yellow", "black", "white"];

var colors3 = colors2.slice(2,4);

return colors3; //green,yellow

如参数为负数，则需要加上数组长度后计算；如结束为止的参数小于起始位置的参数则返回空数组。

（3）splice()：向数组的中部插入项，并返回被删除的项，如果没有删除则返回空数组

①删除：splice(起始位置，要删除的项数)

②插入：splice(起始位置，0，要插入的项)，如：colors2.splice(2,0,"grey","pink");

③替换：splice(起始位置，要删除的项数，要插入的项）

5.2.7 Page 95 位置方法

以下两个方法可以用来查找数组中的项，接收两个参数，第二个参数是可选的，使用全等操作符查找。

（1）indexOf(查找项，起始位置)：向后找

（2）lastIndexOf(查找项，起始位置)：向前找

5.2.8 Page 96 迭代方法

ECMAScript为数组定义了5个迭代（遍历）方法。他们都接收两个参数：要在每一项上运行的函数和（可选的）运行该函数的作用域对象。该函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身。

（1）every()：每一项都为true，则返回true；

（2）filter()：返回该函数会返回true的项组成的数组；

（3）forEach()：只是运行该函数，但没有返回值；

（4）map()：返回每次运行函数后的结果组成的数组；

（5）some()：有任意一项为true，则返回true。

实例：

var numbers = [1, 2, 3, 4, 5];

var everyResult = numbers.every(function(item,index,array){

return (item>2);

});

alert(everyResult); //false

5.2.9 Page 97 归并方法

两个归并方法，reduce()和reduceRight()，都会遍历数组中所有的项，然后构建一个最终返回的值。reduce()从数组的第一项开始，reduceRight()从数组的最后一项开始。

接收两个参数：运行在每一项上函数、（可选的）作为归并基础的初始值。该函数接收四个参数：前一个值（从数组的第一项开始）、当前值（从数组的第二项开始）、项的索引和数组对象。

实例：

var values = [1,2,3,4,5];

var sum = values.reduce(function(prev, cur, index, array){

return prev + cur ;

});

alert(sum); //15

5.3 Page 98 Date类型（日期）

Date类型使用自UTC（Coordinated Universal Time，国际协调时间）1970年1月1日午夜（零时）开始经过的毫秒数来保存日期。

创建日期对象使用new操作符和Date构造函数：

var 日期对象名=new Date();

当不传递参数时，自动获取当前的日期和时间。

（1）Date.parse()方法，返回表示日期的毫秒数

var someDate = new Date(Date.parse("January 25, 2017")); 等价于 var someDate = new Date("January 25, 2017");

日期格式有好几种，如：月/日/年、英文月名日,年 ......

如果传入的字符串不能表示日期，会返回NaN。

（2）Date.UTC()方法，返回表示日期的毫秒数

参数分别是：年份、基于0的月份（一月是0，二月是1，以此类推）、日（1~31）、小时（0~23）、分、秒、毫秒，其中只有年和月是必须的。

（3）Date.now()方法，返回表示调用这个方法时的日期和时间的毫秒数。

语法： var start = Date.now();

5.3.1 Page 100 继承的方法（略）

5.3.2 Page 101 日期格式化方法

toUTCString()：以特定于实现的格式完整的UTC日期

5.3.3 Page 102 日期/时间组件方法

常用的：

实例：

var d = new Date();

document.write(d.getDate());

5.4 Page 103 RegExp类型（regular expression）

ECMAScript通过RegExp类型来支持正则表达式，RegExp对象用于规定在文本中检索的内容。

创建正则表达式的语法：

1、字面量形式定义：var 变量名 = /正则表达式主体/修饰符（可选）; // var expression = /pattern/flags；（pattern：模式；flags：标志）

2、使用RegExp构造函数：var 变量名 = new RegExp("正则表达式主体","修饰符");

flags标志，是可选的，同时也是多选的，有以下3个标志：

（1）g：表示全局（global）搜索模式

（2）i：表示不区分大小写模式（case-insensitive）

（3）m：表示多行（multiline）模式

实例1：

匹配所有以“at”结尾的3个字符的组合，不区分大小写

var pattern1 = /.at/gi;

模式（即正则表达式主体）中使用的所有元字符都必须转义（用“\元字符”格式转义），正则表达式中的元字符包括：

( [ { \ ^ $ | ) ? * + . ] }

实例2：

匹配所有“.at”，不区分大小写：

var pattern1 = new RegExp("\\.at","gi");

等价于：

var pattern1 = /\.at/gi;

注意：在使用RegExp构造函数时，对元字符需要进行双重转义，即使用“\\元字符”格式。

5.4.1 Page 105 RegExp实例属性

每个RegExp实例都有以下属性（不过用处不大）：

1、global：布尔值，表示是否设置了g标志

2、ignoreCase：布尔值，表示是否设置了i标志

3、lastIndex：整数，表示开始搜索下一个匹配项的字符位置，从0算起

4、multiline：布尔值，表示是否设置了m标志

5、source：正则表达式的字符串表示，按照字面量形式返回

5.4.2 Page 106 RegExp实例方法

RegExp对象的方法有3个：test()、exec() 以及 compile()

1、test()：检索字符串中的指定值，返回true或false。

var patt1 = new RegExp("e");

document.write(patt1.test("The best things in life are free.")); //true

2、exec()：检索字符串中的指定值，返回找到的值，如果没找到则返回null

var patt1 = new RegExp("e","g");

document.write(patt1.exec("The best things in life are free.")); //eeeeee

3、compile()：可以改变检索模式，也可以添加或删除第二个参数

var patt1 = new RegExp("e");

document.write(patt1.test("The best things in life are free."));

patt1.compile("d","i");

document.write(patt1.test("The best things in life are free.")); //truefalse

5.4.3 Page 107 RegExp构造函数属性（略）

5.4.5 Page 109 模式的局限性（略）

5.5 Page 110 Function 类型

每个函数都是function类型的实例，且与其他引用类型一样具有属性和方法。

函数名实际上是一个指向函数对象的指针，不会与某个函数绑定。（函数是对象，函数名是指针）

函数的定义方法（主要推荐以下两种）：

（1）函数声明法：

function sum (sum1,sum2) {

return num1 + num2;

}

（2）函数表达式法：

var sum = function (sum1,sum2){

return sum1 + sum2;

}; //特别注意：花括号尾有个分号

实例：

<script>
	function sum(num1,num2){
	return num1+num2;
        }
	alert(sum(10,10));             //20
			
	var anotherSum = sum;
	alert(anotherSum(10,10));                   //20
			
	sum = null;
	alert(anotherSum(10,10));      //20
</script>

使用不带圆括号的函数名实际是访问函数的指针，并不是调用函数，因此当设置sum = null时，实际是设置了sum这个函数的指针为空，但是anotherSum函数的指针复制了sum函数的指针后事独立于sum函数的指针的。

5.5.1 Page 111 没有重载（深入理解）

同名函数，后面的会覆盖前面的函数。

实例：

function addSomeNumber(num){
    return num + 100;
}
function addSomeNumber(num){
    return num + 200;
}
var result = addSomeNumber(100);       //300

5.5.2 Page 111 函数声明与函数表达式

函数声明：可以放在调用它的代码后，因解析器会通过一个名为函数声明提升（function declaration hoisting）的过程；

函数表达式：必须等到解析器执行到它所在的代码行，才会真正被解析执行，所以必须放在调用它的代码前。

不过也可以同时使用函数声明和函数表达式，例如var sum = function sum(){}。不过，这种语法在Safiri中会导致错误。

5.5.3 Page 112 作为值的函数

因为ECMAScript中的函数名本身就是变量，所以函数也可以作为值来使用。

实例：

function getGreeting (name){
return "Hello," + name;
}
var b = callSomeFunction(getGreeting,"Aubrey");
alert(b);            //"Hello, Aubrey"

上面的callSomeFunction函数的参数二“Aubrey”会被传递给getGreeting函数作为参数。

5.5.4 Page 113 函数内部属性

在函数内部，有两个特殊的对象：arguments和this。

1、arguments

arguments是一个类数组对象，包含着传入函数中的所有参数。

它有一个名叫callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。

实例：

function factorial ( num ) {
    if (num <=1) {
        return 1;
    } else {
        return num * arguments.callee(num-1);                        //arguments.callee = 函数名factorial
}

2、this

this引用的是函数执行的环境对象----或者也可以说是this值（当在网页的全局作用域中调用函数时，this独享引用的就是window）；

this指的是当前调用方法（函数）的对象，即是谁调用了函数（方法）；

一个匿名函数里含有一个包含this的函数，此this指window。

实例：

window.color = "red";
var o = { color:"blue"};
function sayColor(){
    alert(this.color); 
}
sayColor();        //red
o.sayColor = sayColor;
o.sayColor();     //blue

5.5.5 Page 116 函数属性和方法

每个函数都包含两个属性：length和prototype

1、length属性：表示函数希望接收的命名参数的个数

实例：

function sayName (name) {
    alert(name);
}
alert(sayName.length);      //1

2、prototype原型（第6章会详细介绍）

实例：

function Test(){}
alert(Test.prototype); // 输出 "Object"

每个函数都包含两个非继承而来的方法：apply()和call()，这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内this对象的值，主要用来扩充函数赖以运行的作用域。

实例：

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

bind()方法：调用此方法的函数的this值会随着传入bind()里的参数对象改变。

window.color = "red";
var o = { color: "blue"};
function sayColor(){
    alert(this.color);
}
var a = sayColor.bind(o);
a();     //blue

5. 6 Page 118 基本包装类型

还有三个特殊的引用类型：Boolean、Number、String。（后台会自动为他们创建的对应的基本包装类型对象）

引用类型与基本包装类型的主要区别是对象的生存期。使用new操作符创建的引用类型实例，在执行流离开当前作用域之前都一直保存在内存中。二自动创建的基本包装类型的对象，则只存在于一行代码的执行瞬间，随后立即被销毁。

5.6.1 Page 120 Boolean类型（不建议使用，略）

5.6.2 Page 120 Number类型

toFixed() 方法：会按照指定的小数位返回竖直的字符串表示,且会自动舍入

实例：

var num = 10.005；
alert(num.toFixed(2));     //"10.01"

toExponential() 方法：会返回以e表示法表示的数值的字符串形式。

实例：

var num = 10;
alert(num.toExponential(1));     //"1.0e+1"

toPrecision() 方法：可能会返回固定大小（fixed）格式或者指数（exponential）格式，具体看哪种最合适。

实例：

var num = 99;
alert(num.toPercision(1));   //"1e+2"
alert(num.toPercision(2));   //"99"
alert(num.toPercision(3));   //"99.0"

5.6.3 Page 122 String类型

1、字符方法

charAt():

var a = "Hello world";
alert(a.charAt(1));    //"e"

chartCodeAt():

var a = "Hello world";
alert(a.charAt(1));    //101(小写字母e的字符编码)

直接访问个别字符的方法：

var a = "Hello world";
alert(a[1]);    //"e"

2、字符串操作方法

concat() 拼接字符串:

var a = "Hello";
var b = a.concat("world","!");
alert(b);    //"Hello world !"

另外还有slice()、substr()、subString()方法：这三个方法都会返回被操作字符串的一个子字符串，接受一或两个参数，参数一是自字符串的开始位置；参数二：slice()和subString()指最后一个字符后面的位置，subStr()则是子字符串的长度。

3、字符串位置方法

indexOf(): 从左往右检索

lastIndexOf():从右往左检索

var a = "Hello world";
alert(a.indexOf("o"));   //4
alert(a.lastIndexOf("o");  //7
alert(a.indexOf("o"，6));   //7
alert(a.lastIndexOf("o"，6);  //4

4、trim()方法：创建一个字符串的副本，并删除前置及后缀的所有空格，并返回结果。

var a = "    Hello world   ";
var b = a.trim();
alert(b);    //"Hello world"

5、字符串大小写转换方法

toLowerCase()、loUpperCase()

toLocaleLowerCase()、toLocaleUpperCase() //针对地区的，用这个比较保险

var a = "Hello world";
alert(a.toLocaleLowerCase());   //"hello world"

6、字符串的模式匹配方法

match()：等同于RegExp的exec()方法，匹配

var text = "cat, bat, sat, fat";
var pattern = /.at/;
var matches = text.match(pattern);
alert(matches.index);   //0
alert(matches[0]);      //"cat"

search()：返回字符串中第一匹配项的索引，接受唯一一个参数，由字符串或RegExp对象指定的一个正则表达式。

var text = "cat, bat, sat, fat";
var pos = text.search(/at/);
alert(pos);     //1

replace()：替换

var text = "cat, bat, sat, fat";
var a = text.replace("at","ond");
alert(a);   //"cond, bat, sat, fat"
a = text.replace(/at/g, "ond");
alert(a);   //"cond, bond, sond, fond"

7、LocaleCompare()方法：比较两个字符串，并返回-1、0、1其中一个值。

-1：字符串在字母表中应该排在参数字符串之前

0：字符串等于参数字符串

1：字符串在字母表中应该排在参数字符串之后

var a = "yellow";
alert(a.localeCompare("brick"));   //1
alert(a.localeCompar("yellow"));   //0
alert(a.localeCompare("Zone"));    //-1

8、fromCharCode()方法：接收一或多个字符编码，并将它们转换为字符。

alert(String.fromCharCode(104,101,108,108,111));  //"hello"

5.7 Page 130 单体内置对象

内置对象：由ECMAScript实现提供的、不依赖于宿主环境的对象，这些对象在ECMAScript程序执行之前就已经存在了。如：Object、Array、String、Global、Math。

5.7.1 Page 131 Global对象

1、URI编码方法

URI：Uniform Resource Identifiers,通用资源标识符

encodeURI()：对URI进行编码，以便发送给浏览器。不会对本身属于URI的特殊字符进行编码，比如冒号、正斜杠、问号和井字号。

encodeURIComponent()：对URI进行编码，以便发送给浏览器。会对任何非标准字符进行编码。

decodeURI()：解码encodeURI()编码

decodeURIComponent()：解码encodeURIComponent()编码

var uri = "http://www.wrox.com/illegal value.htm#start";
alert(encodeURI(uri));
//"http://www.wrox.com/illegal%20value.htm#start"
alert(encodeURIComponent(uri));
//"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start"

2、eval()方法：

具体也不知道有什么用，目前就记录个实例供理解吧。

var a = "Aubrey";
eval("alert(a)");    //Aubrey

eval("function sayHi(){alert('Hi');}");
SayHi();  //Hi

3、Global对象的属性（略）

4、window对象（略）

5.7.2 Page 134 Math对象

1、Math对象的属性

Math.E: 自然对数的底数，即常量e的值

Math.LN10: 10的自然对数

Math.LN2: 2的自然对数

Math.LOG2E: 以2为底e的对数

Math.LOG10E: 以10为底e的对数

Math.PI: π的值

Math.SQRT1_2: 1/2的平方根（即2的平方根的倒数）

Math.SQRT2: 2的平方根

2、min()和max()方法

用于确定一组数值中的最大值和最小值。

var a = Math.max(3,12,52,48);
alert(a);   //52
var b = Math.min(3,12,52,48);
alert(b);   //3

3、舍入方法

Math.ceil() : 向上取大舍入

Math.floor() : 向下取小舍入

Math.round() : 标准四舍五入

alert(Math.ceil(25.1));    //26  
alert(Math.floor(25.9));    //25
alert(Math.round(25.6));    //26

4、Math.random() : 返回大于等于0小于1的随机数

alert(Math.floor(Math.random()));    //0

5、其他方法 Page 136（略）