js陣列的常見操作（ push、pop、unshift、shift、splice、concat、 join）的用法

lily000000發表於2019-03-04
JS陣列

1、陣列新增刪除 頭部或尾部（ push()、pop()、unshift()、shift() ）

例1：設定陣列的length

html

<ul>
    <li>1、設定陣列的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
}//取前三個複製程式碼

例2、陣列尾部新增 push()方法可向陣列的末尾新增一個或多個元素，並返回新的長度
語法：arrayObject.push(newelement1,newelement2,….,newelementX)

html:

<ul>
    <li>2、陣列尾部新增 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
}//尾部新增一個元素複製程式碼

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

html:

<ul>
    <li>3、陣列尾部刪除 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>4、陣列頭部新增 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>5、陣列頭部刪除 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
}//頭部刪除一個複製程式碼

2、對陣列刪除新增、替換的用法 splice()的用法
例1、陣列刪除 splice() –可以刪除任意數量的項，只需要指定2個引數：要刪除的第一項的位置和要刪除項的項數
語法: arr.splice(起點,長度) 【如 arr.splice(0,2) 會刪除陣列中的前兩項。】

html:

<ul>
    <li>6、陣列新增刪除 任意操作 （刪除 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（要刪除的項數）和要插入的項。 如果要插入多個項，可以再傳入第四、第五，一直任意多個項。
語法：arr.splice(起點,長度為0,需要新增的元素) 【如 arr.splice(2,0,”a”,”b”)會從位置2開始插入字串“a”和”b”】

html:

<ul>
    <li>6、陣列新增刪除 任意操作 （新增 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>6、陣列新增刪除 任意操作 （替換 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位複製程式碼

3、陣列連線、分割（concat()、join()的用法）

例1、陣列連線 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
}複製程式碼

例2、陣列分隔 join（）方法用於把陣列中的所有元素放入一個字串。
語法：arrayObject.join(separator)

html:

<ul>
<li>例2、陣列分隔 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
}複製程式碼

相關文章