《JavaScript高级程序设计》总结——第5章：引用类型

版权声明：转载请先告知哦 https://blog.csdn.net/PINK789/article/details/87921503

一段开头：
1：引用类型的值（对象）是引用类型的一个实例。引用类型是一种数据结构，用于将数据和功能组织在一起。他也常常被称为类，但这种称呼并不妥当，尽管ECMAScript从技术上讲是一门面向对象的语言，但它不具备传统的面向对象语言所支持的类和接口等基本结构，引用类型有时也被称为对象定义，因为他描述的时一类对象所具有的属性和方法:；
2：如前所述对象是某个特定引用类型的实例。新对象是使用 new 操作符后跟一个构造函数来创建的。构造函数本身就是一个函数，只不过该函数是出于创建新对象的目的而定义的。请看下面这行代码：
var person = new Object();
这行代码创建了 Object 引用类型的一个新实例，然后把该实例保存在了变量 person 中。使用的构造函数是 Object，它只为新对象定义了默认的属性和方法。ECMAScript 提供了很多原生引用类型（例如 Object），以便开发人员用以实现常见的计算任务;

Object类型

1：目前我们看到的大多数引用类型值都是Object类型的实例；
2：创建Object实例的两种方式

• new 操作符

	var person = new Object();
	person.name = "Nicholas";
	person.age = "25";

• 对象字面量表示法

var person = {
	name:"juan",	//属性名也可以用字符串表示如"name"
	age:25
}

3：访问对象属性两种方式

• person.name;
• person[“first name”]; //必须用变量访问属性时使用

---

Array类型

1：ECMAScript数组的每一项可以是任何类型的数据；
2：ECMAScript数组的大小是可以动态调整的，随数据的添加自动增长以容纳新增数据；
3：创建数组两种方式

• Array构造函数
  • var colors = new Array(); //new可省略
  • var colors = new Array("pink","red");
  • var colors = new Array(20);
  • var colors = Array();
• 数组字面量表示法
  • var numbers = [1,2,3,4]; //可以不赋值

4：Array的length属性可修改，没有值的位置是undefined；
5：检测某对象是否为数组两种方式

• 方法一：instanceof方法

names instanceof Array;	//true(局限性：instanceof操作符认为页面只有一个全局执行环境，所以若页面有框架不适用)

• 方法二：isArray()函数

Array.isArray(names);	//局限性：低版本浏览器不支持

• 兼容性方案

6：所有对象都有toLocaleString()，toString()，valueOf()方法；
7：调用数组**toString()**方法：返回数组中每个值的字符串形式拼接而成的一个以逗号分割的字符串；(实际上创建这个字符串会调用数组每一项的toString()方法)

8：调用数组valueOf() 方法：返回的还是数组；
9：调用数组toLocalString() 方法：返回值与toString()相同(但是实际上创建这个字符串会调用数组每一项的toLocalString()方法)；
10：调用数组的join(“指定分隔符”)方法：返回数组中每个值的字符串形式拼接而成的一个以指定分隔符分割的字符串；
11：两个栈方法

• colors.pop(); //删除数组最后一个元素，返回被删除元素
• colors.push("green"，5); //在数组末尾添加"green",5，返回新数组长度

12：两个队列方法

• colors.shift(); //删除数组第一个元素，返回被删除元素
• colors.unshift("yellow","blue"); //在数组首部添加元素"yellow","blue",并返回新数组长度

13：两个数组重排序方法

• numbers.reverse(); //返回[4,3,2,1]
• numbers.sort(); //可接收一个比较函数,返回排序后数组

function compare(value1, value2) { 
	if (value1 < value2) { 
		return -1; 
	} else if (value1 > value2) { 
		return 1; 
	} else { 
		return 0; 
	} 
} 
var values = [10,5,  15]; 
values.sort(compare);
console.log(values);//[2,10,15]	

14： concat()方法

• concat()可以基于当前数组中所有项创建一个新数组；
• 若传递给 concat()方法的是一或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中；
• 若传递的值不是数组，这些值就会被简单地添加到结果数组的末尾；

var colors = ["red","green"];
var numbers = [5,2];
var colors2 = colors.concat();	//返回colors副本
var colors3 = colors.concat("red");	//["red", "green", "red"]
var colors4 = colors.concat(numbers);	//["red", "green", 5, 2]

15：slice()方法

• 基于当前数组中的一或多个项创建一个新数组，不影响原数组；
• 接受一个或两个参数：返回项的开始和结束位置；

var colors = ["red","green"];
var colors2 = colors.slice(0);	//["red","green"]
var colors3 = colors.slice(1,1);	//["green"]
var colors4 = colors.slice(-2,1);	//["red"]

16：splice()

• 向数组指定位置添加或删除项

colors.splice(2,2,"red","green");	//会从当前数组的位置 2 开始删除两项，插入字符串"red"和"green"

17：位置方法

• colors.indexOf("red",0); //在colors数组中从索引0开始查找元素"red"，并返回其索引位置
• colors.lastIndexOf("red",5); //在colors数组中从索引5开始向前查找元素"red"，并返回其索引位置

18：数组的5个迭代方法

• every()：对数组中的每一项运行给定函数，每项都true返回true，用于查询数组中的项是否满足某个条件；

var colors = [1,2,3,4,5,6];
var result = colors.every(function(item,index,array){
	return (item>0);
})
console.log(result);	//true

• some()：对数组中的每一项运行给定函数，一项为true即返回true，用于查询数组中的项是否满足某个条件；

var colors = [1,2,3,4,5,6];
var result = colors.some(function(item,index,array){
	return (item>5);
})
console.log(result);	//true

• filter()：对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组；

var colors = [1,2,3,4,5,6];
var result = colors.filter(function(item,index,array){
	return (item>4);
})
console.log(result);	//[5,6]

• map()：返回运行的结果数组；

var colors = [1,2,3,4,5,6];
var result = colors.map(function(item,index,array){
	return (item+4);
})
console.log(result);	//[5,6,7,8,9,10]

• forEach()：无返回值，和for循环差不多，用于循环访问集合以获取所需信息；

19：两个归并方法

• reduce()：从前往后迭代数组的所有项，然后构建一个最终返回的值；
• reduceRight()：从后往前迭代数组的所有项，然后构建一个最终返回的值；
  • 传给他俩的函数都接受四个参数：前一个值，当前值，项的索引，数组对象
    使用reduce()计算数组和

var numbers = [1,2,3,4];
numbers.reduce(function(prev,cur,index,array){
	return prev+cur;
})	//10

Date类型

1：创建日期对象的方法

var now = new Date();	//使用new 操作符创建Data实例
var time2 = new Date();

2：Date类型使用UTC（Coordinated Universal Time，国际协调时间）1970年1月1日午夜（零时）开始经过的毫秒数来保存日期；
3：在调用 Date 构造函数而不传递参数的情况下，新创建的对象自动获得当前日期和时间；若想根据特定的日期和时间创建日期对象，必须传入表示该日期的毫秒数（即从 UTC 时间 1970 年 1 月 1 日午夜起至该日期止经过的毫秒数）；
4：**Date.parse()**方法（感觉不太好用，浏览器实现也不同，地区不同结果也不同）

• 接受一个表示日期的字符串参数，然后尝试根据这个字符串返回相应日期的毫秒数，该方法因实现而异，通常因地区而异；

var someDate = new Date(Date.parse("May 25, 2004")); 
var someDate = new Date("May 25, 2004"); 	//Date也会调用Date.parse()

5：**Date.UTC()**方法

• 接受的参数：年份（必须），基于0的月份（必须），月中的哪一天，小时数，分钟，秒，毫秒数；（若未提供月中的天数，假设天数为1，若省略其他参数，统统假设为0）；

var someDate2 = new Date(Date.UTC(2000,0));	//GMT时间2000年1月1日0点0时0分
var allFives = new Date(Date.UTC(2005, 4, 5, 17, 55, 55));	//GMT 时间 2005 年 5 月 5 日下午 5:55:55 

6：**Data.now()**方法（ECMAScript新增）

• 表示调用这个方法时的日期和时间的毫秒数；
• 使用

//在支持Date.now()方法的浏览器
//取得开始时间
var start = Date.now(); 
//调用函数
doSomething(); 
//取得停止时间
var stop = Date.now(), 
 result = stop – start; 

//在不支持Date.now()方法的浏览器，使用+操作符即可
//取得开始时间
var start = +new Date(); 
//调用函数
doSomething(); 
//取得停止时间
var stop = +new Date(), 
 result = stop - start; 

7：继承的方法
（1）与其他引用类型一样，Date类型也重写了toLocaleString()、**toString()**和 **valueOf()**方法
（2）toLocaleString()方法：按照与浏览器
设置的地区相适应的格式返回日期和时间。这大致意味着时间格式中会包含 AM 或 PM，但不会包含时区信息（浏览器不同返回结果不同）；（没啥用）
（3）toString()方法：返回带有时区信息的日期和时间，其中时间一般以军用时间（即小时的范围是 0 到 23）表示；（没啥用）
（4）valueOf() 方法：返回日期的毫秒，可用来比较时间数；

var date1 = new Date(2007, 0, 1); //"January 1, 2007" 
var date2 = new Date(2007, 1, 1); //"February 1, 2007" 
alert(date1 < date2); //true 
alert(date1 > date2); //false 

8：日期格式化为字符串的方法

• toDateString()——以特定于实现的格式显示星期几、月、日和年；
  date1.toDateString() //"Mon Jan 01 2007"
• toTimeString()——以特定于实现的格式显示时、分、秒和时区；
  date1.toTimeString() //"00:00:00 GMT+0800 (中国标准时间)"
• toLocaleDateString()——以特定于地区的格式显示星期几、月、日和年；
  date1.toTimeString() //"2007/1/1"
• toLocaleTimeString()——以特定于实现的格式显示时、分、秒；
  date1.toTimeString() //"上午12:00:00"
• toUTCString()——以特定于实现的格式完整的 UTC 日期;
  date1.toUTCString() //"Sun, 31 Dec 2006 16:00:00 GMT"
  9：日期/时间组件方法
• UTC日期值得是在没有时区偏差的情况下（将日期转换为GMT时间）的日期值
• 直接取得和设置日期值中特定部分的方法
  （太多了懒得写了）

方法	说明
getTime()	返回表示日期的毫秒数；与valueOf()方法返回的值相同
setTime(毫秒)	以毫秒数设置日期，会改变整个日期
getFullYear()	取得四位数的年份
getUTCFullYear()	返回UTC日期的4位数年份
setFullYear(年)	设置日期的年份,传入4位数字
setUTCFullYear(年)	设置UTC日期的年份。传入的年份值必须是4位数字（如2007而非仅07）
getMonth()	返回日期中的月份，其中0表示一月，11表示十二月
getDate()	返回日期月份中的天数（1到31）
getHours()	返回日期中的小时数（0到23）
getMinutes()	返回日期中的分钟数（0到59）
getSeconds()	返回日期中的秒数（0到59）
getMilliseconds()	返回日期中的毫秒数
getTimezoneOffset()	返回本地时间与UTC时间相差的分钟数。例如，美国东部标准时间返回300。在某地进入夏令时的情况下，这个值会有所变化

RegExp类型

1：两种创建语法

• 方法一：构造函数

var pattern1 = /[bc]at/i;
var pattern2 = new RegExp("[bc]at", "i");	//传递给RegExp构造函数的两个参数都是字符串，所以在某些情况下要对字符进行双重转义;
// 字面量模式    /\[bc\]at/
// 等价的字符串  "\\[bc\\]at" 

• 方法一：字面量形式

var expression = / pattern / flags ;

2：二者区别
ECMAScript3中使用正则表达式字面量始终会共享一个ReExp实例，而用构造函数创建的没一个新RegExp实例都是一个新实例；
ECMAScript5中明确规定：使用正则表达式字面量必须像直接调用 RegExp 构造函数一样，每次都创建新的 RegExp 实例；

3：flags

flags	说明
g	表示全局（global）模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即
停止；
i	表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写；
m	表示多行（multiline）模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模
式匹配的项;

• 模式中使用的所有元字符都必须转义；
  ( [ { \ ^ $ | ) ? * + .]}

4：RegExp 的每个实例都具有下列属性
（这些属性可以获知正则表达式的各方面信息，但是没多大用处，因为这些信息全都包含在模式声明里）

属性名	说明
global	布尔值，表示是否设置了g标志
ignoreCase	布尔值，表示是否设置了i标志
m	布尔值，表示是否设置了m标志
lastIndex	整数，表示开始搜索下一个匹配项的位置
source	返回正则表达式的字面量形式，而非传入构造函数的字符串模式

5：RegExp对象的三个方法
（1） exec() 方法

• 检索字符串中的正则表达式的匹配;
• 若字符串中有匹配的值返回该匹配值，若无返回 null；
• 返回的数组是Array的实例，但是额外包含两个属性：
  • index：匹配项在字符串中的位置；
  • input：应用正则表达式的字符串；

var text = "mom and dad and baby";
var pattern = /mom( and dad(and baby)?)?/gi;
var matches = pattern.exec(text);
console.log(matches.index);	//0
console.log(matches.input);	//"mom and dad and baby"
console.log(matches[0]);	//"mom and dad and baby" 
console.log(matches[1]);
console.log(matches[2]);

（2）：RegExp对象的 test() 方法

• 检索字符串中指定的值，返回 true 或 false；
• RegExpObject.test(string)；

（3）：RegExp对象的 toString() 方法

• 返回正则表达式的字符串；

6：支持正则表达式的String 对象的四个方法
（1）search() 方法

• 检索与正则表达式相匹配的值并返回匹配字符串的起始索引位置；
• String.search(“字符串”);

var str = "Hello World!";
var n = str.search("World");	//n=6
var m = str.search(/World/i);	//m=6

• String.search(regexp);

（2）：match()方法（支持正则表达式的 String Object的方法）

• string.match(regexp)
• 检索字符串 String Object，以找到一个或多个与 regexp 匹配的文本；
• 若正则表达式无标志g：match()方法只能在stringObject中执行一次匹配，若无匹配，返回null；
• 若正则表达式有标志g：返回一个数组；

（3）：split()方法 （支持正则表达式的 String 对象的方法）

• 把字符串分割为字符串数组；
• 不改变原数组；

var str="Hello";
var n=str.split("");
console.log(n);	//["H","e","l","l","0"];

（4）：replace()方法（支持正则表达式的 String 对象的方法）

• 替换与正则表达式匹配的子串;

var str = "Hello";
var m = str.replace(/[heo]/gi,"l");	//"lllll"
var n = str.replace("H","l");	//"lello"

7：RegExp构造函数属性

• 六个属性，四个Opera都不支持，一个IE不支持，先不看了

Function类型

1：函数实际上是对象；
2：每个函数都是 Function 类型的实例，而且都与其他引用类型一样具有属性和方法；
3：由于函数是对象，因此函数名是一个指向函数对象的指针，不会与某个函数绑定；
4：使用不带括号的函数名是访问函数指针而非调用函数；

function sum(num1,num2){
	return num1+num2
}
var anotherSum = sum;	//anotherSum和sum都指向了同一个函数

5：定义函数的四种方式

• 方法一：函数声明

function sum(num1,num2){
	return num1+num2
}

• 方法二：函数表达式；

var sum2 = function(num1,num2){
	return num1+num2
};

• 方法三：Function构造函数
  • Function 构造函数可以接受任意数量的参数，但最后一个参数始终被看成是函数体，而前面的参数枚举了新函数的参数

var sum = new Function("num1", "num2", "return num1 + num2"); // 不推荐

6：ECMAScript函数没有重载：重复为同一个函数名指定函数，该名称只属于后者；

7：函数声明和函数表达式的区别

• 函数声明提升；
• 函数表达式必须等到解析器执行到他所在的代码行才会被执行；

//函数声明
console.log(add(1,2));
function add(num1,num2){
	return num1+num2;
}	//3
//函数表达式
console.log(sdd(1,2));
var sdd = function(num1,num2){
	return num1+num2;
};	//报错：Uncaught TypeError

• 除了什么时候可以通过变量访问函数这一点区别之外，函数声明与函数表达式的语法等价；
  8：作为值的函数
• 可以像传递参数一样把一个函数传递给另一个函数，也可以将一个函数作为另一个函数的结果返回；

//作为参数传递
function getGreeting(name){ 
 return "Hello, " + name; 
} 
var result2 = callSomeFunction(getGreeting, "Nicholas");

• 使用示例；

function createComparisonFunction(property){
	return function(object1,object2){
		var value1 = object1[propertyName]; 
 		var value2 = object2[propertyName]; 
 		if (value1 < value2){ 
 			return -1; 
 		} else if (value1 > value2){ 
 			return 1; 
 		} else { 
 			return 0; 
 		} 
	};
}
var data = [{name: "Zachary", age: 28}, {name: "Nicholas", age: 29}]; 
data.sort(createComparisonFunction("name")); 
alert(data[0].name); //Nicholas 
data.sort(createComparisonFunction("age")); 
alert(data[0].name); //Zachary 

9：函数内部属性

• arguments对象的callee属性：该属性指向拥有这个arguments对象的函数

//景点的阶乘函数
function factorial(num){
	if(num<=1){
		return 1;
	} else (
		return num*arguments.callee.(num-1);
	)
}

• this对象：引用的是函数据以执行的环境对象——或者也可以说是 this 值（当在网页的全局作用域中调用函数时，
  this 对象引用的就是 window）
• 函数的caller属性：保存着调用当前函数的函数的引用；

function outer(){ 
 inner(); 
} 
function inner(){ 
 alert(arguments.callee.caller); 
} 
outer(); 
//返回function outer(){ 
 inner(); 
} 

• 严格模式还有一个限制：不能为函数的 caller 属性赋值，否则会导致错误；

10：函数两个属性
（1）length属性表示函数希望接受的命名参数的个数；
（2）：prototype属性:

• 保存着引用类型所有的实例方法（如toString()和valueOf()等方法）；
• 在创建自定义引用类型以及实现继承时，这个属性很重要（第六章讲的）；
• ECMAScript中，该属性不可枚举；
  11：函数连个非继承而来的方法apply()和call()
  （1）这俩方法都是在特定作用域中调用函数，实际上等于设置函数体内 this 对象的值；
  （2）他俩的作用：扩充函数作用域，而且对象和方法不需要有任何的耦合关系；
  （3） apply()
• 方法接收两个参数，参数一：在其中运行函数的作用域，参数二：参数数组（可以砸IArray的实例，也可以是arguments 对象）

 return num1 + num2; 
} 
function callSum1(num1, num2){ 
 return sum.apply(this, arguments); // 传入 arguments 对象
} 
function callSum2(num1, num2){ 
 return sum.apply(this, [num1, num2]); // 传入数组
} 
alert(callSum1(10,10)); //20 
alert(callSum2(10,10)); //20 

（3）**call()**方法：
接收多个参数：参数一：在其中运行函数的作用域；其余参数都直接传递给函数；

function sum(num1, num2){ 
 return num1 + num2; 
} 
function callSum(num1, num2){ 
 return sum.call(this, num1, num2); 
} 
alert(callSum(10,10)); //20 

12：bind() 方法

• ECMAScript新增的，用于创建一个函数的实例，其 this 值会被绑定到传给 bind()函数的值；

window.color = "red";
var o = {color:"blue"};
function sayColor(){
	console.log(this.color);
}
var objectSayColor = sayColor.bind(0);
objectSayColor();	//blue

13：每个函数继承的toLocaleString()和 toString()方法始终都返回函数的代码。返回代码的格式则因浏览器而异；

基本包装类型

单体内置对象

小结