JavaScript中數(shù)組對(duì)象詳解

Array對(duì)象即數(shù)組對(duì)象用于在單個(gè)變量中存儲(chǔ)多個(gè)值,JS的數(shù)組是弱類型的,所以允許數(shù)組中含有不同類型的元素,數(shù)組元素甚至可以是對(duì)象或者其他數(shù)組。

  • ** 創(chuàng)建數(shù)組的語法**

1、Array構(gòu)造器

1、var list=new Array();
2、var list=new Array(size);
3、var 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]];
  • ** 數(shù)組的分類**

1、二維數(shù)組,二維數(shù)組的本質(zhì)是數(shù)組中的元素又是數(shù)組。

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

2、稀疏數(shù)組

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

  • 數(shù)組對(duì)象屬性

|屬性 | 作用 |
| :--------- :|:-------------:|
|length 屬性 | 表示數(shù)組的長度,即其中元素的個(gè)數(shù)|
| prototype 屬性 |返回對(duì)象類型原型的引用|
| constructor 屬性 |表示創(chuàng)建對(duì)象的函數(shù)|

1、length 屬性

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

alert(arr.length); //顯示數(shù)組的長度10
arr.length=15; //增大數(shù)組的長度,length屬性是可變的
alert(arr.length); //顯示數(shù)組的長度已經(jīng)變?yōu)?5

訪問數(shù)組元素

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

減小數(shù)組長度

arr.length=2; //將數(shù)組的長度減少到2,數(shù)組中的元素只剩下索引值小于2的元素
alert(arr[9]); //這時(shí)候顯示第10個(gè)元素已經(jīng)變?yōu)?undefined"因?yàn)樗饕荡笥诘扔?的元素都被拋棄了

恢復(fù)數(shù)組長度

arr.length=10; //將數(shù)組長度恢復(fù)為10
alert(arr[9]); //長度恢復(fù)之后已經(jīng)拋棄的元素卻無法收回,顯示"undefined"

2、prototype 屬性

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

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

對(duì)于數(shù)組對(duì)象,用以下例子說明prototype 屬性的用途。
給數(shù)組對(duì)象添加返回?cái)?shù)組中最大元素值的方法。要完成這一點(diǎn),聲明一個(gè)函數(shù),將它加入 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( );

該代碼執(zhí)行后,y 保存數(shù)組 x 中的最大值,或說 6。

3、constructor 屬性

constructor 屬性表示創(chuàng)建對(duì)象的函數(shù)。
object.constructor //object是對(duì)象或函數(shù)的名稱。
說明:constructor 屬性是所有具有prototype 的對(duì)象的成員。它們包括除 GlobalMath對(duì)象以外的所有JScript固有對(duì)象。constructor屬性保存了對(duì)構(gòu)造特定對(duì)象實(shí)例的函數(shù)的引用。

例如:

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

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

對(duì)于數(shù)組來說:

y = new Array();
  • ** Array的對(duì)象方法**

說明:部分是ECMAScript5的新特性(IE678不支持)

|方法 | 作用 |
| :--------- :|:-------------:|
|concat() | 連接兩個(gè)或者更多的數(shù)組,并返回結(jié)果|
|join() | 將數(shù)組的元素組起一個(gè)字符串|
|pop() | 刪除并返回?cái)?shù)組的最后一個(gè)元素|
|push() | 數(shù)組末尾添加一個(gè)或者多個(gè)元素,返回新的長度|
|reverse|顛倒數(shù)組中元素的順序|
|shift()|刪除并返回?cái)?shù)組的第一個(gè)元素|
|slice()|從某個(gè)已有的數(shù)組返回選定的元素|
|sort()|對(duì)數(shù)組元素排序|
|splice() | 刪除元素,并向數(shù)組添加新元素|
|toSource() | 返回該對(duì)象的源代碼|
|toString()|把數(shù)組轉(zhuǎn)化為字符串并返回結(jié)果|
|toLocalString()|把數(shù)組轉(zhuǎn)化為本地元素并返回結(jié)果|
|unshift|向數(shù)組開頭添加一個(gè)或者更多的元素,并返回新的長度|
|valueof()|返回?cái)?shù)組對(duì)象的原始值|
|forEach()|遍歷數(shù)組對(duì)象|
|map()|對(duì)數(shù)組做一些映射|
|filter()|過濾|
|every()|檢查判斷|
|some()|檢查判斷|
|reduce()|兩兩執(zhí)行一定的操作|
|reduceRight()|從右到左執(zhí)行操作|
|indexOf()|數(shù)組檢索查找某個(gè)元素|
|Array.isArray([])|判斷是否是數(shù)組|
主要對(duì)一些新特性進(jìn)行講解
concat
concat作用是拼接數(shù)組,需要注意的是也可以把一個(gè)數(shù)組元素作為拼接的元素,如果這樣的話,數(shù)組會(huì)被拉平,再和其它的元素拼接起來成為新的數(shù)組,但是不會(huì)被拉平兩次,concat不會(huì)修改原數(shù)組。
例如

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
slice(a,b)a和b可以取負(fù)數(shù),表示從a位置開始截取到b位置的一段數(shù)組,是一個(gè)左閉右開的區(qū)間,a和b可以取負(fù)數(shù),如果是負(fù)數(shù)代表倒數(shù)第a/b個(gè)元素

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刪除元素并向數(shù)組添加新元素
object.splice(a)從左邊開始刪除a個(gè)元素
object.splice(a,b)從a位置開始截取其中的b個(gè)元素
object.splice(a,b,c,d)從a位置開始截取b個(gè)元素,并將c和d或者更多的元素插入原數(shù)組
需要注意的是splice會(huì)修改原數(shù)組

var arr=[1,2,3,4,5];
arr.splice(2);//[3,4,5]
arr;//[1,2];原數(shù)組被修改了

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

var arr=[1,2,3,4,5];
arr.splice(1,1,‘a(chǎn)’,‘b’);//[2]
arr;//[1,"a","b",3,4,5];

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

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a)
{//分別對(duì)應(yīng):數(shù)組元素,元素的索引,數(shù)組本身
    console.log(x + '|' + index + '|' + (a === arr));
});
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

說明:如果只有一個(gè)參數(shù)那這個(gè)參數(shù)代表數(shù)組元素,也就是數(shù)組的值,請(qǐng)看例2。

例2
var data=[1,2,3,4,5,6];
var sum=0;
data.forEach(function(v){//其中的v就是數(shù)組的值 123456
sum+=v;})
document.write(sum+"<br>");//打印出來是21

**map **
map 對(duì)數(shù)組做一些映射,map() 方法返回一個(gè)由原數(shù)組中的每個(gè)元素調(diào)用一個(gè)指定方法后的返回值組成的新數(shù)組,它與forEach的區(qū)別是forEach為數(shù)組中的每個(gè)元素執(zhí)行一次回調(diào)函數(shù)。

var arr = [1, 2, 3];
arr.map(function(x) {
     return x + 10;
}); // [11, 12, 13]
arr; // [1, 2, 3]

filter
filter 過濾掉某些元素,和map有點(diǎn)類似,Array的filter也接收一個(gè)函數(shù)。但是和map不同的是, filter把傳入的函數(shù)依次作用于每個(gè)元素,然后根據(jù)返回值是 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中數(shù)組的迭代方法。every()是對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù),如果該函數(shù)對(duì)每一項(xiàng)返回true,則返回true。some()是對(duì)數(shù)組中每一項(xiàng)運(yùn)行指定函數(shù),如果該函數(shù)對(duì)任一項(xiàng)返回true,則返回true。
總結(jié)就是every()當(dāng)每個(gè)元素都符合條件的時(shí)候返回true,而some()是任一項(xiàng)滿足條件就返回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只需要有一個(gè)符合的就行

例2 some
var arr = [1, 2, 3, 4, 5];
arr.some(function(x) {
     return x === 3;
}); // true

arr.some(function(x) {
     return x === 100;
}); // false

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

[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); //參數(shù) 0是可選的,如果寫了參數(shù)0那第一次傳遞的兩個(gè)值就是0和1
如果不寫第一次傳遞的就是數(shù)組的前兩個(gè)值,計(jì)算結(jié)果是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 變成了從右到左兩兩執(zhí)行某些操作

max = arr.reduceRight(function(x, y) {
     console.log(x + "|" + y);
     return x > y ? x : y;
});
// 6|9
// 9|3
max; // 9

indexOf()
indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置,indexOf(a,b)表示查找a元素,從b位置開始;lastindexOf表示從右向左找。當(dāng)b為負(fù)數(shù)的時(shí)候表示從倒數(shù)第幾個(gè)元素開始找,請(qǐng)看例子。

var arr = [1, 2, 3, 2, 1];
arr.indexOf(2); // 1
arr.indexOf(99); // -1表示沒有這個(gè)元素
arr.indexOf(1, 1); // 4
arr.indexOf(1, -3); // 4查找1從倒數(shù)第3個(gè)元素開始
arr.indexOf(2, -1); // -1查找2從倒數(shù)第1個(gè)元素開始
arr.lastIndexOf(2); // 3從右邊開始找第一次出現(xiàn)2的位置
arr.lastIndexOf(2, -2); // 3從右邊的倒數(shù)第二個(gè)開始找2出現(xiàn)的位置
arr.lastIndexOf(2, -3); // 1

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

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

數(shù)組和一般對(duì)象的比較

| |數(shù)組 / 一般對(duì)象 |
| :--------- : | :--------- :|
| 相同點(diǎn)| 都可以繼承,對(duì)象不一定是數(shù)組,都可以當(dāng)做對(duì)象添加屬性 |
|不同點(diǎn) | 數(shù)組自動(dòng)更新length按索引訪問數(shù)組比訪問一般對(duì)象屬性明顯迅速。數(shù)組對(duì)象繼承Array.prototype上的大量數(shù)組操作方法|
數(shù)組和字符串的比較

| |數(shù)組 /字符串 |
| :--------- : |:-------------:|
| 相同點(diǎn)|字符串是數(shù)組的一種 |
|不同點(diǎn) |字符串是不可變的數(shù)組,字符串沒有數(shù)組的方法|
數(shù)組屬性參考網(wǎng)頁

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Javascript有很多數(shù)組的方法,有的人有W3C的API,還可以去MDN上去找,但是我覺得API上說的不全,M...
    頑皮的雪狐七七閱讀 4,490評(píng)論 0 6
  • “喂,最近學(xué)習(xí)怎么樣?上課認(rèn)真聽了嗎?有沒有經(jīng)常問老師問題?打算好學(xué)文還是學(xué)理了嗎……” 仿佛我們之間一切的話題就...
    陸大大雨_LY閱讀 281評(píng)論 0 0
  • (似水流年)時(shí)光荏苒歲月逝,似水流年不復(fù)回。青山不變?nèi)蓊伬希橄党跣牟桓淖?。一脈相承始南粵,追風(fēng)逐月年少狂。云淡風(fēng)...
    甘朝武閱讀 533評(píng)論 0 0
  • “她都已經(jīng)去世六天了,不能再等了。”老伴的突然離世已讓71歲的王遠(yuǎn)平悲痛欲絕,然而事發(fā)后因開不出死亡證明無法領(lǐng)出老...
    雷人創(chuàng)意閱讀 526評(píng)論 0 0
  • 表妹、大舅、二姨繼三姨之后不遠(yuǎn)千里風(fēng)塵仆仆趕到了魔都。多年未見的親人們相聚,事前已經(jīng)設(shè)想到了親人們見面會(huì)相當(dāng)激動(dòng),...
    傳說中的超超閱讀 375評(píng)論 2 3

友情鏈接更多精彩內(nèi)容