淺析JavaScript中的array數(shù)組類型系統(tǒng)
來源:易賢網(wǎng) 閱讀:854 次 日期:2016-07-26 15:34:51
溫馨提示:易賢網(wǎng)小編為您整理了“淺析JavaScript中的array數(shù)組類型系統(tǒng)”,方便廣大網(wǎng)友查閱!

前面的話

數(shù)組是一組按序排列的值,相對地,對象的屬性名稱是無序的。從本質上講,數(shù)組使用數(shù)字作為查找鍵,而對象擁有用戶自定義的屬性名。javascript沒有真正的關聯(lián)數(shù)組,但對象可用于實現(xiàn)關聯(lián)的功能

Array()僅僅是一種特殊類型的Object(),也就是說,Array()實例基本上是擁有一些額外功能的Object()實例。數(shù)組可以保存任何類型的值,這些值可以隨時更新或刪除,且數(shù)組的大小是動態(tài)調(diào)整的

除了對象之外,數(shù)組Array類型可能是javascript中最常用的類型了。而且,javascript中的數(shù)組與其他多數(shù)語言中的數(shù)組有著相當大的區(qū)別。本文將介紹javascript中的數(shù)組Array類型

創(chuàng)建數(shù)組

有兩種創(chuàng)建數(shù)組的方法:使用字面量語法和使用Array()構造函數(shù)

【字面量】

使用數(shù)組字面量是創(chuàng)建數(shù)組最簡單的方法,在方括號中將數(shù)組元素用逗號隔開即可

var empty = []; //沒有元素的數(shù)組

var primes = [2,3,5,7,11]; //有5個數(shù)值的數(shù)組

雖然javascript數(shù)組與其他語言中的數(shù)組都是數(shù)據(jù)的有序列表,但與其他語言不同的是,javascript數(shù)組的每一項可以保存任何類型的數(shù)據(jù)

var misc = [1.1,true, "a"]; //3個不同類型的元素

數(shù)組字面量中的值不一定要是常量,它們可以是任意的表達式

var base = 1024;

var table = [base,base+1,base+2,base+3];

它可以包含對象字面量或其他數(shù)組字面量

var b = [ [1,{x:1,y:2}],[2,{x:3,y:4}] ];

如果數(shù)組的元素還是數(shù)組,就形成了多維數(shù)組

var a = [[1, 2], [3, 4]];

[注意]使用數(shù)字字面量表示法時,不會調(diào)用Array構造函數(shù)

【構造函數(shù)】

有三種方式調(diào)用構造函數(shù)

【1】沒有參數(shù),創(chuàng)建一個空數(shù)組

//該方法創(chuàng)建一個沒有任何元素的空數(shù)組,等同于數(shù)組直接量[]

var a = new Array();

【2】有一個數(shù)值參數(shù),該參數(shù)用于指定數(shù)組的長度

var a = new Array(10);

console.log(a);//[]

console.log(a[0],a.length);//undefined 10

[注意]若存在一個其他類型的參數(shù),則會創(chuàng)建包含那個值的只有一項的數(shù)組

var a = new Array('10');

console.log(a);//['10']

console.log(a[0],a.length);//10 1

【3】有多個參數(shù)時,參數(shù)表示為數(shù)組的具體元素

var a = new Array(1,2,3);

console.log(a);//[1,2,3]

console.log(a[0],a[1],a[2]);//1 2 3

使用Array()構造函數(shù)時,可以省略new操作符

var a1 = Array();

var a2 = Array(10);

var a3 = Array(1,2,3);

console.log(a1,a2,a3);//[] [] [1,2,3]

數(shù)組本質

數(shù)組是按次序排列的一組值,本質上,數(shù)組是一種特殊的對象

typeof [1, 2, 3] // "object"

數(shù)組的特殊性體現(xiàn)在,它的鍵名是按次序排列的一組整數(shù)(0,1,2…)。由于數(shù)組成員的鍵名是固定的,因此數(shù)組不用為每個元素指定鍵名,而對象的每個成員都必須指定鍵名

var arr = ['a', 'b', 'c'];

console.log(Object.keys(arr));// ["0", "1", "2"]

var obj = {

name1: 'a',

name2: 'b',

name3: 'c'

};

數(shù)組是對象的特殊形式,使用方括號訪問數(shù)組元素就像用方括號訪問對象的屬性一樣

javascript語言規(guī)定,對象的鍵名一律為字符串,所以,數(shù)組的鍵名其實也是字符串。之所以可以用數(shù)值讀取,是因為非字符串的鍵名會被轉為字符串,然后將其作為屬性名來使用

o={}; //創(chuàng)建一個普通的對象

o[1]="one"; //用一個整數(shù)來索引它

//數(shù)值鍵名被自動轉成字符串

var arr = ['a', 'b', 'c'];

arr['0'] // 'a'

arr[0] // 'a'

但是,一定要區(qū)分數(shù)組索引和對象的屬性名:所有的索引都是屬性名,但只有在0~232-2(4294967294)之間的整數(shù)屬性名才是索引

var a = [];

//索引

a['1000'] = 'abc';

a[1000] // 'abc'

//索引

a[1.00] = 6;

a[1] // 6

[注意]單獨的數(shù)值不能作為標識符(identifier)。所以,數(shù)組成員只能用方括號法表示

var arr = [1, 2, 3];

arr[0];//1

arr.0;//SyntaxError

可以使用負數(shù)或非整數(shù)來索引數(shù)組。但由于其不在0~2的32次方-2的范圍內(nèi),所以其只是數(shù)組的屬性名,而不是數(shù)組的索引,明顯的特征是不改變數(shù)組的長度

var a = [1,2,3];

//屬性名

a[-1.23]=true;

console.log(a.length);//3

//索引

a[10] = 5;

console.log(a.length);//11

//屬性名

a['abc']='testing';

console.log(a.length);//11

稀疏數(shù)組

稀疏數(shù)組就是包含從0開始的不連續(xù)索引的數(shù)組

【1】制造稀疏數(shù)組最直接的方法就是使用delete操作符

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

delete a[1];

console.log(a[1]);//undefined

console.log(1 in a);//false

【2】數(shù)組的逗號之間可以省略元素值,通過省略元素值也可以制造稀疏數(shù)組

var a =[1,,3,4,5];

console.log(a[1]);//undefined

console.log(1 in a);//false

[注意]省略的元素值和值為undefined的元素值是有區(qū)別的

var a =[1,,3,4,5];

console.log(a[1]);//undefined

console.log(1 in a);//false

var a =[1,undefined,3,4,5];

console.log(a[1]);//undefined

console.log(1 in a);//true

如果在數(shù)組的末尾使用逗號時,瀏覽器之間是有差別的。標準瀏覽器會忽略該逗號,而IE8-瀏覽器則會在末尾添加undefined值

//標準瀏覽器輸出[1,2],而IE8-瀏覽器輸出[1,2,undefined]

var a = [1,2,];

console.log(a);

//標準瀏覽器輸出2,而IE8-瀏覽器輸出3

var a = [,,];

console.log(a.length);

足夠稀疏的數(shù)組通常在實現(xiàn)上比稠密的數(shù)組更慢,內(nèi)存利用率更高,在這樣的數(shù)組中查找元素的時間與常規(guī)對象屬性的查找時間一樣長

數(shù)組長度

每個數(shù)組有一個length屬性,就是這個屬性使其區(qū)別于常規(guī)的JavaScript對象。針對稠密(也就是非稀疏)數(shù)組,length屬性值代表數(shù)組中元素的個數(shù),其值比數(shù)組中最大的索引大1

[].length //=>0:數(shù)組沒有元素

['a','b','c'].length //=>3:最大的索引為2,length為3

當數(shù)組是稀疏數(shù)組時,length屬性值大于元素的個數(shù),同樣地,其值比數(shù)組中最大的索引大1

[,,,].length; //3

(Array(10)).length;//10

var a = [1,2,3];

console.log(a.length);//3

delete a[1];

console.log(a.length);//3

數(shù)組的特殊性主要體現(xiàn)在數(shù)組長度是可以動態(tài)調(diào)整的:

【1】如果為一個數(shù)組元素賦值,索引i大于等于現(xiàn)有數(shù)組的長度時,length屬性的值將設置為i+1

var arr = ['a', 'b'];

arr.length // 2

arr[2] = 'c';

arr.length // 3

arr[9] = 'd';

arr.length // 10

arr[1000] = 'e';

arr.length // 1001

【2】設置length屬性為小于當前長度的非負整數(shù)n時,當前數(shù)組索引值大于等于n的元素將從中刪除

a=[1,2,3,4,5]; //從5個元素的數(shù)組開始

a.length = 3; //現(xiàn)在a為[1,2,3]

a.length = 0; //刪除所有的元素。a為[]

a.length = 5; //長度為5,但是沒有元素,就像new

Array(5)

[注意]將數(shù)組清空的一個有效方法,就是將length屬性設為0

var arr = [ 'a', 'b', 'c' ];

arr.length = 0;

arr // []

【3】將數(shù)組的length屬性值設置為大于其當前的長度。實際上這不會向數(shù)組中添加新的元素,它只是在數(shù)組尾部創(chuàng)建一個空的區(qū)域

var a = ['a'];

a.length = 3;

console.log(a[1]);//undefined

console.log(1 in a);//false

如果人為設置length為不合法的值(即0——232-2范圍以外的值),javascript會報錯

// 設置負值

[].length = -1// RangeError: Invalid array length

// 數(shù)組元素個數(shù)大于等于2的32次方

[].length = Math.pow(2,32)// RangeError: Invalid array length

// 設置字符串

[].length = 'abc'// RangeError: Invalid array length

由于數(shù)組本質上是對象,所以可以為數(shù)組添加屬性,但是這不影響length屬性的值

var a = [];

a['p'] = 'abc';

console.log(a.length);// 0

a[2.1] = 'abc';

console.log(a.length);// 0

數(shù)組遍歷

使用for循環(huán)遍歷數(shù)組元素最常見的方法

var a = [1, 2, 3];

for(var i = 0; i < a.length; i++) {

console.log(a[i]);

}

當然,也可以使用while循環(huán)

var a = [1, 2, 3];

var i = 0;

while (i < a.length) {

console.log(a[i]);

i++;

}

var l = a.length;

while (l--) {

console.log(a[l]);

}

但如果數(shù)組是稀疏數(shù)組時,使用for循環(huán),就需要添加一些條件

//跳過不存在的元素

var a = [1,,,2];

for(var i = 0; i < a.length; i++){

if(!(i in a)) continue;

console.log(a[i]);

}

還可以使用for/in循環(huán)處理稀疏數(shù)組。循環(huán)每次將一個可枚舉的屬性名(包括數(shù)組索引)賦值給循環(huán)變量。不存在的索引將不會遍歷到

var a = [1,,,2];

for(var i in a){

console.log(a[i]);

}

由于for/in循環(huán)能夠枚舉繼承的屬性名,如添加到Array.prototype中的方法。由于這個原因,在數(shù)組上不應該使用for/in循環(huán),除非使用額外的檢測方法來過濾不想要的屬性

var a = [1,,,2];

a.b = 'b';

for(var i in a){

console.log(a[i]);//1 2 'b'

//跳過不是非負整數(shù)的i

var a = [1,,,2];

a.b = 'b';

for(var i in a){

if(String(Math.floor(Math.abs(Number(i)))) !== i) continue;

console.log(a[i]);//1 2

}

javascript規(guī)范允許for/in循環(huán)以不同的順序遍歷對象的屬性。通常數(shù)組元素的遍歷實現(xiàn)是升序的,但不能保證一定是這樣的。特別地,如果數(shù)組同時擁有對象屬性和數(shù)組元素,返回的屬性名很可能是按照創(chuàng)建的順序而非數(shù)值的大小順序。如果算法依賴于遍歷的順序,那么最好不要使用for/in而用常規(guī)的for循環(huán)

類數(shù)組

擁有l(wèi)ength屬性和對應非負整數(shù)屬性的對象叫做類數(shù)組(array-like object)

//類數(shù)組演示

var a = {};

var i = 0;

while(i < 10){

a[i] = i*i;

i++;

}

a.length = i;

var total = 0;

for(var j = 0; j < a.length; j++){

total += a[j];

}

有三個常見的類數(shù)組對象:

【1】arguments對象

// arguments對象

function args() { return arguments }

var arrayLike = args('a', 'b');

arrayLike[0] // 'a'

arrayLike.length // 2

arrayLike instanceof Array // false

【2】DOM方法(如document.getElementsByTagName()方法)返回的對象

// DOM元素

var elts = document.getElementsByTagName('h3');

elts.length // 3

elts instanceof Array // false

【3】字符串

// 字符串

'abc'[1] // 'b'

'abc'.length // 3

'abc' instanceof Array // false

[注意]字符串是不可變值,故當把它們作為數(shù)組看待時,它們是只讀的。如push()、sort()、reverse()、splice()等數(shù)組方法會修改數(shù)組,它們在字符串上是無效的,且會報錯

var str = 'abc';

Array.prototype.forEach.call(str, function(chr) {

console.log(chr);//a b c

});

Array.prototype.splice.call(str,1);

console.log(str);//TypeError: Cannot delete property '2' of [object String]

數(shù)組的slice方法將類數(shù)組對象變成真正的數(shù)組

var arr = Array.prototype.slice.call(arrayLike);

javascript數(shù)組方法是特意定義為通用的,因此它們不僅應用在真正的數(shù)組而且在類數(shù)組對象上都能正確工作。在ECMAScript5中,所有的數(shù)組方法都是通用的。在ECMAScript3中,除了toString()和toLocaleString()以外的所有方法也是通用的

var a = {'0':'a','1':'b','2':'c',length:3};

Array.prototype.join.call(a,'+');//'a+b+c'

Array.prototype.slice.call(a,0);//['a','b','c']

Array.prototype.map.call(a,function(x){return x.toUpperCase();});//['A','B','C']

更多信息請查看網(wǎng)絡編程
易賢網(wǎng)手機網(wǎng)站地址:淺析JavaScript中的array數(shù)組類型系統(tǒng)

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網(wǎng)