下面小編就為大家帶來一篇JavaScript基礎進階之陣列方法總結(推薦)。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考。一起跟著小編過來看看吧
陣列常用方法總結:
下面我只總結了es3中常用的陣列方法,一共有11個。 es5中新增的9個陣列方法,後續再單獨總結。
1個連接陣列的方法:concat()
2個陣列轉換為字串的方法:join()、toString()
6個增刪陣列元素的方法:pop()、push()、shift()、unshift()、slice()、splice()
2個陣列排序方法:reverse()、sort()
連接陣列的方法:
#1、concat()
作用:連接兩個數組,合併為一個新數組。
用法:arr1.concat(arr2,arr2...)
範例:
<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
陣列轉換為字串的方法:
1、join()
作用:用來把陣列中的所有元素放入一個字串。並透過指定的分隔符號進行分隔。
用法:arrayObject.join(separator)
範例:
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.join(".")) </script>
輸出:
##George.John. Thomas注意:傳回值為一個字串。如果沒有分隔符,預設以逗號分隔。2、toString()
作用:把陣列轉換為字串,並回傳結果。 用法:arrayObject.toString()範例:
#
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George"; arr[1] = "John"; arr[2] = "Thomas"; document.write(arr.toString()); </script>
增刪數組元素的方法:
#1、pop()
#作用:用於刪除並傳回陣列的最後一個元素。 用法:arrayObject.pop()pop() 方法會刪除 arrayObject 的最後一個元素,把陣列長度減 1,並且傳回它刪除的元素的值。如果陣列已經為空,則 pop() 不改變數組,並傳回 undefined 值。 範例:<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr) document.write("<br />") document.write(arr.pop()) document.write("<br />") document.write(arr) </script>
George,John,Thomas Thomas George,John
2、 push()
作用:可在陣列的末端新增一個或多個元素,並傳回新的長度。 用法:arrayObject.push(newelement1,newelement2,....,newelementX)它直接修改 arrayObject,而不是建立一個新的陣列。 push() 方法和 pop() 方法使用陣列提供的先進後出棧的功能。 範例:<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "<br />") document.write(arr.push("James") + "<br />") document.write(arr) </script>
George,John,Thomas 4 George,John,Thomas,James
3、 shift()
作用:用來把陣列的第一個元素從其中刪除,並傳回第一個元素的值。 用法:arrayObject.shift()如果陣列是空的,那麼 shift() 方法將不進行任何操作,傳回 undefined 值。請注意,該方法不會建立新數組,而是直接修改原有的 arrayObject。 範例:<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "<br />") document.write(arr.shift() + "<br />") document.write(arr) </script>
George,John,Thomas George John,Thomas
4, unshift()
作用:可在陣列的開頭新增一個或更多元素,並傳回新的長度。 用法:arrayObject.unshift(newelement1,newelement2,....,newelementX)unshift() 方法將把它的參數插入arrayObject 的頭部,並將已經存在的元素順次地移到較高的下標處,以便留出空間。此方法的第一個參數將成為陣列的新元素 0,如果還有第二個參數,它將成為新的元素 1,以此類推。 請注意,unshift() 方法不會建立新的創建,而是直接修改原有的陣列。 unshift() 方法無法在 Internet Explorer 中正確地運作! 範例:<script type="text/javascript"> var arr = new Array() arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "<br />") document.write(arr.unshift("William") + "<br />") document.write(arr) </script>
George,John,Thomas 4 William,George,John,Thomas
5,slice()
作用:可從已有的陣列中傳回選定的元素。 用法:arrayObject.slice(start,end)#start | 必要。規定從何處開始選取。如果是負數,那麼它規定從數組尾部開始算起的位置。也就是說,-1 指最後一個元素,-2 指倒數第二個元素,以此類推。 |
end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。 |
返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。
该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()。
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "<br />") document.write(arr.slice(1) + "<br />") document.write(arr) </script>
输出:
George,John,Thomas John,Thomas George,John,Thomas
6,splice()
作用:向/从数组中添加/删除项目,然后返回被删除的项目。
用法:arrayObject.splice(index,howmany,item1,.....,itemX)
index | 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。 |
howmany | 必需。要删除的项目数量。如果设置为 0,则不会删除项目。 |
item1, ..., itemX | 可选。向数组添加的新项目。 |
该方法会改变原始数组。
示例:
<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 + "<br />")arr.splice(2,0,"William") document.write(arr + "<br />") </script>
输出:
George,John,Thomas,James,Adrew,Martin George,John,William,Thomas,James,Adrew,Martin
数组元素排序:
1、reverse()
作用:用于颠倒数组中元素的顺序。
用法:arrayObject.reverse()
该方法会改变原来的数组,而不会创建新的数组。
示例:
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "<br />") document.write(arr.reverse()) </script>
输出:
George,John,Thomas Thomas,John,George
2,sort()
作用:用于对数组的元素进行排序。
用法:arrayObject.sort(sortby)
Sortby:可选,按规定是顺序排序。必须是函数。
相对于其他方法来说复杂了一点。
如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。
如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。
<script type="text/javascript"> function sortNumber(a,b) { return a - b } var arr = new Array(6) arr[0] = "10" arr[1] = "5" arr[2] = "40" arr[3] = "25" arr[4] = "1000" arr[5] = "1" document.write(arr + "<br />") document.write(arr.sort(sortNumber)) </script>
输出:
10,5,40,25,1000,1 1,5,10,25,40,1000
上面这个例子是让数组元素从小到大排序,如果想实现从大到小排序,只需要将sortNumber函数中的a-b改为b-a即可。
<script type="text/javascript"> function sortNumber(a,b) { return b - a; } var arr = new Array(6) arr[0] = "10" arr[1] = "5" arr[2] = "40" arr[3] = "25" arr[4] = "1000" arr[5] = "1" document.write(arr + "<br />") document.write(arr.sort(sortNumber)) </script>
输出:
10,5,40,25,1000,1 1000,40,25,10,5,1
补充:
数组对象的属性:
属性 | 描述 |
constructor | 返回对创建此对象的数组函数的引用。 |
length | 设置或返回数组中元素的数目。 |
prototype | 使您有能力向对象添加属性和方法。 |
以下这个例子展示了如何使用constructor属性
<script type="text/javascript"> var test=new Array(); if (test.constructor==Array) { document.write("This is an Array"); } if (test.constructor==Boolean) { document.write("This is a Boolean"); } if (test.constructor==Date) { document.write("This is a Date"); } if (test.constructor==String) { document.write("This is a String"); } </script>
输出:
This is an Array
length 属性可设置或返回数组中元素的数目。数组的 length 属性总是比数组中定义的最后一个元素的下标大 1。对于那些具有连续元素,而且以元素 0 开始的常规数组而言,属性 length 声明了数组中的元素的个数。设置 length 属性可改变数组的大小。如果设置的值比其当前值小,数组将被截断,其尾部的元素将丢失。如果设置的值比它的当前值大,数组将增大,新的元素被添加到数组的尾部,它们的值为 undefined。
获取数组的长度:arrayObject.length
以上是JavaScript基礎進階之數組相關介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!