js学习笔记（8）：数组

本质

数组是一种特殊的对象，这一点可以从typeof看出。

typeof [1, 2, 3] // "object"

其特殊性体现在键名是按照次序排列的一组整数，这一点可以从Object.keys看出

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

Object.keys(arr)
// ["0", "1", "2"]

因为对象键名为数字时不能用.(会被认为是小数点)，所以数组只能用【】

length属性

• length属性：返回数组的成员数量。这里要注意的是，length属性的值=键名中的最大整数加一，不是有几个元素，例如下边有三个元素，但是length值为10

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


arr[9] = 'd';
arr.length // 10

• 由上边也可以发现，数组的数字键不需要连续；而且数组是一种动态的数据结构，可以随时增减成员
• 另外，若我们将length设置为小于当前成员个数的值，那么数组的成员数量会自动减少到length的值。我们可以通过将length设为0，达到清空数组的目的

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

arr.length = 0;
arr // []

若人为设置length大于当前元素个数，成员数量会增加到这个值，新增的位置都是空位undefined

var a = ['a'];

a.length = 3;
a[1] // undefined

• 值得注意的是，数组本质上是对象，所以我们可以为数组添加属性。但是添加字符串和小数键名，不会影响length的值（length属性的值就是等于最大的数字键加1，而这个数组没有整数键，所以length属性保持为0）

var a = [];

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

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

in运算符

in运算符用于检查某个键名是否存在，可以用于对象和数组。若某个位置为空位，返回false

数组的遍历

• 数组是特殊的对象，可以用for...in循环遍历。但是，for...in不仅会遍历整数键，还会遍历其他键，所以不推荐用for...in遍历数组

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

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

• 数组的遍历可以考虑for、while或者forEach方法

var a = [1, 2, 3];

// for循环
for(var i = 0; i < a.length; i++) {
  console.log(a[i]);
}

// while循环
var i = 0;
while (i < a.length) {
  console.log(a[i]);
  i++;
}

var l = a.length;
while (l--) {
  console.log(a[l]);
}

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

空位

• 当某个位置为空元素，即两个逗号间没有任何值，我们称存在空位。这里要注意的是，最后一个元素后边有逗号，不会产生空位

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

a.length // 3
a // [1, 2, 3]

• 数组的空位是可以读取的，返回undefined。但是注意的是，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，所以遍历时不会跳过

类似数组的对象

若一个对象所有键名都是正整数或0，并且有length属性，这个对象称为‘类似数组的对象’。

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

但是，类似数组的对象不具备数组的方法（如push等）；而且length不是动态值，不随着成员变化而变化

典型的“类似数组的对象”是函数的arguments对象，以及大多数 DOM 元素集，还有字符串。

将类似数组的对象转化为数组

• 数组的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上面调用。

注意，这种方法比直接使用数组原生的forEach要慢，所以最好还是先将“类似数组的对象”转为真正的数组，然后再直接调用数组的forEach方法。

• 字符串也是类似数组的对象，所以也可以用Array.prototype.forEach.call遍历。

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

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