js數組的常見操做（ push、pop、unshift、shift、splice、concat、 join）的用法

一、數組添加刪除 頭部或尾部（ push()、pop()、unshift()、shift() ）

例1：設置數組的length

html

<ul>
	<li>一、設置數組的length</li>
</ul>
<ul>
	<li><span>var arr=[1,2,3,4,5] </span><button>默認length</button> &nbsp;<button>取前3個</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
}//原數組
btn[1].onclick = function(){
	var arr=[1,2,3,4,5];
	arr.length = 3;
	alert(arr) //1,2,3
}//取前三個
複製代碼

*例二、數組尾部添加 **push()*方法可向數組的末尾添加一個或多個元素，並返回新的長度 語法：arrayObject.push(newelement1,newelement2,....,newelementX)

html:

<ul>
	<li>二、數組尾部添加 push</li>
</ul>
<ul>
	<li><span>var arr=[1,2,3,4,5] </span><button>尾部添加</button> &nbsp;</li>
</ul>
複製代碼

js:

btn[2].onclick = function(){
	var arr = [1,2,3,4,5]
	arr.push(6)
	alert(arr) //1,2,3,4,5,6
}//尾部添加一個元素
複製代碼

*例三、數組尾部刪除 **pop（）*方法用於刪除並返回數組的最後一個元素 語法：arrayObject.pop()

html:

<ul>
	<li>三、數組尾部刪除 pop</li>
</ul>
<ul>
	<li><span>var arr=[1,2,3,4,5] </span><button>尾部刪除一個</button> &nbsp;</li>	
</ul>
複製代碼

js:

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

例4：數組頭部添加 unshift() 方法可向數組的開頭添加一個或更多元素，並返回新的長度 語法：arrayObject.unshift(newelement1,newelement2,....,newelementX)

html:

<ul>
	<li>四、數組頭部添加 unshift</li>
</ul>
<ul>
	<li><span>var arr=[1,2,3,4,5] </span><button>頭部添加一個</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
}//頭部添加一個
複製代碼

例5：數組頭部刪除 shift() 方法用於把數組的第一個元素從其中刪除，並返回第一個元素的值 語法：arrayObject.shift()

html：

<ul>
	<li>五、數組頭部刪除 shift</li>
</ul>
<ul>
	<li><span>var arr=[1,2,3,4,5] </span><button>頭部刪除一個</button> &nbsp;</li>
</ul>
複製代碼

js:

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

**二、對數組刪除\添加、替換的用法 splice()的用法 ** *例一、數組刪除 splice() --能夠刪除任意數量的項，只須要指定2個參數：要刪除的第一項的位置和要刪除項的項數 * 語法: arr.splice(起點,長度) 【如 arr.splice(0,2) 會刪除數組中的前兩項。】

html:

<ul>
	<li>六、數組添加刪除 任意操做 （刪除 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)//從第一個元素後面，刪除三個元素
	alert(arr)//1,5
}//刪除2-4
複製代碼

例2：數組添加 splice() --能夠向指定位置插入任意數量的項，只須要提供3個參數：插入起始位置、0（要刪除的項數）和要插入的項。 若是要插入多個項，能夠再傳入第4、第五，一直任意多個項。 語法：arr.splice(起點,長度爲0,須要添加的元素) 【如 arr.splice(2,0,」a」,」b」)會從位置2開始插入字符串「a」和」b」】

html:

<ul>
	<li>六、數組添加刪除 任意操做 （添加 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')//從第一個元素後面，添加abc元素
	alert(arr)//1,abc,2,3,4,5
}//添加abc
複製代碼

例3：數組的替換 splice()--即刪除和插入數量相等項數的綜合應用，能夠指向指定位置插入任意數量的項，且同時刪除任意數量的項，只須要指定3個指定參數：起始位置、要刪除的項數和要插入的任意數量項。 插入的項數是沒必要與刪除的項數相等。 語法：arr.splice(起點,長度爲要替換的個數,替換後的元素) 【如splice(2,2,」a」,」b」) 會刪除當前數組位置2的項，而後再從位置2開始插入字符串「a」和「b」。】 html:

<ul>
	<li>六、數組添加刪除 任意操做 （替換 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')//從第二個元素後面，添加a,b元素
	alert(arr) //1,2,a,b,5
}//在第二位後面刪除2位又添加2位
複製代碼

三、數組鏈接、分割（concat()、join()的用法）

例一、數組鏈接 concat（） 方法用於鏈接兩個或多個字符串。該方法沒有改變原有字符串，可是會返回鏈接兩個或多個字符串新字符串 語法：string.concat(string1, string2, ..., stringX) html：

<ul>
		<li>數組鏈接 concat</li>
		<li><span>var a=[1,2,3]; var b=[4,5,6] </span><button>鏈接兩個數組</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()方法用於鏈接兩個或多個數組
	alert(arr) //1,2,3,4,5,6
}
複製代碼

*例二、數組分隔 **join（）*方法用於把數組中的全部元素放入一個字符串。 語法：arrayObject.join(separator)

html:

<ul>
<li>例二、數組分隔 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('-')//使用分隔符來分隔數組中的元素
	alert(a.join('-'))//1-2-3-4-5-6
}
複製代碼