JavaScript Array 對象

Array對象定義

Array對象用於在單個的變量中存儲多個值

建立Array對象的語法:

new Array();
new Array(size);
new Array(element0, element1, ..., elementn);

參數

參數 size 是指望的數組元素個數。返回的數組，length 字段將被設爲 size 的值。

參數 element ..., elementn 是參數列表。當使用這些參數來調用構造函數 Array() 時，新建立的數組的元素就會被初始化爲這些值。它的 length 字段也會被設置爲參數的個數。

註釋:

若是調用構造函數 Array() 時沒有使用參數，那麼返回的數組爲空，length 字段爲 0。

當調用構造函數時只傳遞給它一個數字參數，該構造函數將返回具備指定個數、元素爲 undefined 的數組。

數組的檢測方法

ECMAScript3作出規定,可使用instanceo操做符來檢測數組

<script type="text/javascript">
var nums=["one","two","three"];
//instanceof 若是檢測是數組,返回true;若果不是數組,false
console.log(nums instanceof Array)//true
console.log(typeof nums)//object
</script>

數組的轉換方法

toLocaleString()、toString()和valueOf()方法。

實例:

<script type="text/javascript">
  var nums=["one","two","three"];
  
  //調用toLocaleString()與toString()方法相同
   console.log(nums.toLocaleString())//one,two,three
  
 //調用valueOf()方法，返回的仍是這個數組。
   //因爲alert()要接收一個字符串參數，因此它會在後臺調用toString()方法
    alert(nums.valueOf());//one,two,three
    console.log(nums.valueOf())//["one", "two", "three"]

//調用toString()方法，會返回數組中每一個值的字符串形式拼接的以逗號分隔的字符串；
   console.log(nums.toString())//one,two,three


//默認都會以逗號分隔字符串的形式返回數組項
</script>

 

Array 對象屬性

屬性	描述
constructor	返回對建立此對象的數組函數的引用。
length	設置或返回數組中元素的數目。
prototype	使您有能力向對象添加屬性和方法。

 

Array 對象方法(方法具體說明參照http://www.w3school.com.cn/jsref/jsref_obj_array.asp)

方法	描述
concat()	鏈接兩個或更多的數組，並返回結果。該方法不會改變現有的數組，而僅僅會返回被鏈接數組的一個副本。
join()	把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。
pop()	刪除並返回數組的最後一個元素,若是數組已經爲空，則 pop() 不改變數組，並返回 undefined 值
push()	向數組的末尾添加一個或更多元素，並返回新的長度。它直接修改 arrayObject，而不是建立一個新的數組 提示：要想數組的開頭添加一個或多個元素，請使用 unshift() 方法。
slice()	從某個已有的數組返回選定的元素,返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。
shift()	刪除並返回數組的第一個元素 說明:  若是數組是空的，那麼 shift() 方法將不進行任何操做，返回 undefined 值。該方法不建立新數組，而是直接修改原有的 arrayObject。
unshift()	向數組的開頭添加一個或更多元素，並返回新的長度。
sort()	對數組的元素進行排序
splice()	刪除元素，並向數組添加新元素。
toSource()	返回該對象的源代碼。
toString()	把數組轉換爲字符串，並返回結果。
toLocaleString()	把數組轉換爲本地字符串，並返回結果。arrayObject 的本地字符串表示。 說明:   首先調用每一個數組元素的 toLocaleString() 方法，而後使用地區特定的分隔符把生成的字符串鏈接起來，造成一個字符串。
reverse()	顛倒數組中元素的順序。
valueOf()	返回數組對象的原始值

示例:

1. concat()方法:

語法

arrayObject.concat(arrayX,arrayX,......,arrayX)

參數	描述
arrayX	必需。該參數能夠是具體的值，也能夠是數組對象。能夠是任意多個。

返回值

返回一個新的數組。該數組是經過把全部 arrayX 參數添加到 arrayObject 中生成的。若是要進行 concat() 操做的參數是數組，那麼添加的是數組中的元素，而不是數組。

實例1:將參數鏈接到數組a中;

<script type="text/javascript">

var a = [1,2,3];
document.write(a.concat(4,5));

</script>

    輸出:

1,2,3,4,5

實例2:兩個數組鏈接

<script type="text/javascript">
 var array_a=[1,2,3];
 var array_b=[4,5];
 console.log(array_a.concat(array_b));//[1, 2, 3, 4, 5]
</script>

2.   slice()方法，它可以基於當前數組中的一個或多個項建立一個新數組。 

arrayObject.slice(start,end)

       slice()方法接收一個或兩個參數，即要返回的項的起始和結束位置；若是傳入一個參數，則返回當前傳入參數的位置到當前數組結束位置的新數組；若是傳入兩個參數，則返回起始和結束位置的新數組，但不包括結束位置的項，即前閉後開。注意：slice()不會影響原始數組。

返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。 

示例:

<script type="text/javascript">
var colors = ["red","green","blue","yellow","purple"];
var colors2 = colors.slice(1);
alert(colors2);//green,blue,yellow,purple
var colors3 = colors.slice(1,3);
alert(colors3);//green,blue 不包括位置3的"yellow"
</script>

拓展：若是slice方法的參數中有負數，則用數組的長度加上該負數來肯定起始和結束位置

<script type="text/javascript">
  var colors = ["red","green","blue","yellow","purple"];
  var colors2 = colors.slice(-2,0);
  alert(colors2);//沒有任何輸出

  var colors3 = colors.slice(-2,-1);//至關於colors.slice(colors.length-2,colors.length-1);即colors.slice(3,4);
alert(colors3);//yellow
</script>

 

3.splice()方法

語法

arrayObject.splice(index,howmany,item1,.....,itemX)

• 刪除:能夠刪除任意數量的項,只需指定2個參數:要刪除的第一項的位置(index)和要刪除的項數(howmany).
  如:splice(0,2);會刪除數組中的前兩項
• 插入:能夠向指定位置插入任意數量的項,需提供三個參數:index,howmany,item(可選多個item...),
  此時howmany通常爲0.例如：splice(2,0,"red","green")會從當前數組的位置2開始插入字符串"red"和"green"。
• 替換:能夠向指定位置插入任意數量的項,且同時刪除任意數量的項.
  只需指定3個參數：起始位置、要刪除的項數和要插入的任意數量的項。插入的項數沒必要與刪除的項數相等。例如：splice(2,1,"red","green")會刪除當前數組位置2的項，而後再從位置2開始插入字符串"red"和"green"。

注意：splice()方法始終返回一個數組，該數組包含從原始數組中刪除的項，若是沒有刪除任何項，則返回一個空數組。

示例:

<script type="text/javascript">
 var nums=["one","two","three"];
//----------1.splice(index,howmany) 刪除--------------

var remove = nums.splice(0,1);//刪除數組的第一項"one"
alert(nums);//two,three
alert(remove );//one

//若是刪除的項的起始位置大於數組的長度
var remove1 = nums.splice(3,1);
alert(nums);//one,two,three(不作改變)
alert(remove1);//沒有輸入

//同時若是刪除項的起始位置爲負數
var remove2 = nums.splice(-1,1);//至關於nums.splice(nums.length-1,1);即nums.splice(2,1)
alert(nums);//one,two
alert(remove2);//three

//-----------2.splice(index,0,item...)插入--------------
var remove3 = nums.splice(1,0,"2","3");
alert(nums);//one,2,3,two,three
alert(remove3 );//空數組，由於splice的第二個參數是0

//----------3.splice(index,hwomany,item1,item2,...)替換--------------
 var colors = ["red","green","blue"];
 var replace = colors.splice(1,1,"red","purple");
 alert(colors);//red,red,purple,blue
 alert(replace);//green
</script>

數組的迭代

ie7,ie8等支持ECMAScript3的瀏覽器使用常規的迭代語句:

for循環:

 (initialization; expression; post-loop-expression) statementfor

例子：

iCount = 6;
for (var i = 0; i < iCount; i++) {
  alert(i);
}

for-in 語句

 (property  expression) statementforin

例子：

for (sProp in window) {
  alert(sProp);
}

chrome,firefox,Ie9+等支持ECMAScript5的瀏覽器:

ECMAScript5提供5個迭代的方法。每一個方法都接收兩個參數：要在每一項上運行的函數和（可選的）運行該函數的做用域對象。傳入方法中的函數接收三個參數：數組項的值、該項在數組中的位置和數組對象自己。

• every()：對數組中的每一項運行給定函數，若是該函數對每一項都返回true，則返回true；

• filter()：對數組中的每一項運行給定函數，返回該函數會返回true的項組成的數組；

• forEach()：對數組中的每一項運行給定函數，這個方法沒有返回值；

• map()：對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組；

• some()：對數組中的每一項運行給定函數，若是該函數對任意一項返回true，則返回true。

示例:

<script type="text/javascript">
var numbers = [1,2,3,4,5,4,3,2,1];
//every循環numbers，判斷數組numbers中的每一項是否都大於2
var everyResult = numbers.every(function(item,index,array){
return (item>2);
});
alert(everyResult);//false

//some循環numbers，判斷數組numbers中項是否有大於2的項，若是有則返回true，不然返回false
var someResult = numbers.some(function(item,index,array){
return (item>2);
});
alert(someResult);//true

//filter循環numbers，判斷數組numbers中大於2的項，將數組中大於2的項返回組成數組返回，若是沒有則返回空數組
var filterResult = numbers.filter(function(item,index,array){
return (item>2);
});
alert(filterResult);//3,4,5,4,3

//forEach循環numbers，將數組numbers中的每一項都加1
var forEachResult = numbers.forEach(function(item,index,array){
array[index] = item+1;
});
alert(numbers);//2,3,4,5,6,5,4,3,2
//map循環numbers，將數組numbers中的每一項都乘以2，並返回計算後的數組
var mapResult = numbers.map(function(item,index,array){
return item*2;
});
alert(mapResult);//2,4,6,8,10,8,6,4,2
</script>

                                                                                                                         --------------分割線                                                                                                                                 2017/ 04/06