JavaScript 数组学习笔记

创建数组的方式

ECMAScript数组的每一项可以保存可以保存任何数据类型的数据
JavaScript中创建数组有两种方法:

1. Array构造函数:
   
   • var colors = new Array()
   • var colors = new Array(20)创建长度为20的数组
   • var colors = new Array('red', 'blue', 'green') 创建一个包含3个字符串值的数组
   • 使用Array构造函数时也可以省略new操作符
2. 数组字面量表示法:
   
   • var colors = []
   • var colors = ['red', 'blue', 'green']

数组length属性

数组的length属性可读可写，可用通过设置这个属性，从数组末尾移除项或向数组中添加项

1. 移除项:

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

2. 添加项:

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

检测数组

• 对于一个网页，或者一个全局作用域，使用instanceof操作符就能判断数组

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

• 如果网页中包含多个框架，那实际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的Array构造函数，ECMAScript5新增辣Array.isArray()方法来解决这个问题

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

数组方法

转换方法

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

• 调用 toLocaleString() 和 toString() 方法会返回以逗号分隔数组中每个值的字符串。
• 调用 valueOf() 返回的还是数组。

    var colors = ["red", "blue", "greeb"]
    colors.toString()      //red,blur,greeb
    colora.valueOf()      // ["red", "blue", "greeb"]

• join() 方法，只接受一个参数作为，用作为分隔符，返回包含所有数组项的字符串。

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

栈方法

栈是一种LIFO(Last-In-First-Out,后进先出)的数据结构。栈中项的插入(叫做推入)和移除(叫弹出)，只发生在一个位置——栈的顶部(栈顶)。JavaScript为数组提供了 push() 和 pop() 方法实现类似栈的行为。

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

   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(pop)       // "black"
   alert(colors.length)     //2

队列方法

队列是一种FIFO(First-In-First-Out,先进先出)的数据结构。

• 正向队列，在队列的末端添加项，在队列的前端移除项。使用数组模拟正向队列需要使用到数组方法shift()，他能够移除数组的第一项并返回该项，同时将数组长度减1。结合使用shift()和push()方法，即可模拟正向队列。

    var colors = new Array()
    var count = colors.push("red", "green")
    alert(count)      //2
    var item = colors.shift()
    alert(item)           // "red"
    alert(colors.length)  //1

• 反向队列，与正向队列相反，即在数组前端添加项，在数组末端移除项。反向队列需要使用数组方法unshift()与shift()相反，它可以在数组前端添加任意个项并返回新数组的长度，结合使用unshift()和pop方法，即可模拟反向队列。

    var colors = new Array()
    var count = colors.unshift("red", "green")
    alert(count)        //2
    var item = colors.pop()
    alert(item)         // "green"
    alert(colors.length)    //1

重排序方法

数组中有两个可以直接用来重排序的方法：reverse()和sort()

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

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

• sort([fn])方法按升序排列数组项。sort([fn])方法会调用每个数组项的toString()方法，然后比较得到的字符串，确定如何排序。

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

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

• 如果第一个参数应该位于第二个之前则返回一个负数，
• 如果两个参数相等则返回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]
  values.sort(compare);
  alert(values)   //0,1,5,10,15

  //一个简化版的比较函数
  function compare(value1, value2){
    return value2 - value1
  }

操作方法

• 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

• slice([startIndex][,endIndex])方法，即切片方法，slice([startIndex][,endIndex])方法接收两个参数，切片的起始位置和结束位置，返回起始位置和结束位置之间的项，但不包括结束位置的项；如果不提供结束位置，将返回起始位置到数组末尾的所有项。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(startIndex[, deleteCount, insertItem...])方法，splice()主要用于向数组的中部插入项。splice()方法始终会返回一个包含从原始数组中删除的项的数组。有以下三种用法：

  1. 删除：提供两个参数，开始删除的位置和要删除的项数。

     var colors = ["red", "green", "blue"]
     var removed = colors.splice(0,1)
     alert(colors)   //green,blue
     alert(removed)  //red

  2. 插入：提供三个参数，开始删除的位置、要删除的项数、要插入的项。（如果要插入多个项，可以在传入第四个参数、第五个参数等等）

     var colors = ["red", "green", "blue"]
     var removed = colors.splice(1,0,"yellow", "orange")
     alert(colors)   //red,yellow,orange,green,blue
     alert(removed)  //[]

  3. 替换：替换和插入相当，只不过是在删除的项数，就会在删除过后插入，达到替换的效果。插入的项数不必要和删除的项数相等

     var colors = ["red", "green", "blue"]
     var removed = colors.splice(1,1,"yellow","orange")
     alert(colors)   //red,yellow,orange,blue
     alert(removed)  //green

位置方法:

• indexOf(item[,startIndex])从数组开头开始向后查找，返回查找到的第一个项的位置，查找不到返回-1，startIndex可以是负数

• lastIndexOf()从数组末端开始向前查找，返回查找到的第一个项的位置，查找不到返回-1，startIndex可以是负数

迭代方法：

ECMAScript5为数组定义了5个迭代方法，每个方法都接收两个参数：要在每一项上运行的函数和（可选的）运行该函数作用域对象。传入这些方法中的函数会接收3个参数：数组项的值，该项在数组中的位置和数组对象本身。**迭代方法不改变原始数组**

• every():对数组中的每一项运行特定的函数，如果该函数对每一项都返回true，则返回true

• filter():对数组中的每一项运行特定的函数，返回该函数会返回true的项组成的数组

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

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

• some():对数组中的每一项运行特定的函数，如果该函数对任一项返回true，则返回true

并归方法：

ECMAScript5新增了两个并归数组的方法：reduce()和reduceRight()。这两个方法都迭代数组的所有项，然后构建一个最终返回的值。其中reduce()方法从第一项开始遍历，reduceRight()方法从最后一项往前遍历。
这两个并归方法都接收两个参数：一个在每一项上调用的参数和（可选的）作为并归的初始值。传给reduce()和reduceRight()的函数接收4个参数：前一个值，当前值，项的引索和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项。

例子：求数组中所有项的和

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

​