《JavaScript高级程序设计》读书笔记（四）

引用类型之Array类型

Array 类型

ES数组的特性：
1. 数组的每一项可以保存任何类型的数据；
2. 数组的大小可以动态调整。

创建数组的方式：
1. 使用 Array 构造函数

var colors = new Array();// or 传递数组的项目数量var colors = new Array(20);// or 传递数组的每一项var colors = new Array("red", "blue", "green");// or 省略 new 操作符var colors = Array(3);

2.使用数组字面量表示法（推荐）

var colors = ["red", "blue", "green"];var names = [];// 不推荐数组最后一项加逗号// 在IE8及之前的浏览器会解析为 1,2,undefined// 其他浏览器解析为 1,2var values = [1, 2,];

注意：
1. 数组省略值的项默认为 undefined
2. 与对象一样，在使用数组字面量表示法时，也不会调用 Array 函数

读取/设置数组的值

1. 使用方括号并提供相应的基于数字索引
2. length 属性 - 在数组中，length 可读可写

var colors = ["red", "blue", "green"];alert(colors[0]);  // 显示第一项colors[2] = "black";  // 修改第三项colors[3] = "brown";  // 新增第四项alert(colors.length);  // 4colors.length = 2;  // 直接修改length的值alert(colors[2]);  // undefined

可利用 length 属性很方便地在数组末尾添加新项。

var colors = ["red", "blue", "green"];colors[colors.length] = "black";colors[colors.length] = "brown";

检测数组

1. instanceof 操作符
2. Array.isArray() 方法

对于一个网页、或者一个全局作用域而言，使用 instanceof 可以很方便地得到结果。但是，它假定只有一个全局执行环境。如果网页中包含多个框架，那实际上就存在两个以上不同的全局环境，从而存在两个以上不同版本的 Array 构造函数。如果从一个框架向另一个框架传入数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

为了解决这个问题，ES5新增了 Array.isArray() ，这个方法的目的是确定某个值到底是不是数组。

转换方法

1.toLocaleString() 方法
2.toString() 方法，返回由数组的每一项的字符串形式拼接而成的一个以逗号分隔的
3.valueOf() 方法，返回数组本身
4.join() 方法

var colors = ["red", "blue", "green"]; console.log(colors.toLocaleString()); // "red, blue, green"console.log(colors.toString()); // "red, blue, green"console.log(colors.valueOf()); // ["red", "blue", "green"]console.log(colors); // ["red", "blue", "green"]

注意：使用 alert() 弹出结果会有所不同，因为 alert() 要接收字符串参数，所以会在后台调用 toString() 方法，由此上述四种弹出结果一致。

对于 join() 方法，可以使用不同的分隔符来构建这个字符串。

console.log(colors.join("||")); // "red||blue||green"

如果数组中的某一项的值是 null 或者 undefined ，那么该值在上述四种方法中返回的结果以空字符串表示。

栈方法

栈是一种 LIFO（后进先出） 的数据结构。

1. push() 方法，接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后的数组长度。
2. pop() 方法，从数组末尾移除最后一项，减少数组的长度，并返回移除的项。

// 模拟栈var colors = ["red", "blue"];colors.push("green");alert(colors.length); // 3var item = colors.pop();alert(item); // "green"

队列方法

队列是一种 FIFO（先进先出）的数据结构。

1. shift() 方法，移除数组中的第一个项，并返回该项。
2. unshift() 方法，在数组的前端添加任意个项，并返回数组长度。

// 模拟队列var colors = ["red", "blue"];colors.push("green");alert(colors.length);  // 3var item = colors.shift();alert(item); // "red"

重排序方法

1. reverse() 方法，使数组项的顺序反转。
2. sort() 方法，默认情况下，这个方法按升序排列数组项。为了实现排序，sort() 方法会调用每个数组项的 toString() 转型方法，然后比较得到的字符串。

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

通常情况下，sort() 方法需要接收一个比较函数作为参数，根据这个比较函数指定排序方式。

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

对于数值类型或者其 valueOf() 方法会返回数值类型的对象类型，可以使用一个更简单的比较函数。

function compare(value1, value2){    return value2 - value1;}

操作方法

1. concat() 方法，基于当前数组的所有项创建一个新数组。这个方法先创建一个当前数组的副本，将接受到的参数统统以添加到副本的末尾，最后返回新构建的数组。
2. slice() 方法，基于当前数组中的一个或多个项创建一个新数组。可接收一个或两个参数，即要返回项的起始和结束位置（不包括结束位置的项）。在只有一个参数的情况下，返回从该参数指定位置开始到当前数组末尾的所有项。
3. splice() 方法，始终返回一个数组，该数组中包含从原数组中删除的项。
   1） 删除：接收两个参数，要删除的第一项的位置和要删除的项数。
   2） 插入：接收三个参数，起始位置，0（要删除的项数），要插入的项。
   3） 替换：接收三个参数，起始位置，要删除的项数，要替换的项。

// concat() 方法var colors = ["red", "blue", "green"];var colors2 = colors.concat("yellow", ["black", "brown"]);alert(colors);   // "red, blue, green"  不改变原来的数组alert(colors2);  // "red, blue, green, yellow, black, brown"// slice() 方法var colors = ["red", "blue", "green", "yellow", "purple"];var colors2 = colors.slice(1);var colors3 = colors.slice(1, 4);var colors4 = colors.slice(-2, -1); // 参数为负，从数组末尾开始alert(colors2); // "blue, green, yellow, purple"alert(colors3); // "blue, green, yellow"alert(colors4); // "purple" // splice() 方法var colors = ["red", "blue", "green"];var removed = colors.splice(0, 1);alert(colors); // "blue, green"alert(removed); // "red"removed = colors.splice(1, 0, "yellow", "orange");alert(colors); // "blue, green, yellow, orange"alert(removed); // "undefined"removed = colors.splice(1, 1, "red", "purple");alert(colors); // "green, red, purple, orange, blue"alert(removed); // "yellow"

位置方法

1. indexOf() 方法
2. lastIndexOf() 方法

这两个方法都接收两个参数：要查找的项和表示起点位置的索引（可选）。都返回要查找的项在数组中的位置，在没有找到的情况下返回-1

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];alert(numbers.indexOf(4));  // 3alert(numbers.lastIndexOf(4));  // 5alert(numbers.indexOf(4, 4)); // 5alert(numbers.lastIndexOf(4, 4)); // 3alert(numbers.indexOf(6));  // -1

迭代方法

1. every() 方法，对数组中的每一项运行给定函数，如果该函数对每一项都返回 true ，则返回 true。
2. filter() 方法，对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。
3. forEach() 方法，对数组中的每一项运行给定函数，无返回值。
4. map() 方法，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
5. 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);  // falsevar someResult = numbers.some(function(item, index, array){    return (item > 2);});alert(someResult);  // truevar filterResult = numbers.filter(function(item, index, array){    return (item > 2);});alert(filterResult);  // [3, 4, 5, 4, 3]var mapResult = numbers.map(function(item, index, array){    return (item * 2);});alert(mapResult);  // [2, 4, 6, 8, 10, 8, 6, 4, 2]

归并方法

1. reduce() 方法
2. reduceRight() 方法

这两个方法都会迭代所有的数组项，然后构建一个最终返回的值。reduce() 方法从数组第一项开始，reduceRight() 方法从数组最后一项开始。
这两个方法都接收两个参数：一个在每一项上调用的函数和作为归并基础的初始值（可选）。这些函数接收四个参数：前一个值，当前值，项的索引，数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。

var values = [1, 2, 3, 4, 5];var sum = values.reduce(function(prev, cur, index, array){    return (prev + cur);});alert(sum); // 15