《JavaScript高级程序设计（第三版）》读书笔记02 引用类型

第五章 引用类型

引用类型是一种数据结构，用于将数据和功能组织在一起。

5.1 Object类型

使用最多。

创建Object实例的两种方式：
1、new后跟Object构造函数，最好对必须值使用。
2、对象字面量表示法， 是简写形式，最好封装多个可选参数。（首选）

//1、
var person = new Object();
person.name = "Nike";
person.age = 28;

//2、
var person = {
    name : "Nike",//属性名也可以用字符串，如"name"
    age : 28
};

function displayInfo(args) {
    var output = "";
    //通过typeof检测属性是否存在
    if(typeof args.name == "string") {
        output += "Name: " + args.name + "\n";
    }

    if(typeof args.age == "number") {
        output += "Age: " + args.age + "\n";
    }

    alert(output);//后面调用了两次
}

displayInfo({
   name: "Nike",
   age: 29
});

displayInfo({
   name: "Greg"
});

5.2 Array类型

0、特点

• 数组的每一项都可以是任何类型的数据
• 数组的大小可以动态调整，可随数组的添加自动增长

1、创建数组

方式：

• 构造函数方式：可以省略new，可传递数值代表项数，或者传递其他类型代表数组内容
• 数组字面量表示法：

//1、构造函数方式
var colors = new Array();

var colors = new Array(20);

var colors = new Array("red", "blue", "green");

//注意传递数值创建数组时，数值代表项数！
var colors = new Array(3);//创建一个包含3项的数组

//如果传递其他类型，则只有一项
var names = new Array("Greg");//包含一项，即字符串"Greg"

//2、数组字面量表示法

var names = [];//空数组

var colors = ["red", "blue", "green"];//包含三项

alert(colors[0]);//red，显示第一项

colors[1] = "Nike";//修改第二项

colors[3] = "add";//增加数组的第四项

alert(colors.length);//4

2、length属性

• 数组名.length = 数组的长度
• length可用来移除或增加数组的项,项都取undefined值
• 方便的在数组末尾（[数组.length])添加项

//移除
var colors = ["red", "blue", "green"];//原本长度为3
colors.length = 2;//设置长度为2，则移除最后一项

alert(colors[2]);//undefined


//新增
colors.length = 4;//设置长度为4
alert(colors[3]);//undefined


//数组末尾新增
colors[colors.length] = "black";


//重新改变数组长度

colors[99] = "white";
alert(colors.length);//100
//中间位置都是undefined

3、检测数组

• instanceof对于一个全局作用域而言确定是否是数组
• Array.isArray()不管在哪个全局执行环境中创建的数组，最终确定某个值到底是不是数组

if(value instanceof Array){
	//对数组执行某些操作
}

if(Array.isArray(value){
	//对数组执行某些操作
}

4、转换方法

• toLocaleString()
• toString()：返回逗号分隔的字符串形式拼接
• valueOf()：返回数组本身
• join()：改变分隔符

5、栈方法

• 栈特点：后进先出，操作在栈顶，数组对应在末尾
• push()：接收任意数量参数添加到数组末尾，返回新数组长度
• pop()：移除数组最后一项，长度-1，返回移除的项

var colors = new Array();
var count = colors.push("red", "green");//推入两项
alert(count);//2

count = colors.push("black");
alert(count);//3

var item = colors.pop();//移除1
alert(item);//"black"
alert(colors.length);//2

6、队列方法

正向模拟队列：

• 队列特点：先进先出，队列在列表末端添加，前端移除。
• push() 就是栈方法，数组末端添加n项
• shift()，数组前端移除一项，长度-1，返回移除的项（即原数组第一项）

var colors = new Array();
var count = colors.push("red", "green");
alert(count);//2

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

反向模拟队列：

• pop()，数组末端移除一项，返回移除项
• unshift()，数组前端添加任意项，返回新数组长度

7、操作方法

1. concat()
   方法：相当于 +
   方式：创建当前数组的副本，将接收到的参数添加到副本末尾，返回副本。

var colors = ["red","green","blue"];
var colors2 = colors.concat("yellow",["black","brown"]);

alert(colors);//red,green,blue
alert(colors2);//red,green,blue,yellow,black,brown

2. slice()
   方法：剥离复本，基于当前数组中的几项创建一个新数组。返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
   原型：arrayObject.slice(start,end),start必须，end可选。start若是负值，是从尾部选取。

var colors = ["red","green","blue","yellow","purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);

alert(colors2);//green,blue,yellow,purple
alert(colors3);//green,blue,yellow

3. splice()
   方法：向/从数组中添加/删除项目，然后返回被删除的项目。会改变原始数组。
   原型：arrayObject.splice(index,howmany,item1,.....,itemX)

• index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
• howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
• item1, …, itemX 可选。向数组添加的新项目。

返回：如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

var colors = ["red","green","blue"];
var removed = colors.splice(0,1);//删除第一项
alert(colors);//green,blue
alert(removed);//red

removed = colors.splice(1,0,"yellow","orange");//从位置1开始插入两项
alert(colors);//green,yellow,orange,blue
alert(removed);//空数组

removed = colors.splice(1,1,"red","purple");//从位置1开始插入两项
alert(colors);//green,red,purple,orange,blue
alert(removed);//yellow

8、位置方法

1. indexOf()
   方法：从开头向后查找
   原型：stringObject.indexOf(searchvalue,fromindex),
   searchvalue 必需。规定需检索的字符串值。
   fromindex 可选的整数参数。规定在字符串中开始检索的位置。
2. lastIndexOf()
   与indexOf()相同，除了从末尾向前查找的方向

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

alert(numbers.indexOf(4));//3，注意4是value，3是index
alert(numbers.lastIndexOf(4));//5

alert(numbers.indexOf(4,4));//5
alert(numbers.lastIndexOf(4,4));//3，因为是从索引4向前查找，所以第一个找到的是索引3

9、迭代方法
5个迭代方法，每个方法都接收2个参数：

1. 要在每项上运行的函数。该函数接收3个参数：
   1. 数组项的值
   2. 该项在数组中的位置
   3. 数组对象本身
2. 运行改函数的作用域对象（可选）

5个迭代方法的作用：

• every()：函数对每项都返回true，就返回true
• filter()：返回该函数会返回true的项组成的数组
• forEach()：只对数组中的每一项运行给定函数，无返回值。本质与for循环迭代数组一样
• map()：返回每次函数调用的结果组成的数组
• some()：函数对任一项返回true，就返回true

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

var everyResult = numbers.every(function(item,index,array){
    return (item>2);
});

alert(everyResult);//false

var someResult = numbers.some(function (item,index,array) {
    return (item>2);
});

alert(someResult);//true

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

var filterResult = numbers.filter(function(item,index,array){
    return (item>2);
});

alert(filterResult);//[3,4,5,4,3]

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

var mapResult = numbers.map(function(item,index,array){
    return item*2;
});

alert(mapResult);//[2,4,6,8,10,8,6,4,2]

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

numbers.forEach(function(item,index,array){
    //执行某些操作
});

10、归并方法
reduce()和reduceRight()方法，一个从头往后遍历，一个从后往前遍历
这两个方法都接手两个参数：

1. 在每一项上调用的函数，有4个参数：前一个值，当前值，项的索引，数组对象。该函数返回的任何值都会作为第一个参数自动传给下一项。
2. 作为归并基础的初始值（可选）

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

var sum = values.reduce(function(prev,cur,index,array){
//第一次prev是1,cur是2；第二次prev是1+2=3，cur是3
    return prev+cur;
});
alert(sum);//15

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

var sum = values.reduceRight(function(prev,cur,index,array){
//第一次prev是5，cur是4；第二次prev是5+4=9，cur是3
    return prev+cur;
});
alert(sum);//15

5.3 Date类型

1、基本创建方法

Date用于获取时间，时间戳等

1. 创建，无参数则返回当前日期时间；若想获得特定日期和时间，要传入表示该日期的毫秒数（从UTC时间1970年1月1日午夜起至该日期止经过的毫秒数），一般都因地区而异。

var now = new Date();

2. Date.parse()接收一个表示日期的字符串参数，返回相应日期的毫秒数。其实可以省略Date.parse,后台会自动调用

var someDate = new Date(Date.parse("May 25,2004"));

3. Date.UTC()与上文构建值时使用不同的信息。
   参数分别是年份（必写）、基于0的月份（必写）、月中哪一天（1开始）、小时数（0-23）、秒和毫秒数。该方法也可以省略由后台自动调用

var y2k = new Date(Date.UTC(2000,0));

4. Date.now()是简化方法，返回调用这个方法时的日期和时间的毫秒数。

var start = Date.now();//获取开始时间

doSomething();//调用函数
//取得停止时间
var stop = Date.now(),
    result = stop - start;

如果浏览器不支持，可以用+操作符获取Date对象的时间戳

var start = +new Date();

doSomething();

var stop = +new Date(),
    result = stop - start;

2、继承的方法

1. toLocaleString() 返回时间
2. toString() 返回军用时间
3. valueOf() 可以比较日期值，2017年1月<2017年2月

5.4 RegExp类型

是支持正则表达式的一个借口，提供了最基本的和一些高级的正则表达式功能。

1、正则表达式

1. 字面量语法：/pattern/attributes
2. 创建 RegExp 对象的语法：new RegExp(pattern, attributes);
   参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
   参数 attributes 是一个可选的字符串，包含属性 “g”、“i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。

var pattern1 = /[bc]at/i;
//等价
var pattern2 = new RegExp("[bc]at","i");

3. 区别：字面量始终共享通一个RegExp实例，构造函数每次都创建新实例

var re = null,
    i;

for(i = 0;i<10;i++){
    re = /cat/g;
    re.test("catastrophe");
    //第一次调用找到cat，第二次调用从索引3开始测试到末尾未找到，第三次从头开始。。
}

for(i=0;i<10;i++){
    re = new RegExp("cat","g");
    re.test("catastrophe");
    //每次迭代都创建一个新实例，每次都true
}

2、 RegExp实例方法

1. exec():用于检索字符串中的正则表达式的匹配。

• 语法：RegExpObject.exec(string)
• 返回值：返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
• 数组内容：此数组的第 0 个元素是与正则表达式相匹配的文本，第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本（如果有的话），第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本（如果有的话），以此类推。
• 属性：index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。

2. test():检测一个字符串是否匹配某个模式

• 语法：RegExpObject.test(string)
• 返回值：如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。

3. toLocaleString()和toString()都返回正则表达式的字面量。

3、构造函数属性（略）

5.5 Function类型