JavaScript數(shù)組各種常見用法實(shí)例分析
本文實(shí)例講述了JavaScript數(shù)組各種常見用法。分享給大家供大家參考。具體如下:
運(yùn)行效果如下圖所示:
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript各種數(shù)組方法的使用</title> <style> div{color:green;padding:10px 15px;margin:12px 0;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;word-wrap:break-word;} </style> <script type="text/javascript"> window.onload = function () { var aDiv = document.getElementsByTagName("div"); var aInput = document.getElementsByTagName("input"); var i = 0; var bS1 = bS2 = true; var aTmp = []; //刪除/添加第一項(xiàng) aInput[0].onclick = function () { aTmp = getArray(aDiv[0].innerHTML); bS1 ? //刪除第一項(xiàng), shift()方法 (aTmp.shift(), this.value = this.value.replace("刪除","添加"), bS1 = false) : //添加第一項(xiàng), unshift()方法 (aTmp.unshift("January(1)"), this.value = this.value.replace("添加","刪除"), bS1 = true); //輸出 aDiv[0].innerHTML = aTmp.join() }; //刪除/添加最后一項(xiàng) aInput[1].onclick = function () { aTmp = getArray(aDiv[0].innerHTML); bS2 ? //刪除最后一項(xiàng), pop()方法 (aTmp.pop(), this.value = this.value.replace("刪除","添加"), bS2 = false) : //添加最后一項(xiàng), push()方法 (aTmp.push("December(12)"), this.value = this.value.replace("添加","刪除"), bS2 = true); //輸出 aDiv[0].innerHTML = aTmp.join() }; //復(fù)制, concat()方法 aInput[2].onclick = function () { aTmp = getArray(aDiv[1].innerHTML); //輸出 aDiv[1].innerHTML = aTmp.concat(aTmp).toString().replace(/\s/g,"") }; //還原, 利用數(shù)組的 length 特點(diǎn) aInput[3].onclick = function () { aTmp = getArray(aDiv[1].innerHTML); //設(shè)置數(shù)組長度 aTmp.length = 10; //輸出 aDiv[1].innerHTML = aTmp.join() }; //第三組數(shù)據(jù)還原 aInput[4].onclick = function () { aTmp = ["red","green","blue","white","yellow","black","brown"]; //輸出 aDiv[2].innerHTML = aTmp.join() }; //刪除前三項(xiàng) aInput[5].onclick = function () { aTmp = getArray(aDiv[2].innerHTML); //刪除, 0開始, 刪除3個(gè) aTmp.splice(0, 3); //輸出 aDiv[2].innerHTML = aTmp.join() }; //刪除第二至三項(xiàng) aInput[6].onclick = function () { aTmp = getArray(aDiv[2].innerHTML); //刪除, 2開始, 刪除2個(gè) aTmp.splice(1, 2); //輸出 aDiv[2].innerHTML = aTmp.join() }; //在第二頂后插入"orange", "purple" aInput[7].onclick = function () { aTmp = getArray(aDiv[2].innerHTML); //插入, 2開始, 插入"orange", "purple" aTmp.splice(1, 0, "orange", "purple"); //輸出 aDiv[2].innerHTML = aTmp.join() }; //替換第二項(xiàng)和第三項(xiàng) aInput[8].onclick = function () { aTmp = getArray(aDiv[2].innerHTML); //插入, 2開始替換 aTmp.splice(1, 2, "#009900", "#0000ff"); //輸出 aDiv[2].innerHTML = aTmp.join() }; //將div中的內(nèi)容轉(zhuǎn)為數(shù)組 //str div對象 function getArray(str) { aTmp.length = 0; str = str.split(","); for (var i in str)aTmp.push(str[i]); return aTmp } } </script> </head> <body> <div>January(1),February(2),March(3),April(4),May(5),June(6),July(7),Aguest(8),September(9),October(10),November(11),December(12)</div> <input type="button" value="刪除January(1)" /> <input type="button" value="刪除December(12)" /> <div>0,1,2,3,4,5,6,7,8,9</div> <input type="button" value="復(fù)制" /> <input type="button" value="還原" /> <div>red,green,blue,white,yellow,black,brown</div> <input type="button" value="還原" /> <input type="button" value="刪除前三項(xiàng)" /> <input type="button" value="刪除第二至三項(xiàng)" /> <input type="button" value="在第二項(xiàng)后插入(orange, purple)" /> <input type="button" value="替換第二項(xiàng)和第三項(xiàng)" /> </body> </html>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
- javascript數(shù)組去重的六種方法匯總
- javascript實(shí)現(xiàn)數(shù)組中的內(nèi)容隨機(jī)輸出
- JavaScript數(shù)組對象賦值用法實(shí)例
- 淺談Javascript數(shù)組的使用
- javascript數(shù)組排序匯總
- javascript中數(shù)組方法匯總
- JavaScript通過select動(dòng)態(tài)更換圖片的方法
- javascript實(shí)現(xiàn)無限級select聯(lián)動(dòng)菜單
- javascript模擬select,jselect的方法實(shí)現(xiàn)
- JavaScript實(shí)現(xiàn)將數(shù)組數(shù)據(jù)添加到Select下拉框的方法
相關(guān)文章
Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁面方法詳解
Uniapp是一款基于Vue.js框架的跨平臺(tái)開發(fā)工具,支持在一套代碼中開發(fā)出運(yùn)行于各大平臺(tái)的應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁面的相關(guān)資料,需要的朋友可以參考下2023-09-09js報(bào)錯(cuò) Object doesn''t support this property or method的原因分析
運(yùn)行js是出現(xiàn)Object doesn't support this property or method 錯(cuò)誤的可能原因分析。2011-03-03JS實(shí)現(xiàn)按鈕控制計(jì)時(shí)開始和停止功能
這篇文章給大家介紹了JS實(shí)現(xiàn)按鈕控制計(jì)時(shí)開始和停止功能,代碼簡單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-07-07關(guān)于layui導(dǎo)航欄不展示下拉列表的解決方法
今天小編就為大家分享一篇關(guān)于layui導(dǎo)航欄不展示下拉列表的解決方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09微信小程序?qū)崿F(xiàn)訂單倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)訂單倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06JavaScript中的toString()和toLocaleString()方法的區(qū)別
本文給大家介紹JavaScript中的toString()和toLocaleString()方法的區(qū)別,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02如何使用瀏覽器擴(kuò)展篡改網(wǎng)頁中的JS?文件
這篇文章主要為大家介紹了如何使用瀏覽器擴(kuò)展篡改網(wǎng)頁中的JS文件實(shí)現(xiàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05js動(dòng)態(tài)添加onclick事件可傳參數(shù)與不傳參數(shù)
本節(jié)主要介紹了js動(dòng)態(tài)添加onclick事件可傳參數(shù)與不傳參數(shù),需要的朋友可以參考下2014-07-07