JavaScript中數組對象詳解


Array對象即數組對象用於在單個變量中存儲多個值,JS的數組是弱類型的,所以允許數組中含有不同類型的元素,數組元素甚至可以是對象或者其他數組。

  • 創建數組的語法

1Array構造器

1var list=new Array();2var list=new Array(size);3var list=new Array(element0,element1,...elementn);

 

2、字面量的方式

var Array[element0,element1,...elementn];

 

舉例子

var list=new Array(1,true,null,undefined,{x:1},[1,2,3]);

 

var list[1,true,null,undefined,{x:1},[1,2,3]];

 

  • 數組分類

1、二維數組,二維數組的本質是數組中的元素又是數組。

var arr = [[1,2],[a,b]];

alert(arr[1][0]); //a 第2列第1行所在的元素

 

2、稀疏數組

稀疏數組是包含從0開始的不連續索引的數組。在稀疏數組中一般length屬性值比實際元素個數大(不常見)
舉例
var a=["a",,"b",,,,"c",,];

  • 數組對象屬性

屬性

作用

length 屬性

 

表示數組的長度,即其中元素的個數

prototype 屬性

返回對象類型原型的引用

constructor 屬性

表示創建對象的函數

1length 屬性

通過一些操作來講解length屬性
var arr=[1,2,3,4,5,6,7,8,9,10];//定義了一個包含10個數字的數組。
數組的長度屬性是可變的

alert(arr.length); //顯示數組的長度10

arr.length=15; //增大數組的長度,length屬性是可變的

alert(arr.length); //顯示數組的長度已經變為15

 

訪問數組元素

alert(arr[3]); //顯示第4個元素的值,為4

 

減小數組長度

arr.length=2; //將數組的長度減少到2,數組中的元素只剩下索引值小於2的元素

alert(arr[9]); //這時候顯示第10個元素已經變為"undefined"因為索引值大於等於2的元素都被拋棄了

 

恢復數組長度

arr.length=10; //將數組長度恢復為10

alert(arr[9]); //長度恢復之后已經拋棄的元素卻無法收回,顯示"undefined"

 

2prototype 屬性

prototype 屬性返回對象類型原型的引用。prototype 屬性是object共有的。
objectName.prototype
objectName 參數是object對象的名稱。

說明:用 prototype 屬性提供對象的類的一組基本功能。 對象的新實例繼承賦予該對象原型的操作。

對於數組對象,用以下例子說明prototype 屬性的用途。
給數組對象添加返回數組中最大元素值的方法。要完成這一點,聲明一個函數,將它加入 Array.prototype, 並使用它。

function array_max( ){

   var i, max = this[0];

   for (i = 1; i < this.length; i++)

   {

       if (max < this[i])

       max = this[i];

   }

   return max;

}

 Array.prototype.max = array_max;var x = new Array(1, 2, 3, 4, 5, 6);var y = x.max( );

 

該代碼執行后,y 保存數組 x 中的最大值,或說 6

3constructor 屬性

constructor 屬性表示創建對象的函數。
object.constructor //object是對象或函數的名稱。
說明:constructor 屬性是所有具有prototype 的對象的成員。它們包括除 Global  Math對象以外的所有JScript固有對象。constructor屬性保存了對構造特定對象實例的函數的引用。

x = new String("Hi");if (x.constructor == String) // 進行處理(條件為真)。//或function MyFunc {// 函數體。

}

 

y = new MyFunc;if (y.constructor == MyFunc) // 進行處理(條件為真)。

 

對於數組來說:

y = new Array();

 

  • Array的對象方法

方法

作用

concat()

連接兩個或者更多的數組,並返回結果

join()

將數組的元素組起一個字符串

pop()

刪除並返回數組的最后一個元素

push()

數組末尾添加一個或者多個元素,返回新的長度

reverse

顛倒數組中元素的順序

shift()

刪除並返回數組的第一個元素

slice()

從某個已有的數組返回選定的元素

sort()

對數組元素排序

splice()

刪除元素,並向數組添加新元素

toSource()

返回該對象的源代碼

toString()

把數組轉化為字符串並返回結果

toLocalString()

把數組轉化為本地元素並返回結果

unshift

向數組開頭添加一個或者更多的元素,並返回新的長度

valueof()

返回數組對象的原始值

forEach()

遍歷數組對象

map()

對數組做一些映射

filter()

過濾

every()

檢查判斷

some()

檢查判斷

reduce()

兩兩執行一定的操作

reduceRight()

從右到左執行操作

indexOf()

數組檢索查找某個元素

Array.isArray([])

判斷是否是數組

主要對一些新特性進行講解
concat
concat作用是拼接數組,需要注意的是也可以把一個數組元素作為拼接的元素,如果這樣的話,數組會被拉平,再和其它的元素拼接起來成為新的數組,但是不會被拉平兩次,concat不會修改原數組。
例如

var arr=[1,2,3,4,5];

arr.concat([10,11],13);//[1,2,3,4,5,10,11,13]

arr.concat([1,[2,3]]);//[1,2,3,4,5,1,[1,3]]

 

slice
slicea,bab可以取負數,表示從a位置開始截取到b位置的一段數組,是一個左閉右開的區間,ab可以取負數,如果是負數代表倒數第a/b個元素

var arr=[1,2,3,4,5];

arr.slice(1,3);//[2,3]

arr.slice(1);//[2,3,4,5]

arr.slice(1,-1);//[2,3,4]

arr.slice(-4,-3);//[2]

 

splice
splice刪除元素並向數組添加新元素
object.splice(a)從左邊開始刪除a個元素
object.splice(ab)a位置開始截取其中的b個元素
object.splice(abcd)a位置開始截取b個元素,並將cd或者更多的元素插入原數組
需要注意的是splice會修改原數組

 

var arr=[1,2,3,4,5];

arr.splice(2);//[3,4,5]

arr;//[1,2];原數組被修改了

 var arr=[1,2,3,4,5];

arr.splice(22);//[3,4]

arr;//[1,2,5];

 var arr=[1,2,3,4,5];

arr.splice(11‘a’‘b’);//[2]

arr;//[1,"a","b",3,4,5];

 

foreach
foreach()函數從頭到尾把數組遍歷一遍。有三個參數分別是:數組元素,元素的索引,數組本身

var arr = [1, 2, 3, 4, 5];

arr.forEach(function(x, index, a){//分別對應:數組元素,元素的索引,數組本身

    console.log(x + '|' + index + '|' + (a === arr));

});// 1|0|true// 2|1|true// 3|2|true// 4|3|true// 5|4|true

 

說明:如果只有一個參數那這個參數代表數組元素,也就是數組的值,請看例2

2var data=[1,2,3,4,5,6];var sum=0;

data.forEach(function(v){//其中的v就是數組的值 123456

sum+=v;})document.write(sum+"<br>");//打印出來是21

 

map 
map 對數組做一些映射,map() 方法返回一個由原數組中的每個元素調用一個指定方法后的返回值組成的新數組,它與forEach的區別是forEach為數組中的每個元素執行一次回調函數。

var arr = [1, 2, 3];

arr.map(function(x) {

     return x + 10;

}); // [11, 12, 13]

arr; // [1, 2, 3]

 

filter
filter 過濾掉某些元素,和map有點類似,Arrayfilter也接收一個函數。但是和map不同的是, filter把傳入的函數依次作用於每個元素,然后根據返回值是 true 還是false決定保留還是丟棄該元素,也就是過濾掉不符合要求的某些元素。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

arr.filter(function(x, index) {

     return index % 3 === 0 || x >= 8;

}); // returns [1, 4, 7, 8, 9, 10]

arr; // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

 

every()some()
every()some()方法都是JS中數組的迭代方法。every()是對數組中的每一項運行給定函數,如果該函數對每一項返回true,則返回truesome()是對數組中每一項運行指定函數,如果該函數對任一項返回true,則返回true
總結就是every()當每個元素都符合條件的時候返回true,some()是任一項滿足條件就返回true

1 every()var arr = [1, 2, 3, 4, 5];

arr.every(function(x) {

     return x < 10;

}); // true

 

arr.every(function(x) {

     return x < 3;

}); // false

 

some只需要有一個符合的就行

2 somevar arr = [1, 2, 3, 4, 5];

arr.some(function(x) {

     return x === 3;

}); // true

 

arr.some(function(x) {

     return x === 100;

}); // false

 

reduce()
Arrayreduce()把一個函數作用在這個Array[x1, x2, x3...]上,這個函數必須接收兩個參數,reduce()把結果繼續和序列的下一個元素做累積計算,其效果就是:

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

 

var arr = [1, 2, 3];var sum = arr.reduce(function(x, y) {

     return x + y

}, 0); //參數 0是可選的,如果寫了參數0那第一次傳遞的兩個值就是0和1

如果不寫第一次傳遞的就是數組的前兩個值,計算結果是6

arr; //[1, 2, 3]

 

arr = [3, 9, 6];var max = arr.reduce(function(x, y) {

     console.log(x + "|" + y);

     return x > y ? x : y;

});// 3|9// 9|6

max; // 9

 

reduceRight
reduce一樣只不過reduceRight 變成了從右到左兩兩執行某些操作

max = arr.reduceRight(function(x, y) {

     console.log(x + "|" + y);

     return x > y ? x : y;

});// 6|9// 9|3

max; // 9

 

indexOf()
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置,indexOfa,b)表示查找a元素,從b位置開始;lastindexOf表示從右向左找。當b為負數的時候表示從倒數第幾個元素開始找,請看例子。

var arr = [1, 2, 3, 2, 1];

arr.indexOf(2); // 1

arr.indexOf(99); // -1表示沒有這個元素

arr.indexOf(1, 1); // 4

arr.indexOf(1, -3); // 4查找1從倒數第3個元素開始

arr.indexOf(2, -1); // -1查找2從倒數第1個元素開始

arr.lastIndexOf(2); // 3從右邊開始找第一次出現2的位置

arr.lastIndexOf(2, -2); // 3從右邊的倒數第二個開始找2出現的位置

arr.lastIndexOf(2, -3); // 1

 

isArray
isArray用來判斷是否是數組,但是isArrayArray構造器對象上的屬性,所以不能直接用isArray,必須要寫成Array.isArray[]),但是可以其它的判斷方法直接判斷

[]instanceof Array;//true

({}).toString.apply([])==='[object Array]';//true

[].construcror===Array;//true

 本文轉載自:https://www.juchengvi.com/looknews/113


免責聲明!

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



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