《javascript高級程序設計》筆記_數組 稀疏數組 僞數組

數組是數據的有序列表，與其餘語言不一樣的是，ECMAScript 數組的每一項能夠保存任何類型的數據。也就是說，能夠用數組的第一個位置來保存字符串，用第二位置來保存數值，用第三個位置來保存對象， 以此類推

牢記：

JavaScript中的數組並不像咱們在C或java等語言中遇到的常規數組，在js中數組並非起始地址+長度構成的一片連續的地址空間。

javascript中數組其實就是個對象,只不過會自動管理一些"數字"屬性和length屬性罷了。

說的更直接一點,JavaScript中的數組根本沒有索引,由於索引應該是數字,而JavaScript中數組的索引實際上是字符串

建立數組

構造函數方式

1.無參構造函數，建立一空數組

var colors = new Array();

2.建立指定長度的數組，一個數字參數構造函數，指定數組長度（因爲數組長度能夠動態調整，做用並不大）

var colors = new Array(5);

3.帶有初始化數據的構造函數，建立數組並初始化參數數據

var colors = new Array("red", "blue", "green");

使用Array構造函數是能夠省略new操做符，以下：

var colors = Array(3); // 建立一個包含 3 項的數組
var names = Array("Greg"); // 建立一個包含 1 項，即字符串"Greg"的數組

注意，這裏有個坑！
一樣是使用構造函數的方式，並傳遞一個值，new Array(2)與new Array("2")是有區別的

new Array(2) // ["undefined", "undefined"]
new Array("2") // ["2"]

字面量方式

數組字面量由一對包含數組項的方括號表示，多個數組項之間以逗號隔開，以下所示:

var colors = ["red", "blue", "green"]; // 建立一個包含 3 個字符串的數組
var names = []; // 建立一個空數組
var values = [1,2,]; // 不要這樣!這樣會建立一個包含 2 或 3 項的數組
var options = [,,,,,]; // 不要這樣!這樣會建立一個包含 5 或 6 項的數組

字面量方式建立數組的兼容問題

字面量數組長度	IE8及如下	IE8以上
["red", "blue", "green"]	3	3
["red", "blue", , "green"]	4	4
["red", "blue", "green", ,]	4	3
[, , , , ,]	6	5

數組 VS 對象

javascript中數組其實就是個對象,只不過會自動管理一些"數字"屬性和length屬性

var a1=[1,2,3,4];
console.log(a1[0]); //1
var i=1;
console.log(a1[i]); //2
console.log(a1[++i]); //3

數組也是對象，咱們可使用索引的奧祕在於，數組會把索引值轉換爲對應字符串（1=>」1」）做爲對象屬性名，驗證：

console.log(1 in a1);//true，確實是一個屬性

索引特殊性在於數組會自動更新length屬性，固然由於JavaScript語法規定數字不能做爲變量名，因此咱們不能顯示使用array.1這樣的格式。因而可知其實負數，甚至非數字」索引「都是容許的，只不過這些會變成數組的屬性，而不是索引

var a = new Array(1,2,3);
a[-10] = "a[-10]";
a["sss"] = "sss";
console.log(a); // [1, 2, 3, -10: "a[-10]", sss: "sss"]

爲對象添加數組方法

var blankArray = [];
var obj = {
    splice: blankArray.splice,
    push: blankArray.push,
    unshift: blankArray.unshift,
    pop: blankArray.pop,
    shift: blankArray.shift
};
obj.push();
obj.unshift();
obj.pop();
obj.shift();

數組中的length屬性

數組的length屬性不是隻讀的
1.經過設置這個屬性，能夠從數組的末尾移除項或向數組中添加新項

var colors = ["red", "blue", "green"]; // 建立一個包含 3 個字符串的數組 colors.length = 2;
alert(colors[2]); //undefined

2.利用 length 屬性也能夠方便地在數組末尾添加新項

var colors = ["red", "blue", "green"]; // 建立一個包含 3 個字符串的數組
colors[colors.length] = "black"; //(在位置3)添加一種顏色
colors[colors.length] = "brown"; //(在位置4)再添加一種顏色

3.利用length屬性刪除／清空數組

var arr = [1,2,3,4];
arr.length = 2;
console.log(arr[2]); // "undefined"

arr.length = 0;
console.log(arr); // []

密集數組與稀疏數組

密集數組：在Java和C語言中，數組是一片連續的存儲空間，有着固定的長度。加入數組其實位置是address，長度爲n，那麼佔用的存儲空間是address[0],address[1],address[2].......address[n-1]。即數組元素之間是緊密相連的，不存在空隙。以下的js代碼建立的就是一個密集數組

var data = [3,1,6,9,2];

稀疏數組：與密集數組相反，javascript並不強制要求數組元素是緊密相連的，即容許間隙的存在。以下的js代碼是合法的：

var sparse = new Array();  
sparse[0] = 0;  
sparse[3] = 3;  
alert(sparse[0]);//輸出0  
alert(sparse[1]);//輸出undefined

密集數組的建立： var dense = Array.apply(null, Array(3));

稀疏數組與密集數組便利區別：

// 稀疏數組  
var array = new Array(3);   
array[2] = "name";  
for(var a in array){  
  console.log("index=" + a + ",value=" + array[a]);  
}  
   
// 密集數組  
var dense = Array.apply(null, Array(3));   
dense[2] = "name";  
for(var a in dense){  
  console.log("index=" + a + ",value=" + dense[a]);  
}

// 結果
// 稀疏數組：index=2,value=name
// 密集數組：index=0,value=undefined
//         index=1,value=undefined
//         index=2,value=name

差異：稀疏數組只遍歷了已存在元素的次數，密集數組遍歷了arr.length次

僞數組（類數組）

特色：
1.具備length屬性；
2.按索引方式存儲數據；
3.不具備數組的push()、pop()等方法；

僞數組沒法直接調用數組方法或指望length屬性有什麼特殊的行爲，不具備數組的push()、pop()等方法，但仍能夠對真正數組遍歷方法來遍歷它們。

常見的僞數組類型：
1.function內的arguments對象；
2.調用getElementsByTagName, document.childNodes之類的，返回的NodeList對象都屬於僞數組；
3.自定義對象的僞數組；

如何將僞數組轉換成數組？
1.聲明一個空數組，經過遍歷僞數組把它們從新添加到新的數組(不推薦)

var links = document.querySelectorAll('a');
var arr = [];
for (var i = 0; i < links.length; i++) {
  arr[arr.length] = links[i]
}

2.使用數組的slice()方法 它返回的是數組，使用call或者apply指向僞數組

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

3.原型繼承

links.__proto__ = Array.prototype;

4.ES6中數組的新方法 from()

var arr = Array.from(links);

清空數組的幾種方式

1.length賦值爲0

var arr = [1,2,3,4];
arr.length = 0;
console.log(arr); // 輸出 []，空數組，即被清空了

2.splice

var arr = [1,2,3,4];
arr.splice(0,arr.length);
console.log(arr); // 輸出 []，空數組，即被清空了

3.賦值爲[]

var arr = [1,2,3,4];
arr = []; // 賦值爲一個空數組以達到清空原數組