JavaScript數組的增刪總結

js中數組操作函數還是非常多的,今天忽然想到來總結一下,也算是溫故而知新吧。不過不會針對每個辦法都進行一下總結,只是針對一些比較常用的做個備注一下。
這里總結到的 js 數組操作函數有:push,pop,join,shift,unshift,slice,splice,concat
(1)push 和 pop
這兩個函數都是對數組從尾部進行壓入或彈出操作。push(arg1,arg2,...)可以每次壓入一個或多個元素,并返回更新后的數組長度。注意如果參數也是數組的話,則是將全部數組當做一個元素壓入到原本的數組里面去。pop() 函數則每次只會彈出結尾的元素,并返回彈出的元素,若是是對空組數調用 pop() 則返回undefined。
示例:
var oldArr=[1,2,3];
alert(oldArr.push(4,[5,6]))//這里只會將[5,6]當做一個元素來策畫,返回更新后的數組長度5
此時 oldArr = [1,2,3,4,[5,6]]
oldArr.pop()//這里彈出最后一個元素[5,6],而不是6
此時 oldArr = [1,2,3,4]
oldArr.pop()-->4
oldArr.pop()-->3
oldArr.pop()-->2
oldArr.pop()-->1
alert(oldArr.pop())-->undefined(空數組彈出)
(2)unshift 和 shift
unshift() 方法可向數組的開頭添加一個或更多元素,并返回新的長度。unshift() 方法將把它的參數插入 arrayObject 的頭部,并將已經存在的元素順次地移到較高的下標處,以便留出空間。該方法的第一個參數將成為數組的新元素 0,如果還有第二個參數,它將成為新的元素 1,以此類推。
請注意,unshift() 方法不創建新的創建,而是直接修改原有的數組。另外在 Internet Explorer 瀏覽器中 unshift() 無法執行!
如下示例,我們將創建一個數組,并把一個元素添加到數組的開頭,并返回數組的新長度:
<script type="text/javascript">
var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join() + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr.join())
</script>
輸出:
George,John,Thomas4William,George,John,Thomas
shift() 用于將數組的第一個元素從原數組中刪除,并返回第一個元素的值(即被刪除的元素的值)。
注意:若數組是空的,那么 shift() 將不進行任何操縱,直接返回 undefined 值。另外該方法也不創建新數組,而是直接修改原有的 arrayObject。
示例:在本例中,我們將創建一個數組,并刪除數組的第一個元素:
<script type="text/javascript">
var arr = new Array
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join() + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr.join())
</script>
輸出:
George,John,Thomas George John,Thomas
(3)join()
作用是將數組各個元素是通過指定的分隔符進行連接成為一個字符串。其作用和toString()相同。
語法
arrayObject.join(separator)
參數 separator 可選。指定要使用的分隔符。如果省略該參數,則使用逗號作為分隔符。
示例:
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join())
輸出
George,John,Thomas
(4)slice()
該方法可從已有的數組中返回選定的元素
語法
arrayObject.slice(start,end)
返回值
返回一個新的數組,包含從 start 到 end (不包括該元素)的 arrayObject 中的元素。
注意:您可使用負值從數組的尾部選取元素。如果 end 未被規定,那么 slice() 方法會選取從 start 到數組結尾的所有元素。
示例:
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join() + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr.join())
</script>
輸出:
George,John,ThomasJohn,ThomasGeorge,John,Thomas
(5)splice()
該方法用于插入、刪除或替換數組的元素。
語法
arrayObject.splice(index,howmany,element1,.....,elementX)
返回值
如果從 arrayObject 中刪除了元素,則返回的是含有被刪除的元素的數組。
說明
splice() 方法可刪除從 index 處開始的零個或多個元素,并且用參數列表中聲明的一個或多個值來替換那些被刪除的元素。需要注意的是 splice() 方法與 slice() 方法的作用是不同的,splice() 方法會直接對數組進行修改。
示例:
例子 1
在本例中,我們將創建一個新數組,并向其添加一個元素:
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr.join() + "<br />")
arr.splice(2,0,"William")
document.write(arr.join() + "<br />")
</script>
例子 2
在本例中我們將刪除位于 index 2 的元素,并添加一個新元素來替代被刪除的元素:
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr.join() + "<br />")
arr.splice(2,1,"William")
document.write(arr.join())
</script>
輸出:
George,John,Thomas,James,Adrew,MartinGeorge,John,William,James,Adrew,Martin
例子 3
在本例中我們將刪除從 index 2 ("Thomas") 開始的三個元素,并添加一個新元素 ("William") 來替代被刪除的元素:
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr.join() + "<br />")
arr.splice(2,3,"William")
document.write(arr.join())
</script>
輸出:
George,John,Thomas,James,Adrew,MartinGeorge,John,William,Martin
(6)contact()
該方法用于連接兩個或多個數組。它不會改變現有的數組,而僅僅會返回被連接數組的一個副本。
語法
arrayObject.concat(arrayX,arrayX,......,arrayX)
示例:
例子 1
在本例中,我們將把 concat() 中的參數連接到數組 a 中:
<script type="text/javascript">
var a = [1,2,3];
document.write(a.concat(4,5));
</script>
輸出:
1,2,3,4,5
例子 2
在本例中,我們創建了兩個數組,然后使用 concat() 把它們連接起來:
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))
</script>
輸出:
George,John,Thomas,James,Adrew,Martin
例子 3
在本例中,我們創建了三個數組,然后使用 concat() 把它們連接起來:
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"
document.write(arr.concat(arr2,arr3))
</script>
輸出:
George,John,Thomas,James,Adrew,Martin,William,Franklin

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Array數組里面的方法: 參數:參數size是設置的數組元素的個數。返回的數組,length字段將被設為size...
    雅俗共賞_閱讀 474評論 0 0
  • 創建數組var mycars = new Array()mycars[0] = "Saab"mycars[1] =...
    五秋木閱讀 151評論 0 0
  • 通過 HTML DOM,可訪問 JavaScript HTML 文檔的所有元素。 HTML DOM (文檔對象模型...
    夜幕小草閱讀 439評論 0 10
  • 第1章 認識JS JavaScript能做什么?1.增強頁面動態效果(如:下拉菜單、圖片輪播、信息滾動等)2.實現...
    mo默22閱讀 1,319評論 0 5
  • 一、JS前言 (1)認識JS 也許你已經了解HTML標記(也稱為結構),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,790評論 0 8