JS數組及其方法(slice,contact...)


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 方法函數的名稱:
function functionname( ) { [native code] }
Number 返回數字的文字表示。
String 返回 String 對象的值。
默認 返回 “[object objectname]”,其中 objectname 是對象類型的名稱。

 

valueOf()方法:返回指定對象的原始值。

  返回值
Array 數組的元素被轉換為字符串,這些字符串由逗號分隔,連接在一起。其操作與 Array.toString 和 Array.join方法相同。
Boolean Boolean 值。
Date 存儲的時間是從 1970 年 1 月 1 日午夜開始計的毫秒數 UTC
Function 函數本身。
Number 數字值。
Object 對象本身。這是默認情況。
String 字符串值。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM