第七章、陣列

• 陣列是值的集合。

• JavaScript陣列是無型別的

• JavaScript陣列是動態的

• JavaScript陣列是稀疏的

• 陣列繼承自Array.prototype中的屬性

建立陣列

1.陣列直接量

var empty = [];    //沒有元素的陣列
var primes = [2,3,4,5,6];       //有5個數值的陣列
var misc = [1.1,true,"a", ];    //3個不同型別的元素和結尾的逗號複製程式碼

(1).陣列直接量中的值不一定要是常量；它們可以是任意的表示式

var base = 1024;
var table = [base,base+1,base+2,base+3];複製程式碼

(2).它可以包含物件直接量或其他陣列直接量

var b = [[1,{x:1,y:2}],[2,{x:3,y:4}]];複製程式碼

(3).如果省略陣列直接量中的某個值，省略的元素將被賦予undefined值：

var count = [1,,3];   //陣列有3個元素，中間的那個元素值為undefined
var undefs = [,,];   //陣列有2個元素，都是undefined複製程式碼

(4).陣列直接量的語法允許有可選的結尾的逗號，故[,,]只有兩個元素而非三個

2.建構函式Array()

(1).呼叫時沒有引數

var a = new Array();複製程式碼

(2).呼叫時有一個數值引數，它指定長度；

var a = new Array(10);複製程式碼

(3).顯示指定兩個或多個陣列元素或者陣列的一個非陣列元素

var a = new Array(5,4,3,2,1,"testing,testing");複製程式碼

陣列元素的讀和寫

1.陣列的引用位於方括號的左邊。方括號中是一個返回非負整數值的任意表示式。

var a = ["world"];  //從一個元素的陣列開始
var value = a[0];  //讀第0個元素
a[1] = 3.14;   //寫第1個元素
i = 2;  
a[i] = 3;  //寫第2個元素
a[i + 1] = "hello";   //寫第3個元素
a[a[i]] = a[0];   //讀第0個和第2個元素，寫第3個元素複製程式碼

2.陣列是物件的特殊形式。

o = {};    
o[1] = "one";    //用來一個整數來索引它複製程式碼

3.可以使用負數或非整數來索引陣列。數值轉換為字串，字串作為屬性名來用。

a[-1.23] = true;  //這將建立一個名為"-1.23"的屬性
a["1000"] = 0;   //這是陣列的第1001個元素
a[1.000];  //和a[1]相等複製程式碼

4.陣列是物件，它們可以從原型中繼承元素

稀疏陣列

1.稀疏陣列就是包含從0開始的不連續索引的陣列。

2.陣列的length屬性值代表陣列中元素的個數。

3.如果陣列是稀疏的，length屬性值大於元素的個數。

a = new Array(5);  //陣列沒有元素，但是a.length是5
a = [];  //建立一個空陣列，length = 0
a[1000] = 0;  //賦值新增一個元素，但是設定length為1001

var a1 = [,,,];   //陣列是[unfefined,unfefined,unfefined]
var a2 = new Array(3);  //該陣列根本沒有元素
0 in a1;  //=>true:a1在索引0處有一個元素
0 in a2;  //=>false:a2在索引0處沒有元素複製程式碼

陣列長度

1.每個陣列有一個length屬性。

[].length;  //=>0:陣列沒有元素
['a','b','c'].length;  //=>3:最大的索引為2，length為3複製程式碼

2.當陣列是稀疏的時候，length屬性值大於元素的個數

3.設定length屬性為一個小於當前長度的非負整數n時，當前陣列中那些索引值大於或等於n的元素將從中刪除；

a = [1,2,3,4,5];  //從5個元素的陣列開始
a.length = 3; //現在a為[1,2,3]
a.length = 0; //刪除所有的元素，a為[]
a.length = 5;  //長度為5，但是沒有元素，就像new Array(5)複製程式碼

4.將陣列的length屬性值設定為大於當前的長度。實際上這不會向陣列中新增新的元素，它只是在陣列尾部建立一個空的區域

5.可以用Object.defineProperty()讓陣列的length屬性變成只讀的

a = [1,2,3];  //從3個元素的陣列開始
Object.defineProperty(a,"length",{
    writable:false       //讓length屬性只讀
    })
a.length = 0;  //a不會改變複製程式碼

陣列元素的新增和刪除

1.為新索引賦值：

a = [];   //開始是一個空陣列
a[0] = "zero";   //然後向其中新增元素
a[1] = "one";複製程式碼

2.push()在陣列末尾增加一個或多個元素 ——》pop()

a = [];  //開始是一個空陣列
a.push("zero");  //在末尾新增一個元素。a = ["zero"]
a.push("one","two");  //再新增兩個元素。a = ["zero","one","two"]複製程式碼

3.unshift()在陣列的首部插入一個元素，並且將其他元素依次移到更高的索引處 ——》shift()

4.可以像刪除物件屬性一樣使用delete運算子來刪除陣列元素

a = [1,2,3];
delete a[1];  //a在索引1的位置不再有元素
1 in a;  //=>false:陣列索引1並未在陣列中定義
a.length;  //=>3:delete操作並不影響陣列長度複製程式碼

5.splice()是一個通用的方法來插入，刪除或替換陣列元素。

陣列遍歷

1.for()迴圈

var keys = Object.keys(o);  //獲得o物件屬性名組成的陣列
var values = [];   //在陣列中儲存匹配屬性的值
for(var i=0;i<keys.length;i++){   //對於陣列中每個索引
    var key = keys[i];   //獲得索引處的鍵值
    values[i] = o[key];  //在values陣列中儲存屬性值
}複製程式碼

(1).陣列的長度應該只查詢一次而非每次迴圈都要查詢

for(var i = 0,len = keys.length;i < len;i++){
    //迴圈體仍然不變
}複製程式碼

(2).使用陣列元素之前應該先檢測它們。如果想排除null,undefined和不存在的元素

for(var i=0;i<a.length;i++){
    if(!a[i]){
        continue; //跳過null,undefined和不存在的元素
    }
    //迴圈體
}複製程式碼

(3).如果只想跳過undefined和不存在的元素

for(var i =0;i < a.length;i++){
    if(a[i] === undefined){
        continue;   //跳過undefined +不存在的元素
    }
}複製程式碼

(4).如果只想跳過不存在的元素而仍然要處理存在的undefined元素

for(var i = 0;i < a.length;i++){
    if(!(i in a)){
        continue;  //跳過不存在的元素
    }
    //迴圈體
}複製程式碼

2.for/in迴圈

for(var index in sparseArray){
    var value = sparseArray[index];
    //此處可以使用索引和值做一些事情
}複製程式碼

3.forEach(),按照索引的順序按個傳遞給定義的一個函式。

var data = [1,2,3,4,5];  //這是需要遍歷的陣列
var sumOfSquares = 0;   //要得到資料的平方和
data.forEach(function(x){  //把每個元素傳遞給此函式
        sumOfSquares += x*x; //平方相加
    })
sumOfSquares;  //=>55:1+4+9+16+25複製程式碼

多維陣列

1.訪問陣列的陣列中的元素，只要簡單地使用兩次[]操作符即可

var table = new Array(10);   //表格有10行
for(var i = 0;i < table.length;i++){
    table[i] = new Array(10);    //每行有10列
    //初始化陣列
    for(var row = 0;row < table.length;row++){
        for(var col = 0;col < table[row].length;col++){
            table[row][col] = row * col;
        }
    }
}
//使用多維陣列來計算(查詢)5*7
var product = table[5][7];  //35複製程式碼

陣列方法

1.join()

(1).Array.join()方法將陣列中所有元素都轉化為字串並連線在一起，返回最後生成的字串。

var a = [1,2,3];  //建立一個包含三個元素的陣列
a.join();  //=>"1,2,3"
a.join(" ");  //=>"1 2 3"
a.join("");  //=>"123"
var b = new Array(10);  //長度為10的空陣列
b.join("-")  //=>"---------":9個連字號組成的字串複製程式碼

(2).Array.join是String.split()方法的逆向操作，後者是將字串分割成若干塊來建立一個陣列

2.reverse()

(1).Array.reverse()方法將陣列中的元素顛倒順序，返回逆序的陣列。

var a = [1,2,3];
a.reverse().join();  //=>"3,2,1"並且現在的a是[3,2,1]複製程式碼

3.sort()

(1).Array.sort()方法將陣列中的元素排序並返回排序後的陣列。

var a = new Array("banana","cherry","apple");
a.sort();
var s = a.join(", ");  // s == "apple, banana, cherry"複製程式碼

(2).如果陣列包含undefined元素，它們會被排到陣列的尾部。

var a = [33,4,1111,222];
a.sort();  //字母表順序：1111,222,33,4
a.sort(function(a,b){     //數值順序：4,33,222,1111
        return a-b;    //根據順序，返回負數，0，正數
    })
a.sort(function(a,b){return b-a});   //數值大小相反的順序複製程式碼

4.concat()

(1).Array.concat()方法建立並返回一個新陣列，它的元素包括呼叫concat()的原始陣列的元素和concat()的每個引數。

var a = [1,2,3];
a.concat(4,5);  //返回[1,2,3,4,5]
a.concat([4,5]);  //返回[1,2,3,4,5]
a.concat([4,5],[6,7]);  //返回[1,2,3,4,5,6,7]
a.concat(4,[5,[6,7]]);  //返回[1,2,3,4,5,[6,7]]複製程式碼

5.slice()

(1).Array.slice()方法返回指定陣列的一個片段或陣列。它的兩個引數分別指定了片段的開始和結束的位置。

var a = [1,2,3,4,5];
a.slice(0,3);  //返回[1,2,3]
a.slice(3);  //返回[4,5]
a.slice(1,-1);  //返回[2,3,4]
a.slice(-3,-2);  //返回[3]複製程式碼

6.splice()

(1).Array.splice()方法是陣列中插入或刪除元素的通用方法。不同於slice()和concat(),splice()會修改呼叫的陣列。

(2).splice()的第一個引數指定了插入和(或)刪除的起始位置。第二個引數指定了應該從陣列中刪除的元素的個數。

var a = [1,2,3,4,5,6,7,8];
a.splice(4);  //返回[5,6,7,8];  a 是[1,2,3,4]
a.splice(1,2);  //返回[2,3];   a是[1,4]
a.splice(1,1);   //返回[4];  a是[1]  複製程式碼

(3).splice()的前兩個引數指定了需要刪除的陣列元素。緊隨其後的任意個數的引數指定了需要插入到陣列中的元素，從第一個引數指定的位置開始插入。

var a = [1,2,3,4,5];
a.splice(2,0,'a','b');   //返回[];a是[1,2,'a','b',3,4,5]
a.splice(2,2,[1,2],3);  //返回['a','b'];a是[1,2,[1,2],3,3,4,5]複製程式碼

7.push()和pop()

(1).push()和pop()方法允許將陣列當做棧來使用。

(2).push()方法在陣列的尾部新增一個或多個元素，並返回陣列新的長度。

(3).pop()方法則相反：它刪除陣列的最後一個元素，減小陣列長度並返回它刪除的值。

8.unshift()和shift()

9.toString()和toLocaleString()

(1).針對陣列，該方法將其每個元素轉化為字串

[1,2,3].toString()   //生成'1,2,3'
["a","b","c"].toString()  //生成'a,b,c'
[1,[2,'c']].toString()   //生成'1,2,c'複製程式碼

(2).toLocaleString()是toString()方法的本地化版本。

ECMAScript 5中的陣列方法

(1).ECMAScript 5定義了9個新的陣列方法來遍歷，對映，過濾，檢測，簡化和搜尋陣列。

(2).forEach()

• forEach()方法從頭至尾遍歷陣列，為每個元素呼叫指定的函式。

  • forEach()使用三個引數呼叫該函式：陣列元素，元素的索引和陣列本身。

eg:

var data = [1,2,3,4,5];
var sum = 0;
data.forEach(function(value){
    sum += value;      //=>15
    })
data.forEach(function(v,i,a){
    a[i] = v +1;  //[2,3,4,5,6]
    })複製程式碼

(3).map()

• map()方法將呼叫的陣列的每個元素傳遞給指定的函式，並返回一個陣列，它包含該函式的返回值。

• map()返回的是新陣列，它不修改呼叫的陣列。

eg:

a = [1,2,3];
b = a.map(function(x){
    return x * x;   //=>b:[1,4,9]
    })複製程式碼

(4).filter()

• filter()方法返回的陣列元素是呼叫的陣列的一個子集。

• filter()傳遞的函式是用來邏輯判定的；該函式返回true或false

eg:

a = [5,4,3,2,1];
smallvalues = a.filter(function(x){
        return x < 3;  //[2,1]
    })
everyother = a.filter(function(x,i){
        return i % 2==0;   //[5,3,1]
    })複製程式碼

(5).every()和some()

(6).reduce()和reduceRight()

(7).indexOf()和lastIndexOf()

陣列型別

(1).可以使用Array.isArray()函式來判定

Array.isArray([]);   //=>true;
Array.isArray({});   //=>false;複製程式碼

(2).typeof操作符對陣列返回"物件"

類陣列物件

(1).當有新的元素新增到列表中，自動更新length屬性。

(2).設定length為一個較小值將截斷陣列。

(3).從Array.prototype中繼承一些有用的方法。

(4).其類屬性為"Array"

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];
}複製程式碼

(5).Arguments物件就是一個類陣列物件。

(6).用來檢測類陣列物件

//判定o是否是 一個類陣列物件
//字串和函式有length屬性，但是它們可以用typeof檢測將其排除，在客戶端JavaScript中，DOM文字節點也有length屬性，需要用額外判斷o.nodeType != 3將其排除
function isArrayLike(o){
    if(o &&    //o 非null,undefined等
        typeof o === "object" &&  //o是物件
        isFinite(o.length) &&  // o.length是有限數值
        o.length >= 0&&  // o.length為非負值
        o.length === Math.floor(o.length) &&  //o.length是整數
        o.length < 4294967296){  //o.length < 2 ^ 32
        return true;   //o是類陣列物件
    }else{
        return false; //否則它不是
    }
}複製程式碼

(1).

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"]複製程式碼

(2).

var a = {"0":"a","1":"b","2":"c",length:3}   //類陣列物件
Array.join.call(a,"+")  //=> "a+b+c"
Array.slice.call(a,0)  //=>["a","b","c"]:真正陣列的副本
Array.map.call(a,function(x){
        return x.toUpperCase();
    })     //=>["A","B","C"]複製程式碼

(3).

Array.join = Array.join || function(a,sep){
    return Array.prototype.join.call(a,sep)
};
Array.slice = Array.slice || function(a,sep){
    return Array.prototype.slice.call(a,sep)
};
Array.map = Array.map || function(a,sep){
    return Array.prototype.map.call(a,sep)
}複製程式碼

作為陣列的字串

(1).字串的行為類似於只讀的陣列。除了用charAt()方法來訪問單個的字元以外，還可以使用方括號：

var s = "test";
s.charAt(0)  //=>"t"
s[1]  //=>"e"複製程式碼

(2).字串是不可變值，故當把它們作為陣列看待時，它們是隻讀的。

s = "JavaScript";
Array.prototype.join.call(s," ");   //=>"J a v a S c r i p t"
Array.prototype.filter.call(s,function(x){
        return x.match(/[^aeiou]/);   //只匹配非母音字母
    }).join(" ")    //=>"J v S c r p t"複製程式碼

|版權宣告：本文為summer博主原創文章，未經博主允許不得轉載。