JavaScript實(shí)現(xiàn)數(shù)組元素增減的方法示例
任務(wù)描述
本關(guān)任務(wù):掌握數(shù)組元素增減的方法。
相關(guān)知識(shí)
數(shù)組元素的增刪是JavaScript
的一個(gè)特點(diǎn),因?yàn)槠渌芏嗑幊陶Z(yǔ)言的數(shù)組是不允許增加或者刪除元素的。
數(shù)組元素的增加
在JavaScript
中,為數(shù)組增加元素可以在數(shù)組頭部(索引最小處)或者尾部進(jìn)行,可以使用數(shù)組的方法或者直接使用運(yùn)算符。
在尾部添加元素
最直觀的方法是直接給當(dāng)前尾部元素的后一個(gè)位置賦值。
var numberArray = [12,23,34,45]; numberArray[numberArray.length] = 56; console.log(numberArray);//輸出[12,23,34,45,56]
第二種方法是使用push()
函數(shù),往數(shù)組的末尾添加一個(gè)或多個(gè)元素,參數(shù)是要添加的元素,返回?cái)?shù)組長(zhǎng)度。
//利用push()方法在數(shù)組尾部添加元素 var numberArray = [12,23,34,45]; var newLength = numberArray.push(56); console.log(newLength);//輸出5 console.log(numberArray);//輸出[12,23,34,45,56]
在頭部添加元素
unshift()
方法在數(shù)組的頭部添加元素,并返回?cái)?shù)組新的長(zhǎng)度,其余元素自動(dòng)向索引大的方向移動(dòng)。
var sArray = ["ja","va","script"]; var newLength = sArray.unshift("he","llo"); console.log(newLength)//輸出5 console.log(sArray);//輸出["he","llo","ja","va","script"];
數(shù)組元素的刪除
刪除也能在數(shù)組頭部(索引值?。┗蛘呶膊窟M(jìn)行。
在尾部刪除元素
上一關(guān)介紹過(guò)一種方法:直接修改數(shù)組長(zhǎng)度為更小的值。
var array = [1,2,true,"hello"]; array.length = 3;//索引最大的元素被刪除 console.log(array);//輸出[1,2,true]
第二種方法是使用delete
運(yùn)算符。delete
運(yùn)算符后接要?jiǎng)h除的元素,但是刪除后,會(huì)有一個(gè)空占位符,所以數(shù)據(jù)的長(zhǎng)度保持不變。如:
var dArray = [11,22,33,44,55]; delete dArray[4];//刪除索引最大的元素 console.log(dArray);//輸出[11,22,33,44] console.log(dArray.length); //長(zhǎng)度為5
第三種方法是使用pop()
,一次刪除一個(gè),并返回被刪除的元素。
//利用pop()方法在數(shù)組尾部刪除元素 var numberArray = [3,4,5,6,7]; var deletedNumber = numberArray.pop(); console.log(deletedNumber);//輸出被刪除的元素7 console.log(numberArray);//刪除后的數(shù)組為[3,4,5,6]
在頭部刪除元素
有unshift()
,自然有shift()
,shift()
的作用是刪除數(shù)組頭部一個(gè)元素并返回該元素,然后所有元素往索引值小的方向移動(dòng)一位。
初學(xué)者很容易混淆這兩個(gè)方法,建議記住shift
單詞的意思是:刪除,去掉。
var dArray = [11,22,33,44,55]; console.log(dArray.shift());//輸出11,11被從數(shù)組中刪除 console.log(dArray);//輸出[22,33,44,55]
編程要求
本關(guān)的編程任務(wù)是補(bǔ)全右側(cè)代碼片段中begin
至end
中間的代碼,具體要求如下:
將數(shù)組
testArray
的最后a
個(gè)元素移動(dòng)到最前面,這a
個(gè)元素之間的相對(duì)位置不變,其余元素之間的相對(duì)位置不變;比如將數(shù)組
[1,2,3,4,5]
最后2
個(gè)元素移動(dòng)到最前面,數(shù)組變?yōu)?code>[4,5,1,2,3];返回移動(dòng)結(jié)束后數(shù)組在索引
b
處的元素;
var testArray = [12,"java","js","c","c++",24,36,"python","c#","css"]; function mainJs(a,b) { a = parseInt(a); b = parseInt(b); //請(qǐng)?jiān)诖颂幘帉?xiě)代碼 /*********begin*********/ for (var i = 1; i <= a; i++){ testArray.unshift(testArray.pop()); } return testArray[b]; /*********end*********/ }
到此這篇關(guān)于JavaScript實(shí)現(xiàn)數(shù)組元素增減的方法示例的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組元素增減內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Bootstrap實(shí)現(xiàn)導(dǎo)航欄的2種方式
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)導(dǎo)航欄的2種方式,一是利用按鈕組實(shí)現(xiàn)、二是Bootstrap專(zhuān)門(mén)做了相應(yīng)的css類(lèi),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11Javascript使用SWFUpload進(jìn)行多文件上傳
本篇文章主要解釋了使用SWFUpload進(jìn)行多文件上傳,這里整理了詳細(xì)的代碼,有需要的可以了解一下。2016-11-11javascript實(shí)現(xiàn)數(shù)據(jù)雙向綁定的三種方式小結(jié)
本篇文章主要介紹了javascript實(shí)現(xiàn)數(shù)據(jù)雙向綁定的三種方式小結(jié),前端的視圖層和數(shù)據(jù)層有時(shí)需要實(shí)現(xiàn)雙向綁定,目前實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要有三種,有興趣的可以了解一下。2017-03-03Django模板繼承 extend標(biāo)簽實(shí)例代碼詳解
這篇文章主要介紹了Django模板繼承 extend標(biāo)簽實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05BootStrap實(shí)現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果(在小屏幕、手機(jī)屏幕瀏覽時(shí)自動(dòng)折疊隱藏)
這篇文章主要介紹了BootStrap實(shí)現(xiàn)導(dǎo)航欄的響應(yīng)式布局,當(dāng)在小屏幕、手機(jī)屏幕瀏覽時(shí)自動(dòng)折疊隱藏的效果,非常不錯(cuò),具有參考借鑒價(jià)值,對(duì)bootstrap 響應(yīng)式布局導(dǎo)航欄功能感興趣的朋友一起學(xué)習(xí)吧2016-11-11