js 筆記 - 數據類型 - 數組

任何類型的數據，均可以放入數組。

var arr = [
  {a: 1},
  [1, 2, 3],
  function() {return true;}
];

arr[0] // Object {a: 1}
arr[1] // [1, 2, 3]
arr[2] // function (){return true;}複製代碼

若是數組的元素仍是數組，就造成了多維數組。

var a = [[1, 2], [3, 4]];
a[0][1] // 2
a[1][1] // 4複製代碼

數組的本質

本質上，數組屬於一種特殊的對象。typeof運算符會返回數組的類型是object。

typeof [1, 2, 3] // "object"複製代碼

數組的特殊性體如今，它的鍵名是按次序排列的一組整數（0，1，2...）。

var arr = ['a', 'b', 'c'];

Object.keys(arr)
// ["0", "1", "2"]複製代碼

因爲數組成員的鍵名是固定的（默認老是0、一、2...），所以數組不用爲每一個元素指定鍵名，而對象的每一個成員都必須指定鍵名。JavaScript 語言規定，對象的鍵名一概爲字符串，因此，數組的鍵名其實也是字符串。之因此能夠用數值讀取，是由於非字符串的鍵名會被轉爲字符串。

var arr = ['a', 'b', 'c'];

arr['0'] // 'a'
arr[0] // 'a'複製代碼

length 屬性

JavaScript 使用一個32位整數，保存數組的元素個數。這意味着，數組成員最多隻有 4294967295 個（232 - 1）個，也就是說length屬性的最大值就是 4294967295。

length屬性是可寫的。若是人爲設置一個小於當前成員個數的值，該數組的成員數量會自動減小到length設置的值。

var arr = [ 'a', 'b', 'c' ];
arr.length // 3

arr.length = 2;
arr // ["a", "b"]複製代碼

清空數組的一個有效方法，就是將length屬性設爲0。

var arr = [ 'a', 'b', 'c' ];

arr.length = 0;
arr // []複製代碼

若是人爲設置length大於當前元素個數，則數組的成員數量會增長到這個值，新增的位置都是空位。（undefined）

var a = ['a'];

a.length = 3;
a[1] // undefined複製代碼

若是人爲設置length爲不合法的值，JavaScript 會報錯。

// 設置負值
[].length = -1
// RangeError: Invalid array length

// 數組元素個數大於等於2的32次方
[].length = Math.pow(2, 32)
// RangeError: Invalid array length

// 設置字符串
[].length = 'abc'
// RangeError: Invalid array length複製代碼

值得注意的是，因爲數組本質上是一種對象，因此能夠爲數組添加屬性，可是這不影響length屬性的值。

var a = [];

a['p'] = 'abc';
a.length // 0

a[2.1] = 'abc';
a.length // 0複製代碼

上面代碼將數組的鍵分別設爲字符串和小數，結果都不影響length屬性。由於，length屬性的值就是等於最大的數字鍵加1，而這個數組沒有整數鍵，因此length屬性保持爲0。

若是數組的鍵名是添加超出範圍的數值，該鍵名會自動轉爲字符串。

var arr = [];
arr[-1] = 'a';
arr[Math.pow(2, 32)] = 'b';

arr.length // 0
arr[-1] // "a"
arr[4294967296] // "b"複製代碼

上面代碼中，咱們爲數組arr添加了兩個不合法的數字鍵，結果length屬性沒有發生變化。這些數字鍵都變成了字符串鍵名。最後兩行之因此會取到值，是由於取鍵值時，數字鍵名會默認轉爲字符串。

in 運算符

檢查某個鍵名是否存在的運算符in，適用於對象，也適用於數組。

var arr = [ 'a', 'b', 'c' ];
2 in arr  // true
'2' in arr // true
4 in arr // false複製代碼

注意，若是數組的某個位置是空位，in運算符返回false。

var arr = [];
arr[100] = 'a';

100 in arr // true
1 in arr // false複製代碼

上面代碼中，數組arr只有一個成員arr[100]，其餘位置的鍵名都會返回false。

for...in 循環和數組的遍歷

for...in循環不只能夠遍歷對象，也能夠遍歷數組，畢竟數組只是一種特殊對象。

var a = [1, 2, 3];

for (var i in a) {
  console.log(a[i]);
}
// 1
// 2
// 3複製代碼

可是，for...in不只會遍歷數組全部的數字鍵，還會遍歷非數字鍵。

var a = [1, 2, 3];
a.foo = true;

for (var key in a) {
  console.log(key);
}
// 0
// 1
// 2
// foo複製代碼

上面代碼在遍歷數組時，也遍歷到了非整數鍵foo。

因此，不推薦使用for...in遍歷數組。

數組的forEach方法，也能夠用來遍歷數組，詳見《標準庫》的 Array 對象一章。

var colors = ['red', 'green', 'blue'];
colors.forEach(function (color) {
  console.log(color);
});
// red
// green
// blue複製代碼

數組的空位

當數組的某個位置是空元素，即兩個逗號之間沒有任何值，咱們稱該數組存在空位（hole）。

var a = [1, , 1];
a.length // 3複製代碼

上面代碼代表，數組的空位不影響length屬性。

須要注意的是，若是最後一個元素後面有逗號，並不會產生空位。也就是說，有沒有這個逗號，結果都是同樣的。

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

a.length // 3
a // [1, 2, 3]複製代碼

上面代碼中，數組最後一個成員後面有一個逗號，這不影響length屬性的值，與沒有這個逗號時效果同樣。

數組的空位是能夠讀取的，返回undefined。

var a = [, , ,];
a[1] // undefined複製代碼

使用delete命令刪除一個數組成員，會造成空位，而且不會影響length屬性。

var a = [1, 2, 3];
delete a[1];

a[1] // undefined
a.length // 3複製代碼

上面代碼用delete命令刪除了數組的第二個元素，這個位置就造成了空位，可是對length屬性沒有影響。也就是說，length屬性不過濾空位。因此，使用length屬性進行數組遍歷，必定要很是當心。

數組的某個位置是空位，與某個位置是undefined，是不同的。若是是空位，使用數組的forEach方法、for...in結構、以及Object.keys方法進行遍歷，空位都會被跳過。

var a = [, , ,];

a.forEach(function (x, i) {
  console.log(i + '. ' + x);
})
// 不產生任何輸出

for (var i in a) {
  console.log(i);
}
// 不產生任何輸出

Object.keys(a)
// []複製代碼

若是某個位置是undefined，遍歷的時候就不會被跳過。

var a = [undefined, undefined, undefined];

a.forEach(function (x, i) {
  console.log(i + '. ' + x);
});
// 0. undefined
// 1. undefined
// 2. undefined

for (var i in a) {
  console.log(i);
}
// 0
// 1
// 2

Object.keys(a)
// ['0', '1', '2']複製代碼

這就是說，空位就是數組沒有這個元素，因此不會被遍歷到，而undefined則表示數組有這個元素，值是undefined，因此遍歷不會跳過。

相似數組的對象

若是一個對象的全部鍵名都是正整數或零，而且有length屬性，那麼這個對象就很像數組，語法上稱爲「相似數組的對象」（array-like object）。

var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

obj[0] // 'a'
obj[1] // 'b'
obj.length // 3
obj.push('d') // TypeError: obj.push is not a function複製代碼

上面代碼中，對象obj就是一個相似數組的對象。可是，「相似數組的對象」並非數組，由於它們不具有數組特有的方法。對象obj沒有數組的push方法，使用該方法就會報錯。

「相似數組的對象」的根本特徵，就是具備length屬性。只要有length屬性，就能夠認爲這個對象相似於數組。可是有一個問題，這種length屬性不是動態值，不會隨着成員的變化而變化。

var obj = {
  length: 0
};
obj[3] = 'd';
obj.length // 0複製代碼

上面代碼爲對象obj添加了一個數字鍵，可是length屬性沒變。這就說明了obj不是數組。

典型的「相似數組的對象」是函數的arguments對象，以及大多數 DOM 元素集，還有字符串。

// arguments對象
function args() { return arguments }
var arrayLike = args('a', 'b');

arrayLike[0] // 'a'
arrayLike.length // 2
arrayLike instanceof Array // false

// DOM元素集
var elts = document.getElementsByTagName('h3');
elts.length // 3
elts instanceof Array // false

// 字符串
'abc'[1] // 'b'
'abc'.length // 3
'abc' instanceof Array // false複製代碼

上面代碼包含三個例子，它們都不是數組（instanceof運算符返回false），可是看上去都很是像數組。

數組的slice方法能夠將「相似數組的對象」變成真正的數組。

var arr = Array.prototype.slice.call(arrayLike);複製代碼

除了轉爲真正的數組，「相似數組的對象」還有一個辦法可使用數組的方法，就是經過call()把數組的方法放到對象上面。

function print(value, index) {
  console.log(index + ' : ' + value);
}

Array.prototype.forEach.call(arrayLike, print);複製代碼

上面代碼中，arrayLike表明一個相似數組的對象，原本是不可使用數組的forEach()方法的，可是經過call()，能夠把forEach()嫁接到arrayLike上面調用。

下面的例子就是經過這種方法，在arguments對象上面調用forEach方法。

// forEach 方法
function logArgs() {
  Array.prototype.forEach.call(arguments, function (elem, i) {
    console.log(i + '. ' + elem);
  });
}

// 等同於 for 循環
function logArgs() {
  for (var i = 0; i < arguments.length; i++) {
    console.log(i + '. ' + arguments[i]);
  }
}複製代碼

字符串也是相似數組的對象，因此也能夠用Array.prototype.forEach.call遍歷。

Array.prototype.forEach.call('abc', function (chr) {
  console.log(chr);
});
// a
// b
// c複製代碼

注意，這種方法比直接使用數組原生的forEach要慢，因此最好仍是先將「相似數組的對象」轉爲真正的數組，而後再直接調用數組的forEach方法。

var arr = Array.prototype.slice.call('abc');
arr.forEach(function (chr) {
  console.log(chr);
});
// a
// b
// c複製代碼