JavaScript數組和迴圈詳解

JavaScript數組和迴圈詳解
          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", "**", "dd", "**");
var newArray = charSets.filter(removeChars);
alert(newArray); // bb,cd,cc,dd
</script>

 

討論：

　　filter方法是ECMAScript 5新添加的方法，該方法將一個回呼函數應用於每一個數組元素。作為參數傳遞給filter方法的函數返回一個布爾值，true或false，根據測試數組元素的結果來返回。這個傳回值決定了該數組元素是否添加到一個新的數組中，如果函數返回true，將會添加；否則，將不會添加。

　　參見：

　　對於不支援filter方法的瀏覽器的類比實現：

 

代碼如下:

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

 

var res = new Array();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this) {
var val = this[i]; // 放置fun修改了this
if (fun.call(thisp, val, i, this)) {
res.push(val);
}
}
}

return res;
};
}
</script>

 

7、驗證數組內容

　　問題：想要確保一個數組滿足某個條件。

　　解決方案：

　　使用Array對象的every方法來檢查給定條件的每個元素。

 

 代碼如下:

<script type="text/javascript">
function testValue(element, index, array) {
var re = /^[a-zA-Z]+$/;
return re.test(element);
}
var elemSet = new Array("**", 123, "abc", "-", "AAA");
alert(elemSet.every(testValue));
</script>

討論：

 

　　Array對象的every和some方法都是最新的ECMAScript 5 Array方法，不同之處在於當使用every方法的時候，只要該函數返回一個false值，處理就會結束，並且該方法返回false。而some方法將繼續測試每一個數組元素，知道回呼函數返回true。此時不再驗證其他的元素，該方法返回true。如果回呼函數測試了所有的元素，並且任何時候不會返回true，some方法返回false。

　　參見：

　　對於不支援every和some的瀏覽器的實現方式：

代碼如下:

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

 

var thisp = arguments[1];
for (; i < len; i++) {
if (i in this
&& fun.call(thisp, val, i, this)) {
return true
}
}

return false;
};
}

if (!Array.prototype.every) {
Array.prototype.every = 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, val, i, this)) {
return false
}
}

return true;
};
}
</script>