JavaScript之数组方法（Array对象属性）

栈方法

JavaScript数组也提供了一种 让 数组的行为 像其它数据结构的方法，数组也可以像栈一样，栈是一种 限制插入和删除的数据结构，
栈是一种后进先出的数据结构，最新添加的内容最早移除。

栈中的操作分别是插入和移除，只发生在栈的顶部，push()方法（插入）和pop()方法（移除）。

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

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

var colors ＝ new Array();
var count ＝ colors.push("red", "blue"); //为数组依次插入两个值red,blue
alert(count); //返回count的长度为2

count ＝ colors.push("black"); //再在数组末尾插入一个项black
alert(count); //返回count的长度为3

var item ＝ colors.pop(); //从数组末尾移除一个项
alert(item); //移除的项是black，返回black
alert(colors.length); // 此时数组的长度为2

也可以将栈与其它数组一起使用：

var colosrs ＝ ["red", "blue"];
colors.push("yellow");
alert(colors); //red,blue,yellow
colors[3] ＝ "orange";
alert(colors.length); //返回4
alert(colors); //red,blue,yellow,orange

var item ＝ colors.pop(); //移除数组末尾的项
alert(item); //返回orange
alert(colors); //red,blue,yellow

队列方法

栈方法是  后进先出 的数据结构，而 队列方法则是 先进先出 的数据结构， 队列在列表的末端添加项，在列表的前端移除项。

push()方法是从末端添加项并返回数组长度，而shift()则是移除列表的第一项并返回该项。

var colors ＝ new Array();
var count ＝ colors.push("red", "blue"); //向数组末端依次添加两个项。
alert(count); //返回red,blue
alert(colors); //返回 red,blue
alert(colors.length); //返回2

colors[2] ＝ "yellow"; //向数组添加一项yellow
alert(colors.length); //返回3
alert(colors); //返回 red,blue,yellow

var item ＝ colors.shift(); //移除数组前端的第一项
alert(item); //返回移除的项red
alert(colors.length); //返回2
alert(colors); //blue yellow

从前端第一项移除数据用shift()方法，那么从前端插入数据则用unshift()方法，pop()方法从末尾移除数据。


push()和shift()是正向队列方法，unshift()和pop()是反向队列方法。

栈方法与队列方法的区别：


栈只有一个进口或出口，后进先出的数据结构，最后一个进去，第一个出来。有push()方法（插入数据）和pop()方法（移除数据）。


队列各有一个进口和出口，先进先出的数据结构，第一个进去，第一个出来，


push()和shift()正向队列方法，unshift()和pop()反向队列方法。

重新排序方法

数组中已经存在两个可以用来排序的方法：reverse()和sort()

reverse()方法反向显示数组的排列顺序：

var values ＝ [1, 2, 3, 4]; //数组元素的原顺序
values.reverse(); //数组反向排序
alert(values); //返回4,3,2,1

但这个方法不灵活。

sort()方法默认是升序排序的，即最小值在最前端，最大值在最后端。

为了实现真正意义上的排序，sort()可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。

比较函数接收两个参数，如果第一个参数应位于第二个参数前面，则返回负值，如果第一个参数与第二个参数相等，则返回0，如果第一个参数位于第二个参数后面，则返回1，这是升序排序。如果是降序，则相反。

比较函数为：升序排序

function bjhs(value1,value2) {
    if(value1 < value2) {
        return －1; //返回负数，value1在value2前面
    } else if(value1 > value2) {
        return 1; //返回1，value1在value2后面
    } else {
        return 0; //返回0，value1与value2相等
    }

}

完整sort()y方法排序代码：

function bjhs(value1,value2) {
    if(value1 < value2) {
        return -1; //返回负数，value1在value2前面
    } else if(value1 > value2) {
        return 1; //返回1，value1在value2后面
    } else {
        return 0; //返回0，value1与value2相等
    }

}

var values ＝ [0, 1, 3, 4, 2, 5]; //这个随机的顺序
values.sort(bjhs); //将比较函数作为参数传入sort()方法。

alert(values);//返回 0,1,2,3,4,5 升序排列

降序比较函数：

function bjhs(value1,value2) {
    if(value1 < value2) {
        return 1; //返回1，value1在value2后面，为降序
    } else if(value1 > value2) {
        return -1; //返回-1，value1在value2前面
    } else {
        return 0; //返回0，value1与value2相等
    }

}

如果只是想反向显示数组元素，用reverse()方法即可，如果想将数组元素按升序或者降序排序的话，用sort()并将比较函数作为参数传入sort()方法。

操作方法

concat()方法

concat()方法可以基于当前数组的 所有项 创建一个副本，也就是说这个方法会先创建当前数组的一个副本，然后将接收到的内容添加到这个副本的末尾。


concat()的参数可以是一个值，或是一个数组，也可以没有参数，在没有参数的情况下，只是将当前的数组创建一个副本。


注：concat()不会影响到原数组

var colors = ["red", "blue", "yellow"]; //定义一个数组
var colors1 = colors.concat("orange", ["black", "white"]); //创建一个colors的副本，并把参数添加到colors的末尾

alert(colors); //red,blue,yellow 这是原数组，concat()方法不会改变原数组。
alert(colors1); //red,blue,yellow,orange,black,white 将concat()接收到的参数添加到副本末尾。

var colors2 = colors.concat(); //concat()不接收任何参数，表示只是创建一个colors的副本。

alert(colors2); //red,blue,yellow 只是一个副本

创建一个数组副本，根据所传入到concat()方法的参数添加到副本的末尾，参数可以是一个值，也可以是一个数组，甚至可以没有参数，没有参数的情况下，就只是一个副本。

slice()方法

slice()方法能够基于当前数组中的 一个或多个项 创建一个新数组，slice()可以接收两个参数，分别表示起始位置的索引和结束位置的索引。


当接收一个参数时，slice()方法返回从该参数指定的位置（索引）到当前数组末尾的所有项。


当接收两个参数时，slice()方法返回起始位置和结束位置之间的项--但不包含结束位置的项。


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

var colors = ["red", "blue", "green", "yellow", "purple"];
var colors1 = colors.slice(2); //一个参数，返回从索引为2的位置到当前数组末尾的所有项
var colors2 = colors.slice(1,4); //两个参数，返回从索引1和索引4之间的项，但不包含索引4位置的项

alert(colors1); //green,yellow,purple
alert(colors2); //blue,green,yellow  

alert(colors); //red,blue,green,yellow,purple  不会影响原数组

注：如果结束位置索引小于起始位置索引，则返回 空数组。

splice()方法

数组可以通过splice()方法来进行插入、删除、替换操作。

• 删除：可以删除任意数量的项。接收两个参数：要删除的第一项的位置（索引）和要删除的项数。如果只有一个参数，则表示 删除从该索引位置到数组末尾之间的所有项。
• 插入：可以插入任意数量的项。接收三个参数：起始位置（索引）、0（要删除的项数）、插入的项。可以插入多个项。从起始位置插入。
• 替换：可以替换任意数量的项。接收三个参数：起始位置（索引）、要删除的项数、要插入的任意数量的项。替换就是删除与插入的组合。

删除数组项：

<!doctype html>  
<html>  
  <head>  
    <meta charset="utf-8">  
    <title>JavaScript</title>  
  </head>  
  <body>  
      
    
  <script>  
        
      var arr = [1, 2, 3, 4, 5];
      var a = arr.splice(1, 3); //从索引1开始，删除3项
      console.log(arr); //1,5
      
      //此时数组中还有[1, 5]
      var b = arr.splice(0); //从索引0开始，删除所有项
      console.log(arr); //[] 空数组
        
  </script>  
  </body>  
</html>  

插入数组项和替换数组项：

<!doctype html>  
<html>  
  <head>  
    <meta charset="utf-8">  
    <title>JavaScript</title>  
  </head>  
  <body>  
      
    
  <script>  
        
      var arr = [1, 2, 3, 4, 5];
      var a = arr.splice(1, 0, 6, 7); //插入数组项
      console.log(arr); //1,6,7,2,3,4,5

      var b = arr.splice(2, 0);
      console.log(arr); //1,6,7,2,3,4,5

      var c = arr.splice(2, 6, 7); //替换
      console.log(arr); //1,6,7
      
        
  </script>  
  </body>  
</html>  

位置方法（查找方法）

位置方法： indexOf()和 lastIndexOf()。这两个方法都接收两个参数： 要查找的项和（可选的） 表示查找起点的索引。查找到第一个为止。第二个参数只是作为一个起点。

indexOf()表示从数组开头开始查找，返回 指定字符 第一次出现的索引。

lastIndexOf()表示从数组末尾开始查找，返回 指定字符 最后一次出现的位置索引。

当只有一个参数时，表示要查找的项，且从数组开头（索引0）开始查找或数组末尾查找。

返回查找项的位置，没有查找则返回-1，在查找过程中，是第一个参数与数组中的项逐一比较，使用的是全等操作符，也就是说，比较的过程中，是要求类型和值都是相等的。

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

console.log(arr.indexOf(3)); //返回2
console.log(arr.indexOf(3, 1)); //返回2

console.log(arr.indexOf(2)); //返回1
console.log(arr.indexOf(2, 0)); //返回1
console.log(arr.indexOf(2, 2)); //返回5 查找起点变成了索引为2的位置，往后查找2的位置为索引5

第二个参数只是作为查找的起点。

迭代方法

迭代方法可以接收两个参数： 要在第一项上运行的函数和 运行函数的作用域对象-影响this值。

传入方法的函数有三个参数： 数组项的值、 该项在数组中的位置和 数组对象本身。

常见的4个迭代方法： 检查数组的每个元素是否符合条件

1、every(): 对数组中每一项运行 给定函数，如果该函数对 每一项 都返回true,则该方法返回true。

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

3、filter()：对数组中的每一项运行 给定函数，返回 该函数 返回true的项 组成的数组。

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

5、forEach()：没有返回值，主要用于遍历数组、迭代数组。

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

//对每一项运行 给定函数 ，判断是否每一项都大于2，若每一项都大于2，返回true。
var everyResult = arr.every(function(item, index, array) {return (item > 2);});
console.log(everyResult); //返回false 显然不是每一项都大于2

//对每一项运行 给定函数，判断是否任一项有大于2的，若有至少一项大于2，返回true
var someResult = arr.some(function(item, index, array) {return (itme > 2);});
console.log(someResult); //返回true 显然有大于2的项

//对每一项运行 给定函数， 返回 由大于2的项 组成的数组
var filterResult = arr.filter(funcntion(item, idnex, arry) {return (item > 2)});
console.log(filterResult); //返回3，4，5，4，3 这些都大于2的项

//返回 每次 函数调用结果组成的数组
var mapResult = arr.map(function(item, index, array) {return (item + 2)});
console.log(mapResult); //返回3，2，5，6，7，6，5，4 这些都是每次函数调用的结果组成的数组

用forEach()方法遍历数组：

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

arr.forEach(function (item, index, array) {
    console.log(item); //1,2,3,4,5
});

并归方法

reduce()和 reduceRight()这个两个方法会 迭代数组的所有项，然后构建一个最终返回的值。

reduce()是从数组的第一项开始，逐个遍历到最后，reduceRight()是数组的最后一项开始，向前遍历到第一项。

reduce()和reducyRight()接收两个参数： 参数每一项上调用的函数和（可选）缩小基础的初始值。

每一项调用的 函数接收四个参数： 前一个值，当前值，当前项的索引，数组对象。

第一次迭代发生在数组的 第二项上，因 此第一个参数是数组的第一项，第二个参数是数组的第二项。

这个 函数返回的任何值都会 作为第一个参数自动传给下一项。

如：用reduce()方法执行数组中所有值之和的操作：

var values ＝ [1, 2, 3, 4, 5];

//求数组中所有值的和，
var sum ＝ values.reduce(function(prev, cur, index, array){return prev + cur;});

console.log(sum);// 15

第一次执行构造函数，prev是1，cur是2。第一次迭代发生在数组的第二项上即cur是2，
第二次prev是3（1加2的结果，将返回的值作为第一个参数），cur是3（第三项）。

这个过程会把数组中的所有项遍历完，最后返回结果即15。

fill()方法

fill()方法的作用是用一个固定值填充（替换）数组中的每一项。固定值作为fill()参数传入，用双引号括起来。

格式：arr.fill("abc");

var arr ＝ ["red", "blue", "yellow", "black"];

console.log(arr); //red,blue,yellow,black

console.log(arr.fill("orange")); //orange,orange,orange,orange

以上用‘orange’全部替换了arr数组中所有的元素。

注：使用fill()方法时，原数组必须有元素，或者空元素也行，但不能为空数组。

当数组为空数组时：

var arr ＝ [];

console.log(arr.fill("good")); //输出为空，什么也没有

当数组中有空元素时：

var arr ＝ [""];

console.log(arr.fill("good")); //输出good

当有两个或以上的空元素时，输出有两个或以上的"good"。

find()方法

find()方法返回 传入一个函数作为参数 且 第一个符合函数条件的 元素值。（因为可能有很多都符合某个函数，这里只返回第一个符合条件的元素值）

find()的参数为一个函数。

var arr ＝ [1, 2, 4, 10, 20, 30];

function Bj(age) {
    return age >＝9; //返回大于等于9的数值
}

console.log(arr.find(Bj)); //返回10，在arr数组中，符合大于等于9的数有10，20，30，find()方法返回第一个符合条件的元素值，所以是10

在arr数组中，符合大于等于9的数有10，20，30，find()方法返回 第一个 符合条件的元素值，所以是10