JS數組的創建:
1,使用Array數組的方式:
var arrayObj = new Array(); //創建一個數組
var arrayObj = new Array([size]); //創建一個數組並指定長度,注意不是上限,是長度
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 創建一個數組並賦值
要說明的是,雖然第二種方法創建數組指定了長度,但實際上所有情況下數組都是變長的,也就是說即使指定了長度為5,仍然可以將元素存儲在規定長度以外的,注意:這時長度會隨之改變。
2,采用字面量的方法
var arr = [];//創建一個空數組
var arr2 = [1,2,3];//創建一個有三個元素的數組
JS數組的主要方法:
1,數組元素的添加
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 將一個或多個新元素添加到數組結尾,並返回數組新長度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 將一個或多個新元素添加到數組開始,數組中的元素自動后移,返回數組新長度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//將一個或多個新元素插入到數組的指定位置,插入位置的元素自動后移,返回""。
<!DOCTYPE html> <html> <body> <p id="demo">Click the button to add a new element to the array.</p> <button onclick="myFunction()">Try it</button> <script> var fruits = ["Banana", "Orange", "Apple", "Mango"]; function myFunction() { fruits.push("Kiwi") var x=document.getElementById("demo"); x.innerHTML=fruits; } </script> </body> </html
測試結果:Banana,Orange,Apple,Mango,Kiwi
例子二:
<!DOCTYPE html> <html> <body> <p id="demo">Click the button to add elements to the array.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon","Pineapple"); var x=document.getElementById("demo"); x.innerHTML=fruits; } </script> <p><b>Note:</b> The unshift() method does not work properly in Internet Explorer 8 and earlier, the values will be inserted, but the return value will be <em>undefined</em>.</p> </body> </html>
測試結果:Lemon,Pineapple,Banana,Orange,Apple,Mango
例子三:在數組的第二個位置插入元素
<!DOCTYPE html> <html> <body> <p id="demo">Click the button to add elements to the array.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2,0,"Lemon","Kiwi"); var x=document.getElementById("demo"); x.innerHTML=fruits; } </script> </body> </html>
測試結果:Banana,Orange,Lemon,Kiwi,Apple,Mango
數組元素的刪除
arrayObj.pop(); //移除最后一個元素並返回該元素值(pop和push連在一起記憶,隊列形式的操作)
arrayObj.shift(); //移除最前一個元素並返回該元素值,數組中元素自動前移(shift,unshift針對的都是數組最前面的元素,棧形式的數據操作)
arrayObj.splice(deletePos,deleteCount); //刪除從指定位置deletePos開始的指定數量deleteCount的元素,數組形式返回所移除的元素
注意:splice方法既可以用於數組的刪除也可以用於數組的插入
splice() 方法向/從數組中添加/刪除項目,然后返回被刪除的項目。該方法會改變原始數組。
arrayObject.splice(index,howmany,item1,.....,itemX)
index:必填,數組刪除或插入的位置。使用負數可從數組結尾處規定位置。
howmany:必需。要刪除的項目數量。如果設置為 0,則不會刪除項目。
item1, ..., itemX:可選。向數組添加的新項目。
返回值:新數組,要是刪除的話,也會包括被刪除的元素
要是刪除的話,splice() 方法可刪除從 index 處開始的零個或多個元素,並且用參數列表中聲明的一個或多個值來替換那些被刪除的元素。如果從 arrayObject 中刪除了元素,則返回的是含有被刪除的元素的數組
請注意,splice() 方法與 slice() 方法的作用是不同的,splice() 方法會直接對數組進行修改。
splice例子:我們將刪除從 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 + "<br />") arr.splice(2,3,"William") document.write(arr) </script>
輸出結果:
George,John,Thomas,James,Adrew,Martin
George,John,William,Martin
數組元素截取
1,slice方法:
arrayObject.slice(start,end)可以從數組中返回start下標開始取值,直到end下標結束(不包括)。
start:必需。規定從何處開始選取。如果是負數,那么它規定從數組尾部開始算起的位置。也就是說,-1 指最后一個元素,-2 指倒數第二個元素,以此類推。
end:可選。規定從何處結束選取。該參數是數組片斷結束處的數組下標。如果沒有指定該參數,那么切分的數組包含從 start 到數組結束的所有元素。如果這個參數是負數,那么它規定的是從數組尾部開始算起的元素。若end為
返回值
返回一個新的數組,包含從 start 到 end (不包括該元素)的 arrayObject 中的元素。
注意:請注意,該方法並不會修改數組,而是返回一個子數組。如果想刪除數組中的一段元素,應該使用方法 Array.splice()。
例子 1
在本例中,我們將創建一個新數組,然后顯示從其中選取的元素:
<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
數組元素的合並
Contact是將多個數組(也可以是字符串,或者是數組和字符串的混合)連接為一個數組,返回連接好的新的數組
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]);
如果沒有參數,則表示對數組進行了一次深拷貝
contact例子:
<!DOCTYPE html> <html> <body> <p id="demo">Click the button to join three arrays.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var hege = ["Cecilie", "Lone"]; var stale = ["Emil", "Tobias", "Linus"]; var kai = ["Robin"]; var children = hege.concat(stale,kai); var x=document.getElementById("demo"); x.innerHTML=children; } </script> </body> </html>
測試結:Cecilie,Lone,Emil,Tobias,Linus,Robin
參數也可以是string類型:
<!DOCTYPE html> <html> <body> <p id="demo">Click the button to join three arrays.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var hege = ["Cecilie,Lone"]; var stale = "Emil,Bob" var kai = "Robin"; var children = hege.concat(stale,kai); var x=document.getElementById("demo"); x.innerHTML=children; } </script> </body> </html>
結果:Cecilie,Lone,Emil,Bob,Robin
數組的拷貝
arrayObj.slice(0); //slice(start,end)start設置為0,省略end則表示從頭截取到為,即對數據進行了一份拷貝。返回數組的拷貝數組,注意是一個新的數組,不是指向
arrayObj.concat(); //返回數組的拷貝數組,注意是一個新的數組,不是指向
contact深拷貝的例子:
<!DOCTYPE html> <html> <body> <p id="demo">Click the button to join three arrays.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var hege = ["Cecilie,Lone"]; var stale = "Emil,Bob" var kai = "Robin"; var children = hege.concat(); var x=document.getElementById("demo"); x.innerHTML=children; alert(children==hege) } </script> </body> </html>
結果:
頁面顯示:Cecilie,Lone
控制台:false
children==hege 為false原因是因為深拷貝,children和hege指向了不同的內存中的對象。
數組的排序
arrayObj.reverse(); //反轉元素(最前的排到最后、最后的排到最前),返回數組地址
arrayObj.sort(); //對數組元素排序,返回數組地址
數組與字符串互換
數組的toString(),valueOf()方法可是使得數組以字符串的形式輸出,但是是存在差別:
toString一定將所有內容轉為字符串
valueOf取出對象內部的值,不進行類型轉換
另外,Array還有join()方法,是以指定的分隔符,來構建字符串。
字符串轉數組:使用split()方法
例子:
<script type="text/javascript"> var array=["How","are","you"]; var text1=array.toString(); console.log("toString方法生成text1:"+text1); console.log("toString()處理后的還是array嗎?") console.log(text1 instanceof Array); var text2=array.valueOf(); console.log("valueOf方法生成text2:"+text2) console.log("valueOf()處理后的還是數組嗎?") console.log(text2 instanceof Array); var text3=array.join(""); console.log("join方法生成text3:"+text3); console.log("join()處理后的還是array嗎?") console.log(text3 instanceof Array); var str="My,name,is,Lucy"; var temp=str.split(","); console.log("split方法生成的:"+temp) console.log(" split方法生成的變量是array嗎?") console.log(temp instanceof Array); </script>
結果:
以下通過以上例子可以得出,
valueOf取出對象內部的值,不進行類型轉換。雖然以字符串的形式輸出內容,但是還是數組格式。split()就是將字符串轉為了數組。
各種類型中toString()方法和valueOf()方法返回的值:
toString()方法:返回對象的字符串表示。
操作 | |
---|---|
Array | 將 Array 的元素轉換為字符串。結果字符串由逗號分隔,且連接起來。 |
Boolean | 如果 Boolean 值是 true,則返回 “true”。否則,返回 “false”。 |
Date | 返回日期的文字表示法。 |
Error | 返回一個包含相關錯誤消息的字符串。 |
Function | 返回如下格式的字符串,其中 functionname 是被調用 toString 方法函數的名稱: |
Number | 返回數字的文字表示。 |
String | 返回 String 對象的值。 |
默認 | 返回 “[object objectname] ”,其中 objectname 是對象類型的名稱。 |
valueOf()方法:返回指定對象的原始值。
返回值 | |
---|---|
Array | 數組的元素被轉換為字符串,這些字符串由逗號分隔,連接在一起。其操作與 Array.toString 和 Array.join方法相同。 |
Boolean | Boolean 值。 |
Date | 存儲的時間是從 1970 年 1 月 1 日午夜開始計的毫秒數 UTC。 |
Function | 函數本身。 |
Number | 數字值。 |
Object | 對象本身。這是默認情況。 |
String | 字符串值。 |