更新時(shí)間:2022-03-25 來源:黑馬程序員 瀏覽量:
數(shù)組是JavaScript中最常用的數(shù)據(jù)類型之一,為此Array對(duì)象中提供了許多內(nèi)置方法,如棧方法、檢索方法、數(shù)組轉(zhuǎn)字符串的方法等。本節(jié)將針對(duì)數(shù)組的常用方法進(jìn)行詳細(xì)講解。
JavaScript中,除了前面講解的添加與刪除數(shù)組元素的方式外,還可以利用Array對(duì)象提供的棧方法實(shí)現(xiàn)在數(shù)組的末尾或開頭添加數(shù)組的新元素,也稱為入棧;在數(shù)組的末尾或開頭刪除數(shù)組元素,也稱為出棧。具體如表3-1所示。
表3-1中需要注意的是,push()和unshift()方法的返回值是新數(shù)組的長(zhǎng)度,而pop()和shift()方法返回的是移出的數(shù)組元素。
為了更好地理解數(shù)組元素棧方法的使用,接下來通過案例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('在開頭移出元素:' + first+ ' -移出后數(shù)組:' + arr); len = arr.unshift('Balsam', 'sunflower'); console.log('在開頭添加元素后長(zhǎng)度變?yōu)椋?#39; + len + ' -添加后數(shù)組:' + arr); </script>
從上述代碼可以看出,push()和unshift()方法可以為指定數(shù)組在末尾或開頭添加一個(gè)或多個(gè)元素,而pop()和shift()方法則只能移出并返回指定數(shù)組在末尾或開頭的一個(gè)元素。輸出結(jié)果如圖3-12所示。
在開發(fā)中,若要檢測(cè)給定的值是否是數(shù)組,或是查找指定的元素在數(shù)組中的位置,則可以利用Array對(duì)象提供的檢索方法,具體如表3-2所示。
表3-2中除了Array.isArray()方法外,其余方法默認(rèn)都是從指定數(shù)組索引的位置開始檢索,并且檢索方式與運(yùn)算符“===”相同,即只有全等時(shí)才會(huì)返回比較成功的結(jié)果。為了初學(xué)者更好的理解這些方法的使用,下面通過代碼和案例進(jìn)行演示。
var data = ['peach', 'pear', 26, '26','grape']; // 從數(shù)組下標(biāo)為3的位置開始檢索數(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ù)組。
indexOf()用于在數(shù)組中從指定下標(biāo)位置,檢索到的第一個(gè)給定值,存在則返回對(duì)應(yīng)的元素下標(biāo),否則返回-1。下面以判斷一個(gè)元素是否在指定數(shù)組中,若不在則更新數(shù)組為例進(jìn)行講解。如例3-7所示。【例3-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元素,若沒有則執(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ù)用于指定開始查找的下標(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ù)組。
Array對(duì)象提供的lastIndexOf()方法,用于在數(shù)組中從指定下標(biāo)位置檢索到的最后一個(gè)給定值的下標(biāo)。與indexOf()檢索方式不同的是,lastIndexOf()方法默認(rèn)逆向檢索,即從數(shù)組的末尾向數(shù)組的開頭檢索。接下來以找出指定元素出現(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行通過循環(huán)獲取search變量出現(xiàn)的所有位置。其中,第7行用于從res數(shù)組的末尾添加找到的元素下標(biāo),第8行通過判斷當(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。
在項(xiàng)目開發(fā)中,若需要將數(shù)組轉(zhuǎn)換為字符串,則可以利用JavaScript提供的join()和toString()方法實(shí)現(xiàn)。具體如表3-3所示。
表3-3數(shù)組轉(zhuǎn)字符串
為了讓大家更加清楚的了解數(shù)組轉(zhuǎn)字符串的使用,下面通過示例的方式演示。
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)換為空字符串。
除了前面講解的幾種常用方法外,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)生影響。
接下來,以splice()方法為例演示如何在指定位置添加或刪除數(shù)組元素。如例3-9所示。
【例3-9】demo09.html
<script> var arr = ['sky', 'wind', 'snow', 'sun']; // 從數(shù)組下標(biāo)2的位置開始,刪除2個(gè)元素4arr.splice(2, 2);5console.log(arr); // 從數(shù)組下標(biāo)1的位置開始,刪除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的位置開始,添加數(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)位置開始,刪除數(shù)組元素的個(gè)數(shù),將其設(shè)置為0,則表示該方法只添加元素。剩余的參數(shù)表示要添加的數(shù)組元素,若省略則表示刪除元素。效果如圖3-15所示。
圖3-15splice()方法添加或刪除數(shù)組元素
值得一提的是,splice()方法的第1個(gè)參數(shù)的值等于或大于數(shù)組長(zhǎng)度時(shí),從數(shù)組末尾開始操作;當(dāng)該值為負(fù)數(shù)時(shí),則下標(biāo)位置等于數(shù)組長(zhǎng)度加上指定的負(fù)數(shù),若其值仍為負(fù)數(shù),則從數(shù)組的開頭開始操作。