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> <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> </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> </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> </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> </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> </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> </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> </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> </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> </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
}