javaScript高级程序设计学习笔记（5上）

1.Object类型 创建Object 实例的方式有两种。第一种是使用new 操作符后跟Object 构造函数，如下所示： var person = new Object(); person.name = "Nicholas"; person.age = 29;第二种是使用对象字面量表示法，如下所示： var person = { name : "Nicholas", age : 29 };一般来说，访问对象属性时使用的都是点表示法，不过，在JavaScript 也可以使用方括号表示法来访问对象的属性。在使用方括号语法时，应该将要访问的属性以字符串的形式放在方括号中，如下面的例子所示。 alert(person["name"]); //"Nicholas" alert(person.name); //"Nicholas" 从功能上看，这两种访问对象属性的方法没有任何区别。但方括号语法的主要优点是可以通过变量来访问属性，例如： var propertyName = "name"; alert(person[propertyName]); //"Nicholas" 2.Array 类型 ECMAScript 数组的每一项可以保存任何类型的数据。 创建数组的基本方式有两种。第一种是使用Array 构造函数，如下面的代码所示。 var colors = new Array(); 创建数组的第二种基本方式是使用数组字面量表示法。数组字面量由一对包含数组项的方括号表示，多个数组项之间以逗号隔开，如下所示： var colors = ["red", "blue", "green"]; // 创建一个包含3 个字符串的数组 var names = []; // 创建一个空数组 var values = [1,2,]; // 不要这样！这样会创建一个包含2 或3 项的数组 var options = [,,,,,]; // 不要这样！这样会创建一个包含5 或6 项的数组数组的length 属性很有特点——它不是只读的。因此，通过设置这个属性，可以从数组的末尾移除项或向数组中添加新项。请看下面的例子： var colors = ["red", "blue", "green"]; // 创建一个包含3 个字符串的数组 colors.length = 2; alert(colors[2]); //undefined（1）检测数组 ECMAScript 5 新增了Array.isArray()方法。这个方法的目的是最终确定某个值到底是不是数组，而不管它是在哪个全局执行环境中创建的。这个方法的用法如下。 if (Array.isArray(value)){ //对数组执行某些操作 }（2）转换方法 所有对象都具有toLocaleString()、toString()和valueOf()方法。其中，调用数组的toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。而调用valueOf()返回的还是数组。 var colors = ["red", "blue", "green"]; // 创建一个包含3 个字符串的数组 alert(colors.toString()); // red,blue,green alert(colors.valueOf()); // red,blue,green alert(colors); // red,blue,green当调用数组的toLocaleString()方法时，它也会创建一个数组值的以逗号分隔的字符串。而与前两个方法唯一的不同之处在于，这一次为了取得每一项的值，调用的是每一项的toLocaleString()方法，而不是toString()方法。 var person1 = { toLocaleString : function () { return "Nikolaos"; }, toString : function() { return "Nicholas"; } }; var person2 = { toLocaleString : function () { return "Grigorios"; }, toString : function() { return "Greg"; } }; var people = [person1, person2]; alert(people); //Nicholas,Greg alert(people.toString()); //Nicholas,Greg alert(people.toLocaleString()); //Nikolaos,Grigorios如果使用join()方法，则可以使用不同的分隔符来构建这个字符串。join()方法只接收一个参数，即用作分隔符的字符串，然后返回包含所有数组项的字符串。 （3）栈方法

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

ECMAScript 为数组专门提供了push()和pop()方法，以便实现类似栈的行为。请看下面的例子：

var colors = new Array(); // 创建一个数组 var count = colors.push("red", "green"); // 推入两项 alert(count); //2 count = colors.push("black"); // 推入另一项 alert(count); //3 var item = colors.pop(); // 取得最后一项 alert(item); //"black" alert(colors.length); //2（4）队列方法 队列数据结构的访问规则是FIFO（First-In-First-Out，先进先出）。结合使用shift()和push()方法，可以像使用队列一样使用数组。 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（5）重排序方法 reverse()和sort()。 reverse()和sort()方法的返回值是经过排序之后的数组。 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); //0,1,5,10,15 （6）操作方法 concat()方法可以基于当前数组中的所有项创建一个新数组。 slice()，它能够基于当前数组中的一或多个项创建一个新数组。注意，slice()方法不会影响原始数组。请看下面的例子： 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 splice()的主要用途是向数组的中部插入项，但可以实现插入、删除和替换。 删除：可以删除任意数量的项，只需指定2 个参数：要删除的第一项的位置和要删除的项数。例如，splice(0,2)会删除数组中的前两项。  插入：可以向指定位置插入任意数量的项，只需提供3 个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。例如，splice(2,0,"red","green")会从当前数组的位置2 开始插入字符串"red"和"green"。  替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,"red","green")会删除当前数组位置2 的项，然后再从位置2 开始插入字符串"red"和"green"。 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"); // 插入两项，删除一项 alert(colors); // green,red,purple,orange,blue alert(removed); // yellow，返回的数组中只包含一项 （7）位置方法 indexOf()和lastIndexOf()。 这两个方法都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符。 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: "Nicholas" }; var people = [{ name: "Nicholas" }]; var morePeople = [person]; alert(people.indexOf(person)); //-1 alert(morePeople.indexOf(person)); //0 （8）迭代方法 ECMAScript 5 为数组定义了5 个迭代方法。  every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。  filter()：对数组中的每一项运行给定函数，返回该函数会返回true 的项组成的数组。  forEach()：对数组中的每一项运行给定函数。这个方法没有返回值。  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 filter()函数： 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] 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] forEach()函数：

var numbers = [1,2,3,4,5,4,3,2,1]; numbers.forEach(function(item, index, array){ //执行某些操作 }); （9）归并方法

ECMAScript 5 新增了两个归并数组的方法：reduce()和reduceRight()。reduce()方法从数组的第一项开始，逐个遍历到最后。而reduceRight()则从数组的最后一项开始，向前遍历到第一项。 使用reduce()方法可以执行求数组中所有值之和的操作，比如：

var values = [1,2,3,4,5]; var sum = values.reduce(function(prev, cur, index, array){ return prev + cur; }); alert(sum); //15 第一次执行回调函数，prev 是1，cur 是2。第二次，prev 是3（1 加2 的结果），cur 是3（数组的第三项）。这个过程会持续到把数组中的每一项都访问一遍，最后返回结果。 reduceRight()的作用类似，只不过方向相反而已。来看下面这个例子。 var values = [1,2,3,4,5]; var sum = values.reduceRight(function(prev, cur, index, array){ return prev + cur; }); alert(sum); //15 在这个例子中，第一次执行回调函数，prev 是5，cur 是4。当然，最终结果相同，因为执行的都是简单相加的操作。