js數(shù)組的常見操作( push髓霞、pop、unshift畦戒、shift方库、splice、concat障斋、 join)的用法

1纵潦、數(shù)組添加刪除 頭部或尾部( push()、pop()垃环、unshift()邀层、shift() )

例1:設(shè)置數(shù)組的length

html

<ul>
    <li>1、設(shè)置數(shù)組的length</li>
</ul>
<ul>
    <li><span>var arr=[1,2,3,4,5] </span><button>默認(rèn)length</button> &nbsp;<button>取前3個(gè)</button></li>
</ul>

js

var btn = document.getElementsByTagName('button');
btn[0].onclick = function(){
    var arr=[1,2,3,4,5];
    alert(arr) //1,2,3,4,5
}//原數(shù)組
btn[1].onclick = function(){
    var arr=[1,2,3,4,5];
    arr.length = 3;
    alert(arr) //1,2,3
}//取前三個(gè)

**
例2遂庄、數(shù)組尾部添加 push()方法可向數(shù)組的末尾添加一個(gè)或多個(gè)元素寥院,并返回新的長度
語法:arrayObject.unshift(newelement1,newelement2,….,newelementX)
**

html

<ul>
    <li>4、數(shù)組頭部添加 unshift</li>
</ul>
<ul>
    <li><span>var arr=[1,2,3,4,5] </span><button>頭部添加一個(gè)</button> &nbsp;</li>    
</ul>

js

btn[4].onclick= function(){
    var arr = [1,2,3,4,5]
    arr.unshift('w')
    alert(arr) //w,1,2,3,4,5
}//頭部添加一個(gè)

例3涛目、數(shù)組尾部刪除 pop()方法用于刪除并返回?cái)?shù)組的最后一個(gè)元素
語法:arrayObject.pop()

html:

<ul>
    <li>3秸谢、數(shù)組尾部刪除 pop</li>
</ul>
<ul>
    <li><span>var arr=[1,2,3,4,5] </span><button>尾部刪除一個(gè)</button> &nbsp;</li>    
</ul>

js

btn[3].onclick = function(){
    var arr = [1,2,3,4,5]
    arr.pop()
    alert(arr) //1,2,3,4
}//尾部刪除一個(gè)

例4:數(shù)組頭部添加 unshift() 方法可向數(shù)組的開頭添加一個(gè)或更多元素,并返回新的長度
語法:arrayObject.unshift(newelement1,newelement2,….,newelementX)

html

<ul>
    <li>4霹肝、數(shù)組頭部添加 unshift</li>
</ul>
<ul>
    <li><span>var arr=[1,2,3,4,5] </span><button>頭部添加一個(gè)</button> &nbsp;</li>    
</ul>

js

btn[4].onclick= function(){
    var arr = [1,2,3,4,5]
    arr.unshift('w')
    alert(arr) //w,1,2,3,4,5
}//頭部添加一個(gè)

例5:數(shù)組頭部刪除 shift() 方法用于把數(shù)組的第一個(gè)元素從其中刪除估蹄,并返回第一個(gè)元素的值
語法:arrayObject.shift()

html

<ul>
    <li>5、數(shù)組頭部刪除 shift</li>
</ul>
<ul>
    <li><span>var arr=[1,2,3,4,5] </span><button>頭部刪除一個(gè)</button> &nbsp;</li>
</ul>

js

btn[5].onclick = function(){
    var arr = [1,2,3,4,5]
    arr.shift()
    alert(arr)//2,3,4,5
}//頭部刪除一個(gè)

2沫换、對(duì)數(shù)組刪除\添加臭蚁、替換的用法 splice()的用法

例1、數(shù)組刪除 splice() –可以刪除任意數(shù)量的項(xiàng)讯赏,只需要指定2個(gè)參數(shù):要?jiǎng)h除的第一項(xiàng)的位置和要?jiǎng)h除項(xiàng)的項(xiàng)數(shù)
語法: arr.splice(起點(diǎn),長度) 【如 arr.splice(0,2) 會(huì)刪除數(shù)組中的前兩項(xiàng)垮兑。】

html:

<ul>
    <li>6漱挎、數(shù)組添加刪除 任意操作 (刪除 splice)</li>
</ul>
<ul>
    <li><span>var arr=[1,2,3,4,5] </span><button>刪除2-4</button> &nbsp;</li>
</ul>

js

btn[6].onclick = function(){
    var arr = [1,2,3,4,5]
    arr.splice(1,3)//從第一個(gè)元素后面甥角,刪除三個(gè)元素
    alert(arr)//1,5
}//刪除2-4

例2:數(shù)組添加 splice() –可以向指定位置插入任意數(shù)量的項(xiàng),只需要提供3個(gè)參數(shù):插入起始位置识樱、0(要?jiǎng)h除的項(xiàng)數(shù))和要插入的項(xiàng)嗤无。 如果要插入多個(gè)項(xiàng),可以再傳入第四怜庸、第五当犯,一直任意多個(gè)項(xiàng)。
語法:arr.splice(起點(diǎn),長度為0,需要添加的元素) 【如 arr.splice(2,0,”a”,”b”)會(huì)從位置2開始插入字符串“a”和”b”】

html:

<ul>
    <li>6割疾、數(shù)組添加刪除 任意操作 (添加 splice)</li>
</ul>
<ul>
    <li><span>var arr=[1,2,3,4,5] </span><button>在第二位添加abc</button> &nbsp;</li> 
</ul> 

js:

btn[7].onclick = function(){
    var arr = [1,2,3,4,5]
    arr.splice(1,0,'abc')//從第一個(gè)元素后面嚎卫,添加abc元素
    alert(arr)//1,abc,2,3,4,5
}//添加abc

*例3:數(shù)組的替換 splice()–即刪除和插入數(shù)量相等項(xiàng)數(shù)的綜合應(yīng)用,可以指向指定位置插入任意數(shù)量的項(xiàng),且同時(shí)刪除任意數(shù)量的項(xiàng)拓诸,只需要指定3個(gè)指定參數(shù):起始位置侵佃、要?jiǎng)h除的項(xiàng)數(shù)和要插入的任意數(shù)量項(xiàng)。 插入的項(xiàng)數(shù)是不必與刪除的項(xiàng)數(shù)相等奠支。
語法:arr.splice(起點(diǎn),長度為要替換的個(gè)數(shù),替換后的元素) 【如splice(2,2,”a”,”b”) 會(huì)刪除當(dāng)前數(shù)組位置2的項(xiàng)馋辈,然后再從位置2開始插入字符串“a”和“b””睹眨】 *

html:

<ul>
    <li>6迈螟、數(shù)組添加刪除 任意操作 (替換 splice)</li>
</ul>
<ul>
    <li><span>var arr=[1,2,3,4,5] </span><button>在第二位刪除2位又添加2位</button> &nbsp;        </li>
</ul>

js

btn[8].onclick = function(){
    var arr = [1,2,3,4,5]
    arr.splice(2,2,'a','b')//從第二個(gè)元素后面,添加a,b元素
    alert(arr) //1,2,a,b,5
}//在第二位后面刪除2位又添加2位

3尔崔、數(shù)組連接答毫、分割(concat()、join()的用法)

*例1季春、數(shù)組連接 concat() 方法用于連接兩個(gè)或多個(gè)字符串洗搂。該方法沒有改變?cè)凶址菚?huì)返回連接兩個(gè)或多個(gè)字符串新字符串
語法:string.concat(string1, string2, …, stringX) *

html:

<ul>
        <li>數(shù)組連接 concat</li>
        <li><span>var a=[1,2,3]; var b=[4,5,6] </span><button>連接兩個(gè)數(shù)組</button> &nbsp;</li>
</ul>

js

btn[9].onclick = function(){
    var a = [1,2,3] 
    var b = [4,5,6]
    var arr = a.concat(b) //concat()方法用于連接兩個(gè)或多個(gè)數(shù)組
    alert(arr) //1,2,3,4,5,6
}

例2载弄、數(shù)組分隔 join()方法用于把數(shù)組中的所有元素放入一個(gè)字符串蚕脏。
語法:arrayObject.join(separator)

html:

<ul>
<li>例2、數(shù)組分隔 join</li>
        <li><span>var a=[1,2,3,4,5,6] </span><button>用-連接</button> &nbsp;</li>
</ul>

js

btn[10].onclick = function(){
    var a = [1,2,3,4,5,6]
    a.join('-')//使用分隔符來分隔數(shù)組中的元素
    alert(a.join('-'))//1-2-3-4-5-6
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末侦锯,一起剝皮案震驚了整個(gè)濱河市驼鞭,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌尺碰,老刑警劉巖挣棕,帶你破解...
    沈念sama閱讀 216,544評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異亲桥,居然都是意外死亡洛心,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門题篷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來词身,“玉大人,你說我怎么就攤上這事番枚》ㄑ希” “怎么了?”我有些...
    開封第一講書人閱讀 162,764評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵葫笼,是天一觀的道長深啤。 經(jīng)常有香客問我,道長路星,這世上最難降的妖魔是什么溯街? 我笑而不...
    開封第一講書人閱讀 58,193評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上呈昔,老公的妹妹穿的比我還像新娘挥等。我一直安慰自己,他們只是感情好堤尾,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評(píng)論 6 388
  • 文/花漫 我一把揭開白布肝劲。 她就那樣靜靜地躺著,像睡著了一般哀峻。 火紅的嫁衣襯著肌膚如雪涡相。 梳的紋絲不亂的頭發(fā)上哲泊,一...
    開封第一講書人閱讀 51,182評(píng)論 1 299
  • 那天剩蟀,我揣著相機(jī)與錄音,去河邊找鬼切威。 笑死育特,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的先朦。 我是一名探鬼主播缰冤,決...
    沈念sama閱讀 40,063評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼喳魏!你這毒婦竟也來了棉浸?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,917評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤刺彩,失蹤者是張志新(化名)和其女友劉穎迷郑,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體创倔,經(jīng)...
    沈念sama閱讀 45,329評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡嗡害,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了畦攘。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片霸妹。...
    茶點(diǎn)故事閱讀 39,722評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖知押,靈堂內(nèi)的尸體忽然破棺而出叹螟,到底是詐尸還是另有隱情,我是刑警寧澤台盯,帶...
    沈念sama閱讀 35,425評(píng)論 5 343
  • 正文 年R本政府宣布首妖,位于F島的核電站,受9級(jí)特大地震影響爷恳,放射性物質(zhì)發(fā)生泄漏有缆。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望棚壁。 院中可真熱鬧杯矩,春花似錦、人聲如沸袖外。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽曼验。三九已至泌射,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間鬓照,已是汗流浹背熔酷。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留豺裆,地道東北人拒秘。 一個(gè)月前我還...
    沈念sama閱讀 47,729評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像臭猜,于是被迫代替她去往敵國和親躺酒。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • 由于最近都在freecodecamp上刷代碼蔑歌,運(yùn)用了很多JavaScript數(shù)組的方法羹应,因此做了一份關(guān)于JavaS...
    2bc5f46e925b閱讀 1,975評(píng)論 0 16
  • 檢測(cè)數(shù)組 利用instanceof(實(shí)例) 關(guān)鍵字語法: arr instanceof Array 返回值...
    尹林陽閱讀 468評(píng)論 1 5
  • 一园匹、html基礎(chǔ)1、你做的頁面在哪些流覽器測(cè)試過帅矗?這些瀏覽器的內(nèi)核分別是什么?IE: trident內(nèi)核Firef...
    Smallbore閱讀 951評(píng)論 0 15
  • js中數(shù)組操作函數(shù)還是非常多的偎肃,今天忽然想到來總結(jié)一下,也算是溫故而知新吧浑此。不過不會(huì)針對(duì)每個(gè)辦法都進(jìn)行一下總結(jié)累颂,只...
    IOSCoderYummy閱讀 514評(píng)論 0 0
  • 四月終于把 《四月是你的謊言》補(bǔ)完了。連載時(shí)只是被名字吸引凛俱,后又因?yàn)閾?jù)說是SE而棄掉紊馏,但一直記掛著。甚至于這篇書影...
    Plutoer閱讀 852評(píng)論 0 0