js005-引用类型
js005-引用类型
数据类型分为基本类型和引用类型：基本类型值如下：Undefined、Null、Bollean、Number、String
本章内容：
1、使用对象
2、创建并操作数组
3、理解基本的javaScript类型
4、使用基本类型和基本操作类型
引用类型的值（对象）是引用类型的一个实例。引用类型是一种数据结构，和类看起来很相似。
引用类型如下：
5.1 Object类型
创建Object实例有两种方式：
|
1、 new |
2、对象字面量 |
|
|
var obj1 = new Object(); obj1.name = "meimei"; |
var person{ name : "meimei"; age : 18; } |
var person = {} person.name = "meimei"; person.age = 18; |
5.2 Array 类型
这是除了Object之外最常用的类型。
创建数组的方式有两种：
|
1、使用Array构造函数 |
|
var colors = new Array(); var colors = new Array(20);//数组长度为20 var colors = new Array(“gread”);
//省略new操作符 var colors = new Array(3); var name = Array("gread"); |
|
2、使用数组字面量表示方法 |
|
var colors = ["red", "blue", "yellow"]; //创建一个包换3个字符串的数组 var names = []; //创建一个空数组 var values = [1,2，]; //别这样做，这样会创建一个2或者3项的数组。 var options = [,,,,]; //别这样，这样会创建一个5或者6项的数组 |
|
var colors = ["red", "blue", "yellow"]; alert(colors[0]); //显示第一项 colors[2] = "black"; //修改第三项 colors[3] = "green"; //新增第四项 |
5.2.1 检测数组
Instanceof
5.2.2 转换方法
|
var colors = ["red", "blue", "yellow"]; //创建一个包含三个字符串的数组 alert(colors.toString()); //red,blue,green alert(colors.valueOf()); //red,blue,green alert(colors); //red,blue,green |
5.2.3 栈方法
LIFO的数据结构
|
var colors = new Array(); var account = colors.push("red", "black"); alert(account); //2
account = colors.push("yellow", "pink"); alert(account); //4
var item = colors.pop(); alert(item); //pink |
5.2.4 队列方法
FIFO数据结构
|
var colors = new Array(); var account = colors.push("red", "black"); alert(account); //2
account = colors.push("yellow", "pink"); alert(account); //4
var item = colors.shift(); alert(item); //red alert(colors.length); |
5.2.5 重排序方法
|
var values = [1,2,3,4,5]; values.reverse(); alert(values); |
反转数组项的顺序 |
|
var values = [1,20,10,36,5]; values.sort(); alert(values); //1,10,20,36,5 |
sort()方法是进行升序排序。是进行字符串比较。会先调用toString()方法。一般不是最佳的方法。一般sort()方法接收一个比较函数作为参数比较好。 |
5.2.6 操作方法
|
var colors = ["red", "green", "blue"]; var colors2 = colors.concat("yellow" , ["red", "green", "blue"]);
alert(colors); //red,green,blue alert(colors2); //red,green,blue,yellow red,green,blue |
concat()方法
|
|
var colors = ["red", "green", "blue"]; var colors2 = colors.slice(1); var colors3 = colors.slice(1,2);
alert(colors2); //green,blue alert(colors3); //green |
slice() 传入1，表示从数组下标为1的开始； 传入1,2表示从1开始到2结束 |
|
删除 |
可以删除任意数量的项，指定两个参数：要删除的第一项的位置和要删除的项数。如：splice(0, 2); 表示删除前两项 |
|
插入 |
可以向指定位置插入任意数量的项，提供三个属性：起始位置，0（要删除的项），要插入的项。如：splice(2, 0, “green” , “red”); |
|
替换 |
可以向指定位置插入任意数量的项，同时删除任意数量的项。提供三个属性：起始位置，要删除的项，要插入的项。如：splice(2,2, “green” , “red”);在第二个位置（包括该项），删除两项后，插入green和red。 |
5.2.7 位置方法
两种位置方法
|
indexOf()
|
var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; alert(numbers.indexOf(4)); //3 alert(numbers.lastIndexOf(4)); //5
alert(numbers.indexOf(4, 4)); //5 alert(numbers.lastIndexOf(4, 4)); //3
var person = {name ："meimei"}; var people = [{name ："meimei"}];
var morePeople = [person];
alert(people.indexOf(person)); //-1 alert(morePeople.indexOf(person)) //0 |
|
lastIndexOf() |
5.2.8 迭代方法
以下是五个迭代方法
|
every() |
对数组中的每一项运行给定函数，如果该函数每一项都返回true则返回true |
|
filter() |
对数组中的每一项运行给定函数，返回函数会返回true的项组成的数组 |
|
forEach() |
对数组中的每一项运行给定函数，没有返回值 |
|
map() |
对数组中的每一项运行给定函数，返回函数每次调用的结果组成的数组 |
|
some() |
对数组中的每一项运行给定函数，如果该函数对任意一项返true，则返回true |
5.2.9 归并方法
|
reduce() reduceRight() 两种方法。相同点： 都会迭代数组的所有项，然后构建一个最终返回的值。都接收两个参数：一个在每一项上调用过得函数和（可选）作为归并基础的初始值。传给这两个函数接收的4个参数：前一个值、当前值、项的索引和数组对象。函数返回的任何值都会被作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项； |
不同点:
|
reduce() |
从第一项开始，逐个遍历到最后 |
|
reduceRight() |
从最后一项开始，逐个遍历到最前面 |
5.3 Date类型
创建一个日期对象，使用new操作符和Date构造函数
如下：
var now = new Date(); UTC时间1970年1月1日午夜0点
Date.parse()
使用+操作符取得Date对象的时间戳
|
var start = +new Date(); //调用函数 dosomething(); //取得停止时间 var stop = +new Date(); result = stop - start; |
5.3.1 继承方法
5.3.2 日期格式化方法
|
toDateString() |
以特定于实现的格式显示星期几、月、日、年 |
|
toTimeString() |
以特定于实现的格式显示时、分、秒、时区 |
|
toLocaleDateString() |
以特定于地区的格式显示星期几、月、日、年 |
|
toTimeeDateString() |
以特定于实现的格式显示时、分、秒 |
|
toUTCString() |
以特定于实现的格式完整的UTC日期 |
5.3.3 日期/时间组件方法
未完成
|
方法 |
说明 |
|
|
|
5.4 RegExp类型
ECMAScript通过RegExp类型来支持正则表达式
var expression = / pattern /flags;
其中pattern部分可以是任何简单或者复杂的正则表达式，可以包含字符类、限定类、分组向前查找以及方向引用。每个正则表达式可以带一个或者多个标志，用于
|
g |
表示全局(global)模式，即模式将被英语与所有字符串，而非在发现第一个匹配项时立即停止； |
|
i |
表示不区分大小写(case-insensitive) |
|
m |
表示多行（multiline）模式 |
表明正则表达式的行为。正则表达式的匹配模式支持下列3个标志：
5.4.1 RegExp实例属性
RegExp的每个实例都具有下列属性：
|
global |
布尔值，表示是否设置了g标志 |
|
ignoreCase |
布尔值，表示是否i标志 |
|
lastIndex |
整数，表示开始搜索下一个匹配项的字符位置，从0算起 |
|
multiline |
布尔值，表示是否设置了m标志 |
|
source |
正则表达式的字符串表示，按照字面量的形式而非传入构造函数的字符串欧式返回。 |
5.4.2 RegExp实例方法
RegExp对象的主要方法是exec(),该方法专门为捕获组而设计，接受一个参数
|
var text = "mom and dad and baby"; var patttern = /mom(and dad(and baby)?)?/gi;
var matches = patttern.exce(text); alert(matches.index); //0 alert(matches.input); //"mom and dad and baby" alert(matches[0]); //"mom and dad and baby" alert(matches[1]); //"and dad and baby" alert(matches[2]); //"and baby" |
5.4.3 RegExp构造函数属性
RegExp构造函数包含一些属性，这些属性适用于作用域中的所有正则表达式，并且基于所执行的最近一次正则表达式操作而变化。
下表为RegExp构造函数的属性
|
长属性名 |
短属性名 |
说明 |
|
input |
$_ |
最近一次要匹配的字符串。Opera为实现此属性 |
|
lastMatch |
$& |
醉经一次的匹配项，Opera未实现此属性 |
|
lastParen |
$+ |
最近一次匹配的捕获组。Opera未实现此属性 |
|
leftContext |
$’ |
input字符串中的lastMatch之前的文本 |
|
multiline |
$* |
布尔值，表示是否所有表达式都是使用多行模式。IE和Opera未实现此属性 |
|
rightContext |
$’ |
Input字符串中的lastMatch之后的文本 |
5.4.4 模式的局限性
ECMAScript正则表达式不支持的特性
|
匹配字符串开始和结尾的\A 和\Z 锚 |
|
向后查找（lookbehind） |
|
并集和交集类 |
|
原子组 |
|
Unicode支持（单个字符除外） |
|
命名的捕获组 |
|
s （single 单行）和x（free-spacing 无间隔）匹配模式 |
|
条件匹配 |
|
正则表达式注释 |
5.5 Function类型
函数实际上是对象。
函数通常是使用函数声明语法定义的，如下：
|
function add(num1 , num2){ var sum = num1 + num2; return sum; } |
5.5.1 没有重载 （深入理解）
|
function addSomeNunber(num){ return num + 100; } function addSomeNunber(num){ return num + 200; } var result = addSomeNunber(100); //300 |
var addSomeNunber = function(num){ return num + 100; } var addSomeNunber = function(num){ return num + 200; } var result = addSomeNunber(100); //300 |
|
这两个例子声明了两个同名函数，结果是后面的函数覆盖了前面的函数。 |
|
5.5.2 函数声明和函数表达式
|
alert(sum(10,10)); function sum(num1,num2){ return num1 + num2; } |
alert(sum(10,10)); var sum = function(num1,num2){ return num1 + num2; }; |
5.5.3 作为值的函数
函数名本身就是变量，所以函数也可以作为值来使用。就是可以把函数名像参数一样传给另一个参数
5.5.4函数内部属性
在函数内部有两个特殊对象：arguments和this。
arguments主要用途是保存函数参数，但是这个对象有个属性是callee，该属性是一个指针，指向拥有这个arguments对象的函数
|
function factorial(num){ if (num <= 1) { return 1; }else { return num * factorial(num - 1); } } |
如果函数名不变的话，这个方法是正确的。但是问题是这个函数的执行与函数名factorial紧密耦合在一起，未消除这种现象可以使用一下arguments.callee。 |
|
function factorial(num){ if (num <= 1) { return 1; }else { return num * arguments.callee(num - 1); } } |
在重写的函数体内没有引用函数名factorial，这样无论函数名使用什么样的名字，都可以保证正常完成递归调用 |
5.5.4 函数属性和方法
每个函数都包含两个属性：length和prototype。其中length蛇形表示函数希望接收的命名参数的个数，如下例子
|
function sayName(name){ alert(name); }
function sum(num1 , num2){ return num1 + num2; } function sayHi(){ alert("hi"); }
alert(sayName.length); //1 alert(sum.length); //2 alert(sayHi.length); //0 |
在传点自定义引用类型中，prototype属性是不可枚举的，因此for-in无法发现。
每个函数都包含两个非继承而来的方法：apply()和call()，这两个方法的用都是在特定的作用域中调用函数，实际上等于设置函数体内的this对象的值。
|
call() |
apply() |
|
用法和apply()相同。区别在于接收参数的方式不同：第一个参数：this，其余参数都是直接传递给函数。在使用call()方法时，传递给函数的参数必须逐个例举出来。 |
首先apply()方法接收两个参数，一：在其中运行函数的作用域，二：参数数组。其中第二个参数可以是Array的实例 |
|
function sum(num1 , num2){ return = num1 + num2; } function callsum1(num1 , num2){ return sum.call(this, num1 , num2);
} alert(callsum(10, 10)); //20 |
function sum(num1 , num2){ return = num1 + num2; } function callsum1(num1 , num2){ return sum.appply(this, arguments); //传入arguments对象 }
function callsum2(num1 , num2){ return sum.appply(this, [num1 , num2]); //传入数组 } alert(callsum1(10, 10)); //20 alert(callsum2(10, 10)); //20 |
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 |
对this.color求值会转换为对windows.color求值
call()和apply()来扩中作用域最大的好处是：对象不需要与任何方法有任何耦合关系 |
bind()方法。该方法会创建一个函数的实例，其this值会绑定到传给bind()函数的值。
|
window.color = "red"; var o = {color: "blue";} function sayColor(){ alert(this.color); } var objectSaycolor = sayColor.bind(o); objectSaycolor(); //blue |
objectSaycolor的this值是o；所以就算是全局作用域调用这个函数，也会返回blue。 |
5.6 基本包装类型
为了便于操作基本类型值，ECMAScript提供了3个特殊引用类型：Boolean、Number、String。这些类型与本章其他引用类型相似，同时具有与各自的基本类型相应的特殊行为。每读取一个基本类型值的时候，后台会创建一个队形的基本包装类型的对象，从而让我们能够调用一些方法来操作这些数据。
|
var s1 = "some text"; var s2 = s1.substring(2); |
当第二行代码访问s1时，后台会进行如下操作： 1、创建String类型的一个实例； 2、在实力上调用指定的方法； 3、销毁这个实例 其过程如下代码： var s1 = new String("some text"); var s2 = s1.substring(2); s1 = null; |
以上三个步骤也适用于Boolean和Number类型对应的布尔值和数字值。
引用类型与基本包装类型的主要区别就是对象的生存期。使用new操作符创建的引用类型的实例，在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本类型的对象，则只存在于一行代码的执行瞬间，然后立即被销毁。这意味着我们不能在运行时为基本类型添加属性和方法。
|
var s1 = "some text"; s1.color = "red"; alert(s1.color); //undefined |
不能在运行时为基本类型添加属性和方法 alert时color属性不见了，因为它在第二行执行完后就被瞬间销毁了。 |
5.6.1 Boolean类型
Boolean类型是与布尔值对应的引用类型。要创建Boolean对象，可以调用Boolean构造函数并传入true或者false值。
var BooleanObject = new Boolean(true);
Boolean类型的实例唱戏饿了valueOf()方法，返回基本类型值true或者false，重写了toString()方法返回字符串”true”或”false”
布尔表达式中的所有对象都会转换为true
|
var falseObject = new boolean(false); var result = falseObject && true; alert(result); //true |
var falseValue = false; result = falseValue && true; alert(result); //false |
|
布尔表达式中的所有对此昂都会被转为true，所以falseObject对象在布尔表达式值代表的是true。true && true为true |
基本类型的布尔值 |
理解基本类型的布尔值与Boolean对象之间的区别非常重要，建议是永远不要用Boolean对象。
5.6.2 Number类型
Number是数字值对应的引用类型。要创建Number对象，可以调用Number构造函数是向其中传递相应的数值
var numberObject = new Number(10);
Number类型也重写了valueOf() 、tolocaleString()和toString()方法，重写valueOf()方法返回队形表示的基本类型的数值，另外两个方法则返回字符串形式的数值。
|
var num = 10; alert(num.toString()); //10 alert(num.toString(2)); //10110 alert(num.toString(8)); //12 alert(num.toString(10)); //10 alert(num.toString(16)); //a |
可以为toString()方法传递一个表示基数的参数，告诉它返回基金之数值的字符串形式 |
|
var num = 10; alert(num.toFixed(2)); //"10.00" |
toFixed() 方法会根据指定的小树为返回数值的字符串表示 可以表示带0~20位小数位的数值 |
5.6.3 String类型
String类型是字符串的对象包装类型，可用String构造函数来创建。
var stringObject = new String("hello word");
String类型的每一个实例都有一个length属性，表示字符串包含多个字符
String类型提供了很多方法，用于辅助完成对ECMAScript中字符串的解析和操作。
|
字符方法 |
用于访问字符串中特定字符的方法：charAt()和charCodeAt()。这两个方法都接收一个参数，即基于0的字符位置 var stringValue = “hello word”; alert(stringVale.charAt(1)); //”e” alert(stringValue.cahrCodeAt(1)); //"101" |
|
字符串操作方法 |
var stringObject = new String("hello"); var stringValue = “hello word”; var result = stringValue.concat("word"); alert(result); //"hello word" alert(stringValue); //"hello" |
|
字符串位置方法 |
var stringValue = "hello word"; alert(stringValue.indexOf("o")); //4 alert(stringValue.lastIndexOf("o")); //7 |
|
trim()方法 |
该方法会创建一个字符串的副本，珊瑚前置及后缀的所有空格，然后返回结果 |
|
字符串大小写转换方法 |
四个方法： toLowerCase() toLocaleLowerCase() toUpperCase() toLocaleUpperCase() |
|
字符串模式匹配方法 |
|
|
localeCompare()方法 |
比较两个字符串，并返回下列值中的一个： 1、如果字符串在字母中应该排在字符串参数之前，返回一个负数（一般为-1） 2、如果字符串等于字符串参数 ，返回0 3、如果字符串在字母表中应该排在字符串参数之后，返回一个整数（一般为1） |
|
fromCharCode()方法 |
String构造函数本身的一个静态方法，任务是接收一个或者多个的字符编码，然后将他们转换为一个字符串，这个方法与charCodeAt()执行的是相反的操作。 |
|
HTML方法 |
添加了一些拓展标准，但是基本不要用 |
5.7 单体内置对象
ECMAScript对单体内置对象的定义：由ECMAScript实现提供的、不依赖与宿主环境的对象，在ECMAScript程序执行之前就已经存在了。它们是已经实例化过了的。
5.7.1 Global对象
Global对象（全局对象）是ECMAScript中最特别的一个对象，因为你从哪个角度看，这个对象都是不存在的。Global对象还包含一些其他方法：
|
URI编码方法 |
Global对象的encodeURI()和encodeURICompare()方法可以对URI进行编码，以便发给浏览器。encodeURI()主要用于整个URI, encodeURICompare()主要用于URI中的某一段 |
|
eval()方法 |
eval()方法像是一个完整的ECMAScript解析器，它只接受一个参数。 |
|
Global对象的属性 |
P133（未完成）等待拍照上传 |
|
window对象 |
|
5.7.2 Math对象
Math对象的属性 （未完成）等待拍照上传P134
|
属性 |
说明 |
|
|
|
min()和 max()方法
确定一组数值中的最小值和最大值，可以接收任意个参数
random()方法
Math.random()返回一个0~1之间的随机数
|
返回1~10之间随机数 |
var num = Math.floor(Math.random() * 10 + 1); |
|
返回2~10之间随机数 |
var num = Math.floor(Math.random() * 9 + 2); |
其他方法
版权声明：此文原创作者：http://www.cnblogs.com/lal-fighting/ 未经作者同意，不得私自转载。
