JS对象类型-数组基础篇

创建数组

创建数组最简单的方法是使用字面量方式，在方括号中用逗号分割数组元素。

var a1 = []
var a2 = ['a', 'b', 'c'] 

如果数组的元素还是数组，就形成了多维数组

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

另外一种是使用构造函数方式。

var a1 = new Arrar() // []  等同于 var a1 = []

// 当只有一个数值时，该参数用于指定数组的长度
var a2 = new Array(3)
console.log(a2[0]) // undefined
console.log(a2.length) // 3

// 非数值时，表示创建一个元素
var a3 = new Array('3')
console.log(a3[0]) // '3'
console.log(a3.length) // 3

// 使用Array()构造函数时，可以省略new操作符。多个参数表示具体的数组元素。
var a4 = Array(1,2,3)

稀疏数组

稀疏数组就是包含从0开始的不连续索引的数组。

可以使用delete操作符制造稀疏数组。

var a = [1,2,3,4,5]
delete a[1]

console.log(a) // [1, empty, 3, 4, 5]
console.log(a[1]) //undefined
console.log(1 in a) // false

可以通过省略逗号间的元素值制作稀疏数组

var a = [1,,3,4,5]

console.log(a) // [1, empty, 3, 4, 5]
console.log(a[1]) //undefined
console.log(1 in a) // false

数组长度

数组的length属性表示数组的长度，无论是稀疏数组还是普通数组，length属性的值比数组的最大索引值大1，数组的索引从0开始。

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

数组的length是可以动态调整的，所以将length赋值为0可以清空数组。如果length值大于数组的长度，只会在数组尾部创建一个空的区域。

var a = [1,2,3]
a.length = 0

a // []

var a2 = [1,2,3]
a2.length = 4
a2[4] // undefined

数组遍历

最常用的方法是使用for循环，也可以使用while循环

var a = [1, 2, 3];
for(var i = 0; i < a.length; i++) {
  console.log(a[i]);
}

遍历稀疏数组需要一些额外的判断

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

for(var i = 0; i < arr.length;i++) {
	if(!(i in arr)) continue;
	console.log(arr[i])
}

可以使用for/in循环遍历稀疏数组，每次循环将可枚举的属性名赋值给循环变量，不存在的索引不会被遍历到。

var arr = ['a',,'b']
for(var i in arr) {
  console.log(arr[i])
}

使用for/in循环有一个弊端，由于它能够枚举继承的属性名，所以添加到Array.prototype中的方法也会被遍历。另外JavasSript规范允许for/in循环以不同的顺序遍历对象的属性，所以如果算法依赖于遍历的顺序，那么最好不要使用for/in而用常规的for循环。

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

arr.name = 'hello'
for(var i in arr) {
  console.log(arr[i]) // a b  c hello
}

类数组

拥有length属性和对应非负整数的对象叫做类数组

自定义简单的类数组

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

三种常见的类数组对象：

1. arguments对象

function fn() {
	return arguments
}

var arrLike = fn('a', 'b', 'c')
arrLike instanceof Array // false

2. DOM方法返回的对象

var arrLike1 = document.getElementsByTagName('h3')
var arrLike2 = document.querySelectorAll('h3')

arrLike1 instanceof Array // false
arrLike2 instanceof Array // false

3. 字符串

'abc'[1] // 'b'
'abc'.length // 3
'abc' instanceof Array // false

注意： 由于字符串是不可变值，所以能修改数组的方法如push()、sort()、reverse()、splice()等在字符串上是无效的，会报错

var s = 'abc'
Array.prototype.splice.call(s,1)
console.log(s) // 报错

数组的slice方法可以把类数组对象转换成真正的数组

// 上面介绍的三种类数组对象都可以转换
var arr = Array.prototype.slice.call(arrayLike)

JavaScript数组方法是特意定义为通用的，所以它们不仅应用在真正的数组而且在类数组对象上都能正确工作。

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']

数组乱序

数组乱序又称洗牌(shuffle)，有以下两种常用实现方法：

1. 为数组的sort()方法传入一个函数，函数随机返回1或-1，通过随机排序达到乱序的目的。

var array = [1,2,3,4,5]
console.log(array.sort(function(){return Math.random() - 0.5})) // [2, 1, 3, 4, 5]

2. 遍历数组中的元素，遍历的元素与随机位置的元素交换值

var arr = [1,2,3,4,5];
for(var i = 0 ; i < arr.length; i++){
  var randomIndex = Math.floor(Math.random()*arr.length);
  [arr[i],arr[randomIndex]] = [arr[randomIndex],arr[i]];
}

第二种方法效率高于第一种