JavaScript中數組對象詳解

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

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

1、Array構造器

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]];
  • ** 數組的分類**

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

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

2肾砂、稀疏數組

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

  • 數組對象屬性

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

1诗越、length 屬性

通過一些操作來講解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); //顯示數組的長度已經變?yōu)?5

訪問數組元素

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

減小數組長度

arr.length=2; //將數組的長度減少到2,數組中的元素只剩下索引值小于2的元素
alert(arr[9]); //這時候顯示第10個元素已經變?yōu)?undefined"因為索引值大于等于2的元素都被拋棄了

恢復數組長度

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

2传货、prototype 屬性

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( );

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

3纸泡、constructor 屬性

constructor 屬性表示創(chuàng)建對象的函數漂问。
object.constructor //object是對象或函數的名稱。
說明:constructor 屬性是所有具有prototype 的對象的成員。它們包括除 GlobalMath對象以外的所有JScript固有對象蚤假。constructor屬性保存了對構造特定對象實例的函數的引用栏饮。

例如:

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

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

對于數組來說:

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

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

|方法 | 作用 |
| :--------- :|:-------------:|
|concat() | 連接兩個或者更多的數組,并返回結果|
|join() | 將數組的元素組起一個字符串|
|pop() | 刪除并返回數組的最后一個元素|
|push() | 數組末尾添加一個或者多個元素灶平,返回新的長度|
|reverse|顛倒數組中元素的順序|
|shift()|刪除并返回數組的第一個元素|
|slice()|從某個已有的數組返回選定的元素|
|sort()|對數組元素排序|
|splice() | 刪除元素,并向數組添加新元素|
|toSource() | 返回該對象的源代碼|
|toString()|把數組轉化為字符串并返回結果|
|toLocalString()|把數組轉化為本地元素并返回結果|
|unshift|向數組開頭添加一個或者更多的元素伺通,并返回新的長度|
|valueof()|返回數組對象的原始值|
|forEach()|遍歷數組對象|
|map()|對數組做一些映射|
|filter()|過濾|
|every()|檢查判斷|
|some()|檢查判斷|
|reduce()|兩兩執(zhí)行一定的操作|
|reduceRight()|從右到左執(zhí)行操作|
|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
slice(a,b)a和b可以取負數疮鲫,表示從a位置開始截取到b位置的一段數組,是一個左閉右開的區(qū)間弦叶,a和b可以取負數俊犯,如果是負數代表倒數第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(a,b)從a位置開始截取其中的b個元素
object.splice(a伤哺,b燕侠,c,d)從a位置開始截取b個元素立莉,并將c和d或者更多的元素插入原數組
需要注意的是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(2绢彤,2);//[3,4]
arr;//[1,2,5];

var arr=[1,2,3,4,5];
arr.splice(1,1蜓耻,‘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蔼卡。

例2
var 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的區(qū)別是forEach為數組中的每個元素執(zhí)行一次回調函數。

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

filter
filter 過濾掉某些元素,和map有點類似贷祈,Array的filter也接收一個函數趋急。但是和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,則返回true。some()是對數組中每一項運行指定函數挤忙,如果該函數對任一項返回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 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()把一個函數作用在這個Array的[x1, x2, x3...]上册烈,這個函數必須接收兩個參數戈泼,reduce()把結果繼續(xù)和序列的下一個元素做累積計算,其效果就是:

[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 變成了從右到左兩兩執(zhí)行某些操作

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

indexOf()
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置,indexOf(a,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從右邊開始找第一次出現(xiàn)2的位置
arr.lastIndexOf(2, -2); // 3從右邊的倒數第二個開始找2出現(xiàn)的位置
arr.lastIndexOf(2, -3); // 1

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

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

數組和一般對象的比較

| |數組 / 一般對象 |
| :--------- : | :--------- :|
| 相同點| 都可以繼承此改,對象不一定是數組趾撵,都可以當做對象添加屬性 |
|不同點 | 數組自動更新length按索引訪問數組比訪問一般對象屬性明顯迅速。數組對象繼承Array.prototype上的大量數組操作方法|
數組和字符串的比較

| |數組 /字符串 |
| :--------- : |:-------------:|
| 相同點|字符串是數組的一種 |
|不同點 |字符串是不可變的數組共啃,字符串沒有數組的方法|
數組屬性參考網頁

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末占调,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子移剪,更是在濱河造成了極大的恐慌究珊,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,539評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件纵苛,死亡現(xiàn)場離奇詭異剿涮,居然都是意外死亡言津,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3 396
  • 文/潘曉璐 我一進店門取试,熙熙樓的掌柜王于貴愁眉苦臉地迎上來悬槽,“玉大人,你說我怎么就攤上這事瞬浓〕跗牛” “怎么了?”我有些...
    開封第一講書人閱讀 165,871評論 0 356
  • 文/不壞的土叔 我叫張陵猿棉,是天一觀的道長磅叛。 經常有香客問我,道長萨赁,這世上最難降的妖魔是什么弊琴? 我笑而不...
    開封第一講書人閱讀 58,963評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮杖爽,結果婚禮上敲董,老公的妹妹穿的比我還像新娘。我一直安慰自己掂林,他們只是感情好臣缀,可當我...
    茶點故事閱讀 67,984評論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著泻帮,像睡著了一般。 火紅的嫁衣襯著肌膚如雪计寇。 梳的紋絲不亂的頭發(fā)上锣杂,一...
    開封第一講書人閱讀 51,763評論 1 307
  • 那天,我揣著相機與錄音番宁,去河邊找鬼元莫。 笑死,一個胖子當著我的面吹牛蝶押,可吹牛的內容都是我干的踱蠢。 我是一名探鬼主播,決...
    沈念sama閱讀 40,468評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼棋电,長吁一口氣:“原來是場噩夢啊……” “哼茎截!你這毒婦竟也來了?” 一聲冷哼從身側響起赶盔,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤企锌,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后于未,有當地人在樹林里發(fā)現(xiàn)了一具尸體撕攒,經...
    沈念sama閱讀 45,850評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡陡鹃,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,002評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了抖坪。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片萍鲸。...
    茶點故事閱讀 40,144評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖擦俐,靈堂內的尸體忽然破棺而出脊阴,到底是詐尸還是另有隱情,我是刑警寧澤捌肴,帶...
    沈念sama閱讀 35,823評論 5 346
  • 正文 年R本政府宣布蹬叭,位于F島的核電站,受9級特大地震影響状知,放射性物質發(fā)生泄漏秽五。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,483評論 3 331
  • 文/蒙蒙 一饥悴、第九天 我趴在偏房一處隱蔽的房頂上張望坦喘。 院中可真熱鬧,春花似錦西设、人聲如沸瓣铣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽棠笑。三九已至,卻和暖如春禽绪,著一層夾襖步出監(jiān)牢的瞬間蓖救,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1 272
  • 我被黑心中介騙來泰國打工印屁, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留循捺,地道東北人。 一個月前我還...
    沈念sama閱讀 48,415評論 3 373
  • 正文 我出身青樓雄人,卻偏偏與公主長得像从橘,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子础钠,可洞房花燭夜當晚...
    茶點故事閱讀 45,092評論 2 355

推薦閱讀更多精彩內容

  • Javascript有很多數組的方法恰力,有的人有W3C的API,還可以去MDN上去找珍坊,但是我覺得API上說的不全牺勾,M...
    頑皮的雪狐七七閱讀 4,088評論 0 6
  • “喂,最近學習怎么樣阵漏?上課認真聽了嗎驻民?有沒有經常問老師問題翻具?打算好學文還是學理了嗎……” 仿佛我們之間一切的話題就...
    陸大大雨_LY閱讀 238評論 0 0
  • (似水流年)時光荏苒歲月逝,似水流年不復回回还。青山不變容顏老裆泳,情系初心不改變。一脈相承始南粵柠硕,追風逐月年少狂工禾。云淡風...
    甘朝武閱讀 485評論 0 0
  • “她都已經去世六天了,不能再等了癣丧〔叟希”老伴的突然離世已讓71歲的王遠平悲痛欲絕,然而事發(fā)后因開不出死亡證明無法領出老...
    雷人創(chuàng)意閱讀 416評論 0 0
  • 表妹胁编、大舅厢钧、二姨繼三姨之后不遠千里風塵仆仆趕到了魔都。多年未見的親人們相聚嬉橙,事前已經設想到了親人們見面會相當激動早直,...
    傳說中的超超閱讀 317評論 2 3