首頁 > web前端 > js教程 > JavaScript基礎進階之數組相關介紹

JavaScript基礎進階之數組相關介紹

巴扎黑
發布: 2017-09-05 09:37:16
原創
1545 人瀏覽過

下面小編就為大家帶來一篇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>
登入後複製

輸出:

George,John,Thomas

傳回值與沒有參數的join() 方法傳回的字串相同。數組中的元素之間以逗號分隔。

增刪數組元素的方法:

#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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板