《JavaScript高级程序设计（第3版）》第5章引用类型总结一

对象是某个特定引用类型的实例。新对象是使用 new 操作符后跟一个构造函数来创建的。

构造函数本身就是一个函数，只不过该函数是出于创建新对象的目的而定义的。

一、Object类型

创建 Object 实例有两种方法。即定义对象。

方法一：使用 new 操作符后跟 Object 构造函数。

var person = new Object();
person.name = 'Nicholas';
person.age = 29;
alert(person.name); // 'Nicholas'

方法二：使用 对象字面量 表示法。

注意：在通过对象字面量定义对象时，实际上不会调用 Object 构造函数。

// 对象字面量 表示方法一
var person = { // 这个左花括号表示一个表达式的开始
    name : 'Nicholas',
    age : 29
};
alert(person.name); // 'Nicholas'
console.log(person instanceof Object); // true

// 对象字面量 表示方法二
var person = {
    'name' : 'Nicholas',
    'age' : 29,
    5 : true    // 这个数值属性么会自动转化为字符串
};

// 对象字面量 表示方法三
// 如果留空其花括号，则可以定义只包含默认属性和方法的对象
var person = {};    // 与 new Object() 相同
person.name = 'Nicholas';
person.age = 29;

// example
// 对象字面量也是向函数传递大量可选参数的首选方式
function displayInfo(args) {
    var output = "";

    if (typeof args.name == "string") {
        output += "Name: " + args.name + "\n";
    }

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

    alert(output);
}

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

displayInfo({
    name: "Greg"
});

在JS中访问对象的属性有两种方式：

方式一：使用点表示法

alert(perosn.name);

方式二：使用方括号表示法，将要访问的属性以字符串的形式放在方括号中。

// 要访问的属性一字符串的形式放在方括号中
alert(perosn["name"]);   

使用方括号语法的主要优点是可以通过变量来访问属性。

var person = new Object();
person.name = 'Nicholas';
person.age = 29;

var propertyName = 'name';
alert(person[propertyName]);    // 'Nicholas'

二、Array类型

ES中数组的特点：

（1）数组的每一项可以保存任何类型的数据；

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

创建数组的方式有两种：

方式一：使用 Array 构造函数

当给 Array 构造函数传递一个参数时，如果传递的是数值，则会按照该数值创建包含给定项数的数组；而如果传递的是其他类型的参数，则会创建包含那个值的只有一项的数组。

var colors1 = new Array();
var colors2 = Array();    // 可以省略 new 操作符
var colors3 = new Array(20);    // 表示 length=20
var colors4 = new Array("red","blue");

var colors5 = new Array(20);
alert(colors5[0]);  // undefined
alert(colors5.length);   // 20
var colors6 = new Array('red', 'blue', 'green');
alert(colors6); //"red,blue,green"
alert(colors6.length);  // 3

方式二：使用 数组字面量 表示。

var colors = ['red', 'green', 'blue']; 
var name = [];  // 创建一个空数组
var values = [1,2,];    //不要这样！这样会创建一个包含2或3项的数组
var options = [,,,,,]; //不要这样！这样会创建一个包含5或6项的数组
alert(options.length);  //在chrome中显示 5

数组的 length 属性有一个特点——可读/写，通过设置这个属性，可以从数组的末尾移除或向数组中添加新项。

var colors = ['red', 'blue', 'green'];
colors.length = 2;
alert(colors[2]);   // undefined

// 如果将其 length 属性设置为大于数组项数的值，则新增的每一项都会取得 undefined 值。
var colors = ['red', 'blue', 'green'];
colosr.length = 4;
alert(colors[3]);   // undefined

2.1、检测数组

对于一个网页或者一个全局作用域，可以使用 instanceof 操作符进行检测。

ES5新增 Array.isArray() 方法。这个方法的目的是最终确定某个值到底是不是数组，不用管它是在哪个全局执行环境中创建的。

var arr = [1, 2];
console.log(arr instanceof Array);  // true
console.log(Array.isArray(arr));    // true

2.2、转换方法

所有对象都具有 toLocaleString()、toString()和valueOf()方法。

调用数组的 valueOf() 方法返回的还是数组本身。

调用数组的 toString() 方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。

var colors = ['red', 'blue', 'green'];
alert(colors.toString()); // 'red,blue,green'
alert(typeof colors.toString()); // 'string'
alert(colors.valueOf()); //返回的是数组
alert(typeof colors.valueOf()); // 'object'
alert(Array.isArray(colors.valueOf())); // true
alert(colors); //后台会调用toString()方法

当调用数组的 toLocaleString() 方法时，它会创建一个数组值的以逗号分隔的字符串（实际上和 toString() 方法返回的值是一样的）。

var person1 = {
    toLocaleString: function() {
        return 'Nikolaos';
    },

    toString: function() {
        return 'Nicholas';
    }
};

var person2 = {
    toLocaleString: function() {
        return 'Girgorios';
    },

    toString: function() {
        return 'Greg';
    }
};

var person = [person1, person2];
alert(person);      // 'Nicholas,Greg'
alert(person.toString());   // 'Nicholas,Greg'
alert(person.toLocaleString()); // 'Nikolaos,Girgorios',返回的是数组值

join() 方法可以使用不同的分隔符来构建字符串。该方法只接收一个参数，即用作分隔符的字符串，然后返回所有数组的字符串。

如果不给 join() 方法传入任何值，或者给它传入 undefined，则使用逗号作为分隔符。

var colors = ['red', 'green', 'blue'];
// 以逗号分隔显示
alert(colors.join(",")); // "red,green,blue"
// 以 | 分隔显示
alert(colors.join("|")); // "red|green|blue"

注意：如果数组中的某一项的值是 null 或者 undefined，那么该值在 join()、toLocaleString()、toStirng()和valueOf()方法返回的结果中以空字符串表示。

var arr2 = [1, , 2];
console.log(arr2.toString());  // '1, ,2'
console.log(arr2.join('|'));   // '1||2'

2.3、栈方法

栈：后进先出

push() 方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。

pop() 方法则从数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。

var colors = new Array(); // 创建一个数组
var count = colors.push('red', 'green');
alert(colors);  // "red,green"
alert(count);   // 2

count = colors.push('black');
alert(colors);  // "red,green,black"
alert(count);   // 3

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

2.4、队列方法

队列：先进先出，在列表的末端添加项，从列表的前端移除项。

shift() 方法能够移除数组中的第一个项并返回该项，同时将数组长度减1。

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

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

var item = colors.shift();
alert(item); // "red"
alert(colors.length); //2

unshift() 方法能在数组前端添加任意个项并返回数组的长度。

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

count = colors.unshift('black'); // "black,red,green"
alert(count); // 3
alert(colors);

var item = colors.pop();
alert(item); // "green"
alert(colors.length); // 2

2.5、重排序方法

reverse() 方法反转数组的顺序。

var value = [1,2,3,4,5];
value.reverse();
alert(value); // "5,4,3,2,1"

sort() 方法默认按升序排列数组项——即最小的值位于最前面，最大的值排在后面。

注意：sort() 方法会调用每个数组项的 toString() 转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort() 方法比较的也是字符串。

var values = [0, 1, 5, 10, 15];
// sort()方法会使用 toString() 把每个数组元素转化为字符串，
// 然后再进行比较，默认按照升序排列。
values.sort();
alert(values); // 0,1,10,15,5

sort() 方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。

• 当升序排列时：比较函数接收两个参数，如果第一个参数应该位于第二个参数之前则返回一个负数；如果两个参数相等则返回 0；如果第一个参数应该位于第二个参数之后则返回一个正数。

function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    }
    else if (value1 > value2) {
        return 1;
    }
    else {
        return 0;
    }
}

var values = [0,1,5,10,15,3,2];
values.sort(compare);
alert(values);

• 当降序排列时：

function compare(value1, value2) {
    if (value1 < value2) {
        return 1;
    }
    else if (value1 > value2) {
        return -1;
    }
    else {
        return 0;
    }
}

var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);  // "15,10,5,1,0"

注意：对于数值类型或者其 vlaueOf() 方法会返回数值类型的对象类型，可以使用一个更简单的比较函数，只要用第二个值减第一个值即可。

// 降序排列
function compare(value1, value2) {
    return value2 - value1;
}

var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);

5.2.5、操作方法

concat() 方法可以基于当前数组中的所有项创建一个新数组。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。

var colors = ['red', 'green', 'blue'];
alert('colors : ' + colors);

// 在没有给concat()方法传递参数时，
// 它只是复制当前数组并返回
var colors1 = colors.concat();
alert('colors1 : ' + colors1);

// 如果给concat()方法传入一个或多个数组，
// 则该方法会将这些数组中的每一项都添加到结果数组中
var colors2 = colors.concat(['black', 'brown']);
alert('colors2 : ' + colors2);  //"red,green,blue,black,brown"

// 如果给concat()方法传入的值不是数组，
// 则直接添加到数组的末尾
var colors3 = colors.concat(5);
alert('colors3 : ' + colors3); //"red,green,blue,5"

var colors4 = colors.concat(5, ['black', 'brown']);
alert('colors4 : ' + colors4); // "red,green,blue,5,black,brown"

slice() 方法能够基于当前数组的一个或多个项创建一个新数组。

slice() 方法可以接受一或两个参数，即要返回的起始和结束位置。

（1）当只有一个参数时，返回从该参数指定位置开始到当前数组末尾的所有项

（2）当有两个参数时，返回从起始位置开始的项到结束位置之前的所有项

注意：slice() 方法不会影响原始数组。

var colors = ['red', 'green', 'blue', 'yellow', 'purple'];
// 只有一个参数时，
// 返回从该参数指定位置开始到当前数组末尾的所有项。
var colors1 = colors.slice(1);
alert('colors1 : ' + colors1); //'green,blue,yellow,purple'

// 从起始位置到结束位置之间的项（不包括结束位置的项）
var colors2 = colors.slice(1, 4);
alert('colors2 : ' + colors2); //'green,blue,yellow'

注意：如果slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。例如，在一个包含5项的数组上调用slice(-2, -1)与调用slice(3, 4)得到的结果相同。如果结束位置小于起始位置，则返回空数组。

splice() 的主要用途是向数组的中部插入项（直接作用在原数组中），如下所示为3中使用方式：

• 删除：可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数。例如，splice(0, 2)会删除数组中的前两项。
• 插入：传入的参数分别为：起始位置、0（要删除的项数）、要插入的项。表示从起始位置开始插入参数。
• 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个参数：起始位置、要删除的项数、要插入的任意数量的项。插入的项数不必与删除的项数相等。例如splice(2,1,"red","green")会删除当前数组位置 2 的项，然后再从位置 2 开始插入字符串"red"和"green"。

注意：splice() 始终都会返回一个数组，该数组中包含从原始数组中删除的项（如果没有删除任何项，则返回一个空数组）。

var colors = ['red', 'green', 'blue'];
// 从数组索引0开始删除一个元素
var removed = colors.splice(0, 1);
alert('colors1 : ' + colors); // 'green,blue'
alert(removed);  // 'red'

// 从数组索引1开始，删除0个元素，并在索引1的位置插入参数
removed = colors.splice(1, 0, 'yellow', 'orange');
alert('colors : ' + colors); //'green,yellow,orange,blue'
alert(removed); // 空数组

// 从数组索引1开始，删除1个元素，然后添加输入的参数
removed = colors.splice(1, 1, 'red', 'purple');
alert('colors : ' + colors); // green,red,purple,orange,blue
alert(removed); // yellow

2.7、位置方法

查找元素在数组中的索引（第一个 === 匹配的元素索引）。

indexOf() 和 lastIndexOf()，这两个方法都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，indexOf() 方法从数组的开头（位置0）开始向后查找，lastIndexOf() 方法则从数组的末尾开始向前查找。没找到则返回 -1。

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

// 从数组的第一位置0开始查找
// 如果找到个元素 === 4,则返回索引位置
alert(numbers.indexOf(4));  // 3

// 从数组的最后一个开始查找
// 发现数组索引为5的元素 === 4,所以返回该索引
alert(numbers.lastIndexOf(4)); // 5
alert(numbers.lastIndexOf(4, 6)); // 5

// 要查找的元素为4,并且从数组索引为4的位置开始查找
alert(numbers.indexOf(4, 4)); // 5
// 要查找的元素为4
// 从数组索引为4的位置开始往前匹配查找
// 如果查找到该元素,则返回该元素在数组的索引。
alert(numbers.lastIndexOf(4, 4)); //3
alert(numbers.lastIndexOf(3, 2)); //2

var person = {name: 'Nicholas'};
var people = [{name: 'Nicholas'}];

var morePeople = [person];

alert(people.indexOf(person));  // -1
alert(morePeople.indexOf(person)); // 0

2.8、迭代方法

ES5中为数组定义的5个迭代方法，每个方法都接收两个参数：要在每一项上运行的函数和（可选）运行该函数的作用域对象——影响this的值。

• every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。
• some()：对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。

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

/*
 * 传入every()方法的函数的参数说明
 * item: 数组项的值
 * index: 该项在数组中的位置
 * array: 数组对象本身
 */
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

• filter()：对数组中的每一项运行给定函数，返回该函数会返回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]

• forEach()：对数组中的每一项运行给定函数。这个方法没有返回值。

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

// 本质上forEach()方法与for循环一样
var forEachResult = numbers.map(function(item, index, array) {
    // 执行某些操作
});

• map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

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]

注意：以上方法都不会修改数组中的包含的值。

2.9、归并方法

ES5新增的两个归并数组的方法：reduce() 和 reduceRight()。这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。其中 reduce() 从数组的第一项开始；reduceRight()，从数组的最后一项开始向前遍历。

这个两个方法都接收两个参数：一个在每一项上调用的函数和（可选）作为归并基础的初始值。

var values = [1,2,3,4,5];
/*
 * 传入reduce()方法的函数的参数
 * prev: 函数前面执行的最终值
 * cur: 当前值
 * index: 项的索引
 * array: 数组对象
 * 这个函数返回的任何值都会作为第一个参数自动传给下一个
 */
var reduceSum = values.reduce(function(prev, cur, index, array) {
    return prev + cur;
});
var reduceSum2 = values.reduce(function(prev, cur, index, array) {
    return prev + cur;
}, 2);

console.log(reduceSum); // 15
console.log(reduceSum2);

var reduceRightSum = values.reduceRight(function(prev, cur, index, array) {
    return prev + cur;
});

console.log(reduceRightSum); // 15

参考文献

[1] 《JavaScript高级程序设计（第3版）》

[2] 《JavaScript权威指南（第6版）》