JavaScript數(shù)組的常用方法

數(shù)組是JavaScript中最常用的數(shù)據(jù)類(lèi)型之一，為此Array對(duì)象中提供了許多內(nèi)置方法，如棧方法、檢索方法、數(shù)組轉(zhuǎn)字符串的方法等。本節(jié)將針對(duì)數(shù)組的常用方法進(jìn)行詳細(xì)講解。

棧方法

JavaScript中，除了前面講解的添加與刪除數(shù)組元素的方式外，還可以利用Array對(duì)象提供的棧方法實(shí)現(xiàn)在數(shù)組的末尾或開(kāi)頭添加數(shù)組的新元素，也稱(chēng)為入棧;在數(shù)組的末尾或開(kāi)頭刪除數(shù)組元素，也稱(chēng)為出棧。具體如表3-1所示。

表3-1中需要注意的是，push()和unshift()方法的返回值是新數(shù)組的長(zhǎng)度，而pop()和shift()方法返回的是移出的數(shù)組元素。

為了更好地理解數(shù)組元素棧方法的使用，接下來(lái)通過(guò)案例3-6進(jìn)行演示?！纠?-6】demo06.html

<script>
  var arr = ['Rose', 'Lily'];
  console.log('原數(shù)組：' + arr);
  var last = arr.pop();
  console.log('在末尾移出元素：' + last + ' -移出后數(shù)組：' + arr);
  var len = arr.push('Tulip', 'Jasmine');
  console.log('在末尾添加元素后長(zhǎng)度變?yōu)椋?#39; + len + ' -添加后數(shù)組：' + arr);
  var first = arr.shift();
  console.log('在開(kāi)頭移出元素：' + first+ ' -移出后數(shù)組：' + arr);
  len = arr.unshift('Balsam', 'sunflower');
  console.log('在開(kāi)頭添加元素后長(zhǎng)度變?yōu)椋?#39; + len + ' -添加后數(shù)組：' + arr);
</script>

從上述代碼可以看出，push()和unshift()方法可以為指定數(shù)組在末尾或開(kāi)頭添加一個(gè)或多個(gè)元素，而pop()和shift()方法則只能移出并返回指定數(shù)組在末尾或開(kāi)頭的一個(gè)元素。輸出結(jié)果如圖3-12所示。

1.檢索方法

在開(kāi)發(fā)中，若要檢測(cè)給定的值是否是數(shù)組，或是查找指定的元素在數(shù)組中的位置，則可以利用Array對(duì)象提供的檢索方法，具體如表3-2所示。

表3-2中除了Array.isArray()方法外，其余方法默認(rèn)都是從指定數(shù)組索引的位置開(kāi)始檢索，并且檢索方式與運(yùn)算符“===”相同，即只有全等時(shí)才會(huì)返回比較成功的結(jié)果。為了初學(xué)者更好的理解這些方法的使用，下面通過(guò)代碼和案例進(jìn)行演示。

(1)includes()和Array.isArray()方法

var data = ['peach', 'pear', 26, '26','grape'];
// 從數(shù)組下標(biāo)為3的位置開(kāi)始檢索數(shù)字26
console.log(data.includes(26,3));     // 輸出結(jié)果：false
// 從數(shù)組下標(biāo)為data.length -3 的位置查找數(shù)字26
console.log(data.includes(26, -3));     // 輸出結(jié)果：true
// 判斷變量data是否為數(shù)組
console.log(Array.isArray(data));     // 輸出結(jié)果：true

在上述代碼中，includes()方法在使用時(shí)，第1個(gè)參數(shù)表示待查找的值，第2個(gè)參數(shù)用于指定在數(shù)組中查找的索引下標(biāo)，當(dāng)其值大于數(shù)組長(zhǎng)度時(shí)，數(shù)組不會(huì)被檢索，直接返回false;若將下標(biāo)設(shè)置為小于0的數(shù)時(shí)，則檢索的下標(biāo)位置等于數(shù)組長(zhǎng)度加上指定的負(fù)數(shù)，若結(jié)果仍是小于0的數(shù)，則檢索整個(gè)數(shù)組。

(2)indexOf()方法

indexOf()用于在數(shù)組中從指定下標(biāo)位置，檢索到的第一個(gè)給定值，存在則返回對(duì)應(yīng)的元素下標(biāo)，否則返回-1。下面以判斷一個(gè)元素是否在指定數(shù)組中，若不在則更新數(shù)組為例進(jìn)行講解。如例3-7所示?！纠?-7】demo07.html

<script>
    var arr = ['potato', 'tomato', 'chillies', 'green-pepper'];
 var search = 'cucumber';
 if (arr.indexOf(search) === -1) { // 查找的元素不存在
    arr.push(search);
    console.log('更新后的數(shù)組為: ' + arr);
 } else if (arr.indexOf(search) > -1) { // 防止返回的下標(biāo)為0，if判斷為false
    console.log(search + '元素已在arr數(shù)組中。');
    } 
</script>

上述第2行代碼用于創(chuàng)建待檢索的數(shù)組arr，第3行利用search變量保存需要檢索的值，第4~9行代碼用于檢索arr數(shù)組中是否含有search元素，若沒(méi)有則執(zhí)行第5~6行代碼，在arr數(shù)組末尾添加該元素，效果如圖3-13左側(cè)所示;若有則執(zhí)行第8行代碼，在控制臺(tái)輸出對(duì)應(yīng)的提示信息，如將search的值設(shè)置為tomato時(shí)，效果如圖3-13右側(cè)所示。

圖3-13indexOf()方法示例

值得一提的是，indexOf()方法的第2個(gè)參數(shù)用于指定開(kāi)始查找的下標(biāo)，當(dāng)其值大于或等于數(shù)組長(zhǎng)度時(shí)，程序不會(huì)在數(shù)組中查找，直接返回-1;當(dāng)其值為負(fù)數(shù)時(shí)，查找的下標(biāo)位置等于數(shù)組長(zhǎng)度加上指定的負(fù)數(shù)，若結(jié)果仍是小于0的數(shù)，則檢索整個(gè)數(shù)組。

(3)lastIndexOf()方法

Array對(duì)象提供的lastIndexOf()方法，用于在數(shù)組中從指定下標(biāo)位置檢索到的最后一個(gè)給定值的下標(biāo)。與indexOf()檢索方式不同的是，lastIndexOf()方法默認(rèn)逆向檢索，即從數(shù)組的末尾向數(shù)組的開(kāi)頭檢索。接下來(lái)以找出指定元素出現(xiàn)的所有位置為例進(jìn)行講解。如例3-8所示?！纠?-8】demo08.html

<script>
  var res = [];
  var arr = ['a', 'b', 'a', 'c', 'a', 'd'];// 待檢索的數(shù)組
  var search= 'a';// 要查找的數(shù)組元素
  var i = arr.lastIndexOf(search);
  while (i !==-1) {
  res.push(i);
  i = (i > 0 ? arr.lastIndexOf(search, i -1): -1);
}
  console.log('元素' + search + ' 在數(shù)組中的所有位置為：' + res);
</script>

上述第2行初始化的res變量，用于保存指定元素出現(xiàn)的所有索引下標(biāo)。第5行用于獲取arr數(shù)組中search變量最后一次出現(xiàn)的位置，第6~9行通過(guò)循環(huán)獲取search變量出現(xiàn)的所有位置。其中，第7行用于從res數(shù)組的末尾添加找到的元素下標(biāo)，第8行通過(guò)判斷當(dāng)前的下標(biāo)是否大于0，確定arr中是否還有元素，若結(jié)果為true，則下標(biāo)值i減1，繼續(xù)從指定位置向前檢索變量search的值最后一次出現(xiàn)的下標(biāo)，直到檢索完數(shù)組，將i設(shè)置為-1結(jié)束循環(huán)。輸出結(jié)果如圖3-14所示。

圖3-14lastIndexOf()方法的示例

值得一提的是，lastIndexOf()方法的第2個(gè)參數(shù)用于指定查找的下標(biāo)，且由于其采用逆向的方式檢索，因此當(dāng)其值大于或等于數(shù)組長(zhǎng)度時(shí)，則整個(gè)數(shù)組都會(huì)被查找。當(dāng)其值為負(fù)數(shù)時(shí)，則索引位置等于數(shù)組長(zhǎng)度加上給定的負(fù)數(shù)，若其值仍為負(fù)數(shù)，則直接返回-1。

2.數(shù)組轉(zhuǎn)字符串

在項(xiàng)目開(kāi)發(fā)中，若需要將數(shù)組轉(zhuǎn)換為字符串，則可以利用JavaScript提供的join()和toString()方法實(shí)現(xiàn)。具體如表3-3所示。

表3-3數(shù)組轉(zhuǎn)字符串

為了讓大家更加清楚的了解數(shù)組轉(zhuǎn)字符串的使用，下面通過(guò)示例的方式演示。

console.log(['a','b','c'].join());    // 輸出結(jié)果：a,b,c
console.log([[4,5],[1,2]].join('-')); // 輸出結(jié)果：4,5-1,2
console.log(['a','b','c'].toString());// 輸出結(jié)果：a,b,c
console.log([[4,5],[1,2]].toString());// 輸出結(jié)果：4,5,1,2

從上述代碼可知，join()和toString()方法可將多維數(shù)組轉(zhuǎn)為字符串，默認(rèn)情況下使用逗號(hào)連接。不同的是，join()方法可以指定連接數(shù)組元素的符號(hào)。另外，當(dāng)數(shù)組元素為undefined、null或空數(shù)組時(shí)，對(duì)應(yīng)的元素會(huì)被轉(zhuǎn)換為空字符串。

3.其他方法

除了前面講解的幾種常用方法外，JavaScript還提供了很多其他常用的數(shù)組方法。例如，合并數(shù)組、數(shù)組淺拷貝、顛倒數(shù)組元素的順序等。具體如表3-4所示。

表3-4其他方法

表3-4中的slice()和concat()方法在執(zhí)行后返回一個(gè)新的數(shù)組，不會(huì)對(duì)原數(shù)組產(chǎn)生影響，剩余的方法在執(zhí)行后皆會(huì)原數(shù)組產(chǎn)生影響。

接下來(lái)，以splice()方法為例演示如何在指定位置添加或刪除數(shù)組元素。如例3-9所示。

【例3-9】demo09.html

<script>
    var arr = ['sky', 'wind', 'snow', 'sun'];
// 從數(shù)組下標(biāo)2的位置開(kāi)始，刪除2個(gè)元素4arr.splice(2, 2);5console.log(arr);
// 從數(shù)組下標(biāo)1的位置開(kāi)始，刪除1個(gè)元素后，再添加snow元素
arr.splice(1, 1, 'snow');
console.log(arr);
// 指定下標(biāo)4大于數(shù)組的長(zhǎng)度，則直接在數(shù)組末尾添加hail和sun元素
arr.splice(4, 0, 'hail', 'sun');
console.log(arr);
// 從數(shù)組下標(biāo)3的位置開(kāi)始，添加數(shù)組、null、undefined和空數(shù)組
arr.splice(3, 0, ['lala', 'yaya'], null, undefined, []);
console.log(arr);
</script>

在上述代碼中，splice()方法的第1個(gè)參數(shù)用于指定添加或刪除的下標(biāo)位置;第2個(gè)參數(shù)用于從指定下標(biāo)位置開(kāi)始，刪除數(shù)組元素的個(gè)數(shù)，將其設(shè)置為0，則表示該方法只添加元素。剩余的參數(shù)表示要添加的數(shù)組元素，若省略則表示刪除元素。效果如圖3-15所示。

圖3-15splice()方法添加或刪除數(shù)組元素

值得一提的是，splice()方法的第1個(gè)參數(shù)的值等于或大于數(shù)組長(zhǎng)度時(shí)，從數(shù)組末尾開(kāi)始操作;當(dāng)該值為負(fù)數(shù)時(shí)，則下標(biāo)位置等于數(shù)組長(zhǎng)度加上指定的負(fù)數(shù)，若其值仍為負(fù)數(shù)，則從數(shù)組的開(kāi)頭開(kāi)始操作。