JS中的引用类型——Array 类型

一、JS中的数组类型与其他语言的区别

1. JavaScript 数组的每一项可以保存任何类型的数据。也就是说，可以用数组的第一个位置来保存字符串，用第二位置来保存数值，用第三个位置来保存对象，等等。
2. JavaScript 数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。
3. JavaScript 数组的 length 属性很有特点——它不是只读的。因此，通过设置这个属性，可以从数组的末尾移除项或向数组中添加新项。

二、创建数组的方法

1. 使用 Array 构造函数；

   var colors = new Array(); // new 可以省略
   var colors = new Array(20); // 创建 length 值为 20 的数组
   var colors = new Array("red", "blue", "green"); // 创建了一个包含 3 个字符串值的数组

2. 使用数组字面量表示法。数组字面量由一对包含数组项的方括号表示，多个数组项之间以逗号隔开。

   var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
   var names = []; // 创建一个空数组

   注意： 对于var options = [,,,,,]; 该数组而言，IE8及其以下浏览器与其他现代浏览器解析结果不同。

   1. 该行代码可能会创建包含 5 项的数组（在 IE9+、 Firefox、 Opera、Safari 和 Chrome 中），也可能会创建包含 6 项的数组（在 IE8 及更早版本中）。
   2. 在像这种省略值的情况下，每一项都将获得 undefined 值；这个结果与调用 Array 构造函数时传递项数在逻辑上是相同的。但是由于 IE 的实现与其他浏览器不一致，因此我们强烈建议不要使用‘数组字面量表示法’这种语法。

与对象一样，在使用数组字面量表示法时，也不会调用 Array 构造函数（Firefox 3及更早版本除外）。

var colors = ["red", "blue", "green"]; // 定义一个字符串数组
alert(colors[0]); // 显示第一项
colors[2] = "black"; // 修改第三项
colors[3] = "brown"; // 新增第四项

// 利用 length 属性也可以方便地在数组末尾添加新项
var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
colors[colors.length] = "black"; //（在位置 3）添加一种颜色
colors[colors.length] = "brown"; //（在位置 4）再添加一种颜色

三、相关方法

1. 判断一个对象是不是数组；
   在ECMAScript 3中，对于一个网页，或者一个全局作用域而言，使用 instanceof 操作符就能得到满意的结果。 但是，instanceof 操作符的问题在于，它假定只有一个全局执行环境。如果网页中包含多个框架，那实际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的 Array 构造函数。如果你从一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

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

   注意：以上代码要返回 true， value 必须是一个数组，而且还必须与 Array 构造函数在同个全局作用域中。（别忘了， Array 是 window 的属性。）如果 value 是在另个 frame 中定义的数组，那么以上代码就会返回 false。

   为了解决这个问题， ECMAScript 5 新增了 Array.isArray()方法。这个方法的目的是最终确定某个值到底是不是数组，而不管它是在哪个全局执行环境中创建的。

   支持 Array.isArray()方法的浏览器有 IE9+、 Firefox 4+、 Safari 5+、 Opera 10.5+和 Chrome。

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

2. 转换方法
   数组继承的 toLocaleString()、 toString()和 valueOf()方法，在默认情况下都会以逗号分隔的字符串的形式返回数组项。

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

   var colors = ["red", "green", "blue"];
   alert(colors.join(","));    // red,green,blue
   alert(colors.join("||"));   // red||green||blue

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

3. 栈方法
   栈是一种“后进先出（LIFO）”的数据结构，操作都在末尾。

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

4. 队列方法
   队列是一种“先进先出（FIFO）”的数据结构，队列在列表的末端添加项，从列表的前端移除项。

   1. shift() 方法
      移除数组中的第一个项并返回该项，同时将数组长度减 1。结合使用 shift()和 push()方法，可以像使用队列一样使用数组。
      参数： 无
      返回值： 数组被移除的第一项
   2. unshift() 方法
      在数组前端添加任意多个项并返回新数组的长度。同时使用 unshift()和 pop()方法，可以从相反的方向来模拟队列。
      参数： 要从开头推入的任意数量的参数
      返回值： 新数组的长度

5. 重排序方法

   1. reverse() 方法
      反转数组项的顺序。
      参数： 无
      返回值： 反转后的数组

   2. sort() 方法
      对数组进行排序，在默认情况下，按升序排列数组项。
      原理：为了实现排序， sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串。
      参数： 可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。
      返回值： 排序后的数组

      比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。

   // 比较函数，升序排列
   function compare(value1, value2) {
       if (value1 < value2) {
           return -1;
       } else if (value1 > value2) {
           return 1;
       } else {
           return 0;
       }
   }

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

   // 更简便的比较函数
   function compare(value1, value2){
       return value2 - value1;
   }

6. 操作方法

   1. concat() 方法
      基于当前数组中的所有项创建一个新数组（原数组项不变）。
      参数：需要在原数组基础上添加的项
      返回值： 新数组

   2. slice() 方法
      基于当前数组中的一或多个项创建一个新数组（原数组项不变）。
      参数：一或两个参数，即要返回项的起始和结束位置。

      1. 一个参数的情况， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。
      2. 两个参数的情况，该方法返回起始和结束位置之间的项，但不包括结束位置的项。
      3. 如果 slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。例如，在一个包含 5 项的数组上调用 slice(-2,-1)与调用 slice(3,4)得到的结果相同。如果结束位置小于起始位置，则返回空数组。

      返回值： 新数组

   3. splice() 方法的主要用途是向数组的中部插入项，但使用这种方法的方式则有如下 3 种。

      1. 删除： 可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。

         splice(0,2); // 会删除数组中的前两项。

      2. 插入: 可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。
         如果要插入多个项，可以再传入第四、第五，以至任意多个项。

         splice(2,0,"red","green");  // 从当前数组的位置 2 开始插入字符串"red"和"green"

      3. 替换: 可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。

         splice (2,1,"red","green");  // 删除当前数组位置 2 的项，然后再从位置 2 开始插入字符串"red"和"green"

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

7. 位置方法
   在比较第一个参数与数组中的每一项时，会使用全等操作符。

   1. indexOf() 方法
      从数组开头开始寻找查找项
      参数：1、要查找的内容；2、查找开始位置的索引[可选]
      返回值：查找项在数组中的位置，或者 -1（未找到）
   2. lastIndexOf() 方法
      从数组末尾开始寻找查找项
      参数：1、要查找的内容；2、开始位置索引[可选]
      返回值：查找项在数组中的位置，或者 -1（未找到）

   支持它们的浏览器包括 IE9+、 Firefox 2+、 Safari 3+、 Opera 9.5+和 Chrome。

8. 迭代方法
   提供了5个方法：

   1. every() 方法
      对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回 true
      参数： 1、要在每一项上运行的函数（该有三个参数：当前项item，当前项索引index，原数组array）； 2、运行该函数的作用域对象——影响 this 的值[可选]
      返回值： Boolean值，原数组必须所有项都符合every方法条件才为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

   2. some() 方法
      对数组中的每一项运行给定函数，如果该函数对任一项返回 true，则返回 true
      参数： 1、要在每一项上运行的函数（该有三个参数：当前项item，当前项索引index，原数组array）； 2、运行该函数的作用域对象——影响 this 的值[可选]
      返回值： Boolean值，原数组只要有一项符合some方法条件即为true

      var numbers = [1,2,3,4,5,4,3,2,1];
      var someResult = numbers.some(function(item, index, array){
          return (item > 2);
      });
      alert(someResult); //true

   3. filter() 方法
      对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组
      参数： 1、要在每一项上运行的函数（该有三个参数：当前项item，当前项索引index，原数组array）； 2、运行该函数的作用域对象——影响 this 的值[可选]
      返回值： 原数组符合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]

   4. map() 方法
      对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
      参数： 1、要在每一项上运行的函数（该有三个参数：当前项item，当前项索引index，原数组array）； 2、运行该函数的作用域对象——影响 this 的值[可选]
      返回值： 数组每一项执行方法后组成的新数组

      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]

   5. forEach() 方法
      对数组中的每一项运行给定函数。这个方法没有返回值，本质上与使用 for 循环迭代数组一样。
      参数： 1、要在每一项上运行的函数（该有三个参数：当前项item，当前项索引index，原数组array）； 2、运行该函数的作用域对象——影响 this 的值[可选]
      返回值： 无

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

   支持这些迭代方法的浏览器有IE9+、 Firefox 2+、 Safari 3+、 Opera 9.5+和 Chrome。

9. 归并方法
   ECMAScript 5 新增了两个归并数组的方法：

   1. reduce()方法
      从数组的第一项开始，逐个遍历到最后。迭代数组的所有项，然后构建一个最终返回的值。
      参数： 1、在每一项上调用的函数（该函数有4个参数：前一个值、当前值、项的索引和数组对象）；2、作为归并基础的初始值[可选]
      返回值： 执行函数后的值
      注意： 参数1的这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

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

   2. reduceRight()方法
      从数组的最后一项开始，向前遍历到第一项。迭代数组的所有项，然后构建一个最终返回的值。
      参数： 1、在每一项上调用的函数（该函数有4个参数：前一个值、当前值、项的索引和数组对象）；2、作为归并基础的初始值[可选]
      返回值： 执行函数后的值
      注意： 参数1的这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

   支持这两个归并函数的浏览器有 IE9+、 Firefox 3+、 Safari 4+、 Opera 10.5 和 Chrome。