JavaScript数组和循环详解           这篇文章主要介绍了JavaScript数组和循环详解,本文讲解了循环遍历数组、按顺序存储和访问值、以相反的顺序存储和访问值、在数组中搜索等内容,需要的朋友可以参考下    

          数组是元素的一个有序组合。在JavaScript中，数组可以使用正式的对象表示法来创建，或者可以使用直接量表示法来初始化。

 

代码如下:
var arrObject = new Array("val1", "val2"); // 作为对象的数组
var arrLiteral = ["val1", "val2"]; // 数组直接量

 

　　对于开发者来说，这没有区别：在直接量和对象上都可以调用一个Array方法。对于JavaScript引擎来说，每次访问数组直接量的时候，必须重新解释它，特别是在一个函数中使用它的时候。

　　使用new运算符来创建一个新的Array对象：

 代码如下:
var arrObject = new Array();
也可以创建带有某些值的一个新数组：
代码如下:
var arrObject = new Array("val1", "val2");

 

　　JavaScript中的数组是从0开始索引的，这意味着，第一个元素的索引是0，最后一个元素是数组的长度减去1。

1、循环遍历数组

　　问题：想要很容易地访问数组的所有元素。

　　解决方案：

　　要访问一个数组，最常用的方法是使用for循环：

代码如下:
<script type="text/javascript">
var animals = new Array("cat", "dog", "whale", "seal");
var animalString = "";
for (var i = 0; i < animals.length - 1; i++) {
animalString += animals[i] + " ";
}
alert(animalString);
</script>

 

　讨论：

　　for循环可以用来访问数组的每一个元素。数组从0开始，而且数组属性length用来设定循环结束。

2、按顺序存储和访问值

　　问题：想要以这样一种方式来存储值，可以按照存储它们的方式来顺序访问值；

　　解决方案：

　　要按照接受值的顺序来存储和访问值，创建一个先进先出（FIFO）的队列。使用JavaScript Array对象的push方法，向队列添加项，并且用shift来获取项：

代码如下:
<script type="text/javascript">
// 创建新的数组
var queue = new Array();

 

// 压入3个条目
queue.push("first");
queue.push("second");
queue.push("third");

// 获取两个条目
alert(queue.shift());
alert(queue.shift());
alert(queue);
</script>

 

讨论：

　　Array push方法创建一个新的数组元素，并且将其添加到数组的末尾：

 

代码如下:
queue.push("first");
每次压入一个元素，数组元素的计数自增。

 

　　Array shift方法从数组前面提取数组元素，将其从数组中删除，并且返回该元素：

 

 代码如下:
var elem = queue.shift();
对于每一个shift操作的元素，数组元素会自减，因为shift除了返回该项，还会修改数组。

 

3、以相反的顺序存储和访问值

　　问题：想要以一种方式来存储值，即以相反的顺序访问值，先访问最近存储的值，也就是一个后进先出（LIFO）的栈。

　　解决方案：

　　要以相反的顺序存储值，创建一个LIFO栈。使用JavaScript Array对象的push方法来想栈添加项，使用pop方法来获取项：

代码如下:
<script type="text/javascript">
// 创建新的数组
var stack = new Array();

 

// 压入3个条目
stack.push("first");
stack.push("second");
stack.push("third");

// 弹出两个条目
alert(stack.pop()); // 返回第三个条目
alert(stack.pop()); // 返回第二个条目
alert(stack); // 返回第一个条目
</script>

讨论：

 

　　栈也是一个数组，其中每个新添加的元素位于栈的顶部，并且按照后进先出的顺序获取。

　　Array push方法创建一个新的元素，并将其添加到数组的尾部：

 代码如下:
stack.push("first");
每次压入元素的时候，数组元素的计数都会自增。

 

　　Array pop方法从数组的尾部提取数组元素，将其从数组中移走，并返回元素：

代码如下:
var elem = stack.pop();

 

每次弹出一个元素的时候，数组元素计数会自减，因为弹出也修改了数组。

4、在数组中搜索

　　问题：想要在数组中搜索一个特定值，如果找到的话，获取该数组元素的索引。

　　解决方案：

　　使用新的（ECMAScript 5）Array对象方法indeOf和lastIndexOf：

代码如下:
<script type="text/javascript">
var animals = new Array("dog", "cat", "seal", "elephant", "lion");
alert(animals.indexOf("elephant")); // 打印出 3
alert(animals.indexOf("seal", 2)); // 打印出 2
</script>

 

尽管浏览器中有时候对indexOf和lastIndexOf都是支持的，但是，这只是ECMAScript 5的版本中正式化了。这两个方法都接受一个搜索值，然后，将其与数组中的每个元素比较。如果找到了该值，两个方法都返回该数组元素的一个索引。如果没有找到值，返回-1.indexOf返回找到的第一个元素，lastIndexOf返回找到的最后一个元素。

　　参见：

　　并非所有的浏览器都支持indexOf和lastindexOf，针对这一函数的解决方案：

代码如下:
<script type="text/javascript">
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function (elt/*, from*/) {
var len = this.length >>> 0;
var from = Number(arguments[1]) || 0;
from = (from < 0) ? Math.ceil(from) : Math.floor(from);

 

if (from < 0) {
from += len;
}

for (; from < len; from++) {
if (from in this && this[from] === elt) {
return from;
}
}

return -1;
}
}
</script>

 

5、对每个数字元素应用一个函数

　　问题：想要使用一个函数来检查一个数组值，如果满足给定的条件，就替换它。

　　解决方案：

　　使用新的ECMAScript 5 Array对象的forEach方法，来针对每个数组元素都绑定一个回调函数：

代码如下:
<script type="text/javascript">
function replaceElement(element, index, array) {
if (element == "ab") {
array[index] = "**";
}
}

 

var charSets = new Array("ab", "bb", "cd", "ab", "cc", "ab", "dd", "ab");
//对每个数组元素应用函数
charSets.forEach(replaceElement)
alert(charSets); // 打印出**,bb,cd,**,cc,**,dd,**
</script>

 

讨论：

　　forEach方法接受一个参数，这个参数是个函数。该函数自身有3个参数：数组元素，元素的索引和数组。

　　参见：

　　大多数浏览器都支持forEach。然而，对于那些不支持的浏览器，可以使用Array.prototype属性来模拟forEach行为。

代码如下:
<script type="text/javascript">
if (!Array.prototype.forEach) {
Array.prototype.forEach = function (fun/*, thisp*/) {
var len = this.length >>> 0;
if (typeof fun != "function") {
throw new TypeError();
}

 

var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this) {
fun.call(thisp, this[i], i, this);
}
}
};
}
</script>

 

6、创建一个过滤后的数组

　　问题：想要过滤一个数组中的元素的值，并且把结果赋给一个新的数组。

　　解决方案：

　　使用Array对象的filter方法：

代码如下:
<script type="text/javascript">
function removeChars(element, index, array) {
return element !== "**";
}
var charSets = new Array("**", "bb", "cd", "**", "cc", "