Javascript數(shù)組學習總結

數(shù)組的基本特點

  • 數(shù)組元素是任意類型的
  • 可能的最大索引是2^32-2嗜历,默認起始索引是 0
  • Javascript的數(shù)組是動態(tài)的,無需手動開辟內(nèi)存
  • 數(shù)組可能不連續(xù)
  • 每個數(shù)組都與一個length屬性鸽斟,length之比數(shù)組中所有元素的索引值都大

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

  • 四種方式
1.  var arr = [];   //空數(shù)組琢歇,不含任何元素
2.  var arr = new Array();  //空數(shù)組育韩,不含任何元素 效果與1一樣
3.  var arr = [1,2,3];  //初始化數(shù)組的同時,添加新元素
4.  var arr = new Array(1,'',3);    //效果與3一樣趁矾,數(shù)組用元素可以是任意類型
5.  var arr = new Array(10);    //指定長度創(chuàng)建一個數(shù)組,此時數(shù)組長度length=10
  • 注意點

數(shù)組直接量的末尾可以有可選逗號,因此創(chuàng)建數(shù)組的時候末尾的逗號一般可以省略

1.  var arr = [1,,3];    //此時數(shù)組中有三個元素格粪,中間那個元素是undefined
2.  var arr = [,,];   //此時數(shù)組中只有兩個元素魄宏,都是undefined

2.元素讀寫與刪除

  1. 使用 [ ] 來操作數(shù)組元素
  2. 數(shù)組是對象的特殊形式悉罕,用方括號訪問數(shù)組元素就像用其訪問對象屬性一樣
  3. javascript中對于小于2^32-2的非負整數(shù)索引笼平,會自動維護length的值
  4. 使用負數(shù)或者非整數(shù)作為數(shù)組的索引的時候,會自動轉化為字符串做索引陨仅,因此不存在數(shù)組“越界”的概念
  5. 字符串做索引的時候能轉化為非負整數(shù)的時候津滞,會默認轉化為非負整數(shù)的索引
  6. 試圖查詢數(shù)組中不存在的索引的時候铝侵,會返回undefined
var a = [1,2,3];
var a1 =a[0];   //讀數(shù)組中的第一個元素,默認索引從0開始
a[0] = 'A';     //給數(shù)組中0索引的寫入新值 'A'
a[10] = 'B';     //數(shù)組中沒有索引為10的元素触徐,則直接生產(chǎn)索引為10的元素咪鲜,此時length=11
a[-1.1] =1.1;    //創(chuàng)建“-1.1”的屬性,值為1.1
a['1000']=1000;      //此時該元素是數(shù)組的第1001個元素
a[1.000] = 1;       //等價于a[1] = 1
a.push(0);          //等價于a[a.length] = 0;
a.push(1,3,5);      //在數(shù)組末尾連續(xù)添加三個元素
a.pop();            //刪除數(shù)組末尾的元素撞鹉,length = length-1疟丙;
delete a[1];        //刪除索引1處的元素,此操作不會改變length值

3.稀疏數(shù)組

數(shù)組中的索引不是連續(xù)的鸟雏,則稱這個數(shù)組是稀疏數(shù)組隆敢,此時數(shù)組length值大于數(shù)組元素的個數(shù)

  • 例子
var a = new Array(10);//數(shù)組沒有元素,length=10
a = [] ;//空數(shù)組(也就是沒有元素)崔慧,length=0;
a[1000] = 1; //添加新元素1穴墅,此時length =10001
  • 注意點

在數(shù)組中直接量中省略值時不會創(chuàng)建稀疏數(shù)組惶室,省略的元素是存在于數(shù)組中的,其值為undefined玄货,和數(shù)組中根本不存在元素是有差別的

var a1 = [,];//無元素的空數(shù)組皇钞,length=1;
var a2 = [undefined];//含元素undefined元素的數(shù)組松捉,length = 1夹界;
0 in a1 ;   //false ,a1在索引0處沒有元素
0 in a2 ;   //true ,a2在索引0出有一個undefined元素

var a1 = [,,,];  // length = 3;
var a2 = new Array(3); // length =3;
0 in a1 ;   //true ,a1在索引0處有元素undefined
0 in a2 ;   //false ,a2在索引0處沒有元素

//a與b效果一樣
var a = [1,,3];
var b = [1,undefined,3]; 

4.數(shù)組長度

  • 數(shù)組長度length 在非稀疏數(shù)組中,為數(shù)組元素賦值的時候隘世,當前索index引大于等于length可柿,那么length = index +1,這是數(shù)組自動維護的丙者。
  • 將length設置為一個小于當前l(fā)ength值并且是非負整數(shù) L 的時候复斥,數(shù)組中大于等于索引L的元素會被刪除,刪除方式是逐個刪除
  • 當設置數(shù)組長度length大于當前數(shù)組的長度值時械媒,不會創(chuàng)建新的元素目锭,只是在數(shù)組的末尾創(chuàng)建一個空的區(qū)域
var a = [1,2,3,4,5]; // length=5;
a.length = 3;   //此時數(shù)組為[1,2,3]
a.length = 0;   //此時數(shù)組為[ ]
a.length = 5;   //length =5,數(shù)組為[ ]

在ECMAScript 5中可以通過Object.defineProperty()讓數(shù)組的長度變?yōu)橹蛔x纷捞,但是數(shù)組內(nèi)部還是能維護數(shù)組的長度length的

var a =[1,2,3];
Object.defineProperty(a,"length",{writable:false});
a.length = 0;   //此時數(shù)組的長度將不會被設置成0

5.數(shù)組遍歷

使用for in 遍歷數(shù)組的時候需要注意 for in 遍歷能枚舉集成的屬性名痢虹,例如添加到Array.Prototype中的方法,因此遍歷的時候因該過濾掉這些不必要的屬性

var a =[1,2,3,4,5];
for(var i =0,l = a.length;i<l;i++){
    //跳過null undefined 和 不存在的元素
    if(!a[i])
    continue;
    
    //跳過undefined 和 不存在的元素
    if(a[i]===undefined)
    continue;
    
    //跳過不存在的元素
    if(!(i in a))
    continue;
}

//用for in 處理稀疏數(shù)組
// i 是得到數(shù)組中含有元素的索引
for(var i in a){
    //獲取索引i的值
    var value = a[i];
    
    //過濾繼承過來的屬性名
    if(!a.hasOwnProperty(i)) continue;
    
     //跳過非負整數(shù)的元素
    if(String(Math.floor(Math.abs(Number(i))))!==i) continue;
}

6.多維數(shù)組

在表面上javascript不支持多維數(shù)組主儡,但是數(shù)組可以存放任意的類型的這個特點可以變向的實現(xiàn)多維數(shù)組奖唯,實際中也很常用。

基本思想就是數(shù)組中在存放另一個數(shù)組缀辩,可以多層嵌套臭埋,但是層數(shù)太多踪央,管理和操作都會越來越復雜

  • 一個簡單的多維數(shù)組
var table = new Array(5);
for(var i = 0,l = table.length;i<l)
    table[i] = new Array(10);
for(var i = 0,l = table.length;i<l;i++)
{
    for(var j = 0,l = table.length;j<l;j++){
        table[i][j] = i*j;
    }
}

7.數(shù)組方法

ECMAScript 3 :

數(shù)組方法是定義在Array.prototype中的,對所有數(shù)組都可以使用

  • join()

將數(shù)組中所有元素都轉化為字符串并連接在一起瓢阴,默認分隔符是',',可以指定分隔符

var a = [1,2,3];
a.join();  // "1,2,3"
a,join("");// "123"
  • reverse()

數(shù)組元素順序反轉畅蹂,返回反轉后的數(shù)組,此過程在原數(shù)組進行荣恐,不創(chuàng)建新數(shù)組

var a = [1,2,3];
a.reverse().join(); //結果是"3,2,1"
  • sort()

將數(shù)組元素進行排序液斜,不帶參數(shù)將默認按字典序排序。設比較的兩數(shù)為(未排序時叠穆,a在b前面) a,b 返回值 >0 則使a排在b之后少漆,返回值 < 0 則使a排在b之前,返回值 ==0 則使a硼被,b順序無關緊要

var a = [3,1,5,6,2];
a.sort().join();
a.sort(function(a,b){
    //自定義的排序規(guī)則(此處是遞減排序)
    if(a>b)
    return -1;
    if(a<b)
    return 1;
    return 0;
}).join();
  • concat()

創(chuàng)建并返回一個數(shù)組示损,他的元素是原數(shù)組和concat()中的每個參數(shù),參數(shù)是數(shù)組的時候嚷硫,連接的是數(shù)組的元素检访,而非數(shù)組本身。當參數(shù)是多層嵌套的數(shù)組的時候不會遞歸的把多層嵌套的數(shù)組元素取出來拼接到原數(shù)組仔掸。

var a = [1,2,3];
a.concat(4,[5,6,[7,8]]);// 新數(shù)組[1,2,3,4,5,6,[7,8]]
  • slice()

返回指定數(shù)組的一個片段(子數(shù)組)脆贵,一個參數(shù)的時候截取的是 參數(shù)i - length,連個參數(shù)(a,b)的時候是截取 a包括a到b之間的元素起暮,當參數(shù)為負整數(shù)時是從末尾元素開始數(shù)的第|x|個

var a = [1,2,3,4,5];
a.slice(3);     //[4,5]
a.slice(1,2);   //[2]
a.slice(-4,-2); //[2,3]
  • splice()

在數(shù)組中刪除或者插入數(shù)據(jù)卖氨,一個參數(shù)是刪除指定索引到結尾的全部元素,兩個參數(shù)的時候是刪除指定區(qū)間元素负懦,大于兩個參數(shù)的時候是刪除指定元素后插入指定位置筒捺。第一個參數(shù)是要刪除元素的索引,第二個參數(shù)是由起始索引到結束索引的長度密似,第二個之后的參數(shù)是插入到起始刪除索引位置的元素焙矛。

var a = [1,2,3,4];
a.splice(2,1);  //[1,2,4]
a.splice(1);   //[1]
a.splice(1,0,2,3,4,[5,6]); // [1,2,3,4,[5,6]]
  • push() 和 pop()

和棧結構中的圧棧出棧概念一樣。push()帶多個參數(shù)的時候是按順序壓入

var s = [];
s.push(1,2);
s.push([3,4]);
s.pop();
  • shift() 和 unshift()

shift():從數(shù)組首部刪除一個元素并返回該元素
unshift():在數(shù)組首部添加一個或者多個元素残腌,添加的順序從參數(shù)尾部向前添加

var s = [1,2];
a.unshift(3,4,[6,7]); // s = [3,4,[6,7],1,2]
a.shift(); // s = [4,[6,7],1,2]
  • toString() toLocalString()

toString():將數(shù)組中的每個元素轉化成字符串并輸出用逗號做分隔符的字符串序列村斟,數(shù)組有多層數(shù)組嵌套的時候會遞歸的進行轉化字符串
toLocalString()是toString()的本地化方法,將toString()轉化的字符串本地化

var s = [1,2,[3,'a']];
s.toString();  // "1,2,3,a"

ECMAScript 5 :

  • 關于ECMAScript 5數(shù)組方法的一些說明:

大多數(shù)方法的第一個參數(shù)都傳遞一個函數(shù)抛猫,并且對每個元素都調(diào)用一次這個函數(shù)蟆盹,稀疏數(shù)組中對不存在的元素則不調(diào)用。

  • forEach()

從頭到尾遍歷數(shù)組闺金,為每個元素調(diào)用指定的函數(shù)逾滥。forEach無法用break中途停止遍歷。

var a = [1,2,3];
var sum = 0;

s.forEach(function(v){sum+=v});
//sum = 6;


// v:當前索引的元素,i:當前索引 寨昙,a:調(diào)用該方法的數(shù)組
a.forEach(function(v,i,a){
a[i] = v + i;
});

// 結果是:a =[2,3,4];

  • map()

將調(diào)用數(shù)組中的每個元素傳遞給指定的函數(shù)讥巡。map不改變調(diào)用它的數(shù)組本身,會返回一個新的數(shù)組舔哪,如果是稀疏數(shù)組欢顷,那么返回的數(shù)組和調(diào)用map的稀疏數(shù)組有一樣的length 和 缺失元素

var a = [1,2,3];
var b = a.map(function(x){ return x++;});
// b = [2,3,4];
  • filter()

返回一個新數(shù)組,新數(shù)組是調(diào)用該函數(shù)數(shù)組的一個子集捉蚤,filter中傳遞的函數(shù)返回true 或者 false 抬驴,true:新數(shù)組添加該元素。filter() 會跳過稀疏數(shù)組總缺少的元素缆巧,所以返回的新數(shù)組總是稠密數(shù)組

var a = [1,2,3,4,5];
var b = a.filter(function(x){
if(x>3) return true; //篩選大于3的元素
return false;
});
// b = [4,5];

//壓縮稀疏數(shù)組
var v = a.filter(function(){ return true;});

//壓縮并刪除undefined 和 null 元素
var v = a.filter(function(x){ return x!==undefined && x!= null;});

  • every() 和 some()

邏輯判斷函數(shù)布持,返回值都是true 或者false,every:所有元素調(diào)用判定函數(shù)返回true 最后結果才是true陕悬,遇到判定返回false則停止遍歷题暖,結果是false。some :至少有一個元素調(diào)用判定函數(shù)返回true 捉超,結果返回true芙委,判定返回遇到true,則停止遍歷狂秦,結果返回true。

var a = [1,2,3,4,5];
a.every(function(x){ return x>0});  //true
a.some(function(x){ return x > 5}); //false
  • reduce() 和 reduceRight()
  1. 兩個方法都是使用指定的函數(shù)將元素進行組合推捐。區(qū)別在于兩者的遍歷數(shù)組順序剛好相反裂问。reduce是索引從低到高,reduceright是索引從高到低牛柒。
  2. 函數(shù)中需要兩個參數(shù)堪簿,參數(shù)1:化簡操作的函數(shù),參數(shù)2(可選):函數(shù)初始值(沒有初始值的時候皮壁,會默認使用遍歷的第一個元素的值作為初始值)
    3.空數(shù)組的時候椭更,不傳遞初始值會導致類型錯誤異常
var a = [1,2,3];
//簡單的數(shù)組求和,初始值為0
//第一次調(diào)用時是 return 的是 0(初始值)+a;然后才是a+b 
var res = a.reduce(function(a,b){ return a+b;},0); //res = 6
//簡單的數(shù)組求積蛾魄,初始值為1
//第一次調(diào)用時是 return 的是 1(初始值)* a;然后才是a*b 
var res = a.reduce(function(a,b){ return a+b;},1); //res = 6

//對象求并集
var a = [{x:1,a:1},{y:2,a:2},{z:3,a:3}];
//不帶初始值的時候默認使用第一個遍歷到的元素值
a.reduce(function(union)); //結果是:{x:1,y:2,z:3,a:1}
a.reduceRight(function(union)); //結果是:{x:1,y:2,z:3,a:3}
  • indexOf() 和 lastIndexOf()
  1. 搜索整個數(shù)組中具有給定值的元素虑瀑,返回第一個找到的元素的索引,沒找到則返回-1
  2. indexOf :從頭到尾搜索滴须,lastIndexOf:從尾到頭搜索
  3. 第一個參數(shù):給定搜索的值舌狗,參數(shù)二(可選):指定開始搜索的索引
var a = [1,3,5,7];
var i = a.indexOf(7,2); // i = 3
//參數(shù)2可以為負數(shù),表示相對末尾的偏移量
var i = a.lastIndexOf(3,-2);// i = 1

8.數(shù)組類型

  1. ECMAScript 5中使用Array.isArray()判定是否是數(shù)組
Array.isArray([]);  // true
  1. ECMAScript 3中使用isArray()的方法是判斷一個對象的屬性是否是“Array”
var isArray = Function.isArray() || function(o){
    return typeof o === "object" && Object.protitype.toString.call(o)
        === "[Object Array]";

}
  1. instanceof 在瀏覽器中開啟多窗口多窗口時扔水,只能正對該窗口做檢測痛侍,不能全局(整個瀏覽器)檢測,因為每個窗口都有自己的全局環(huán)境

9.數(shù)組相關

9.1 作為數(shù)組的字符串

常見的是用[] 代替字符串的chatAt()方法

var s = "String";
s.chatAt(1) == s[1]; //

因為字符串是不可變值的所以不能用 s[0] = 3 的方式復制魔市,也不能使用數(shù)組中的push(),pop(),sort(),reverse(),splice()等方法

Array.prototype.join.call(s,",");  //結果是:"S,t,r,i,n,g"
Array.prototype.filter.call(s,function(x){ return x >'a';}).join("");
//結果是:"tring"
9.2 類數(shù)組對象
  • 類數(shù)組對象與數(shù)組有明顯的區(qū)別主届。體現(xiàn)在數(shù)組用類數(shù)組對象沒有的特點:
  1. 數(shù)組中有新元素添加赵哲,會自動更新length屬性
  2. 通過設置length的值為一個較小的非負整數(shù)截斷數(shù)組
  3. 數(shù)組從Array.protitype中繼承了有用的方法
  4. 數(shù)組的類屬性是"Array"
  • 通過[ ]將對象偽裝成對象
var o ={};
var i = 0;
while(i<10){
    o[i] = i;
    i++;
}
a.lenght = i;

ECMAScript 5 中 數(shù)組方法都是通用的,所以能在類數(shù)組對象上使用君丁,ECMAScript 3中除了toString() ,toLocalString()外的方法也是通用枫夺。
但是類數(shù)組對象沒有繼承Array.prototype,所以不能直接在類數(shù)組對象上調(diào)用數(shù)組方法谈截,可以使用Function.call()方法調(diào)用

var a={"0":"a","1":"b","2":"c",length:3};//類數(shù)組對象
Array.prototype.join.call(a,"_"); // 結果是:"a_b_c"
Array.prototype.map.call(a,function(x){
    return x.toUpperCase();
}); // 結果是:"["A","B","C"]"
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末筷屡,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子簸喂,更是在濱河造成了極大的恐慌毙死,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件喻鳄,死亡現(xiàn)場離奇詭異扼倘,居然都是意外死亡,警方通過查閱死者的電腦和手機除呵,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門再菊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人颜曾,你說我怎么就攤上這事纠拔。” “怎么了泛豪?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵稠诲,是天一觀的道長。 經(jīng)常有香客問我诡曙,道長臀叙,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任价卤,我火速辦了婚禮劝萤,結果婚禮上,老公的妹妹穿的比我還像新娘慎璧。我一直安慰自己床嫌,他們只是感情好,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布胸私。 她就那樣靜靜地躺著既鞠,像睡著了一般。 火紅的嫁衣襯著肌膚如雪盖文。 梳的紋絲不亂的頭發(fā)上嘱蛋,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天,我揣著相機與錄音,去河邊找鬼洒敏。 笑死龄恋,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的凶伙。 我是一名探鬼主播郭毕,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼函荣!你這毒婦竟也來了显押?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤傻挂,失蹤者是張志新(化名)和其女友劉穎乘碑,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體金拒,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡兽肤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了绪抛。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片资铡。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖幢码,靈堂內(nèi)的尸體忽然破棺而出笤休,到底是詐尸還是另有隱情,我是刑警寧澤症副,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布宛官,位于F島的核電站,受9級特大地震影響瓦糕,放射性物質發(fā)生泄漏。R本人自食惡果不足惜腋么,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一咕娄、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧珊擂,春花似錦圣勒、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至扛稽,卻和暖如春吁峻,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工用含, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留矮慕,地道東北人。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓啄骇,卻偏偏與公主長得像痴鳄,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子缸夹,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內(nèi)容