首页 专题 H5案例 前端导航 UI框架

JavaScript学习笔记整理(5):数组

作者:TG 日期: 2016-09-28 阅读: 1583
数组是值的有序集合。每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示(从0开始),称为索引,整个数组用方括号表示。

var  arr = [1,2,3];

除了在定义时赋值,数组也可以先定义后赋值。

var arr = [];

arr[0] =1;

数组元素可以是任意类型。

var arr = [1,'a',{name:'a'},function(){}];

上面数组arr的4个元素分别是数字,字符串,对象,函数。
数组属于一种特殊的对象。

typeof [1]  

// "object"

JavaScript语言规定,对象的键名一律为字符串,所以,数组的键名其实也是字符串。之所以可以用数值读取,是因为非字符串的键名会被转为字符串。

创建数组
使用数组直接量是创建数组最简单的方法,在方括号中将数组元素用逗号隔开即可。

var arr = [1,2,3];

注:如果省略数组直接量的某个值,省略的元素将被赋予undefined值。

new Array()
我们也可以调用构造函数Array()创建数组

var a=new Array(); 

var a2=new Array(10); 

var a3=new Array(1,2,3,4);



数组长度 每个数组都有一个length属性,返回数组的元素数量

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

JavaScript使用一个32位整数,保存数组的元素个数。这意味着,数组成员最多只有4294967295个(232 - 1)个,也就是说length属性的最大值就是4294967295。

只要是数组,就一定有length属性。该属性是一个动态的值,等于键名中的最大整数加上1.

length属性是可写的。如果人为设置一个小于当前成员个数的值,该数组的成员会自动减少到length设置的值。

var arr = [1,2,3]

arr.length  //3


arr.length = 2;

arr //[1,2]

将数组清空的一个有效方法,就是将length属性设为0。

var arr = [1,2,3];

arr.length = 0;

arr  //[]

如果人为设置length大于当前元素个数,则数组的成员数量会增加到这个值,新增的位置都是空位。

var arr = [1];

arr.length=3;

arr[1]  //undefined

在ECMAScript 5中,可以用Object.defineProperty() 让数组的length属性变成只读。

空位 当数组的某个位置是空元素,即两个逗号之间没有任何值,我们称该数组存在空位(hole)。

var arr = [1,,2]

arr.length  //3


但是,如果最后一个元素后面有逗号,并不会产生空位。数组直接量的语法允许有可选的结尾的逗号,故[,,]只有两个元素而非三个。

var arr = [,,];

arr.length  //2

数组元素的读和写 使用([])操作符来访问数组中的一个元素。

var arr = [1,2]


arr[0]  //1

arr[1]=3;  // [1,3]

数组元素的添加和删除
可以使用push()方法在数组末尾添加一个或多个元素。

var arr = [1,2]

arr.push(3)  // [1,2,3]

arr.push('a','b') //[1,2,3,'a','b']


// shift()是删除数组的一个元素。 

arr.shift()   // [2,3,'a','b']

稀疏数组
稀疏数组是指包含从0开始的不连续索引的数组。通常,数组的length属性值代表数组中元素的个数,但如果是稀疏数组,length属性值大于元素的个数。

多维数组
JavaScript不支持真正的多维数组,但可以用数组的数组来近似。也可以说,数组里放数组。

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

arr[0][0]  // 1

arr[1][1]  //3


遍历

我们可以使用for循环、while循环、for..in或者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++;  

}


//for..in

for (var i in a) {    

  console.log(a[i]);    

}


//forEach

a.forEach(function(v){

  console.log(v);

})


类数组对象

在JavaScript中,有些对象被称为“类数组对象”。意思是,它们看上去很像数组,可以使用length属性,但是它们并不是数组,无法使用一些数组的方法。

var o = {

  0: 'a',

  1: 'b',

  length:2

}

o[0]  // "a"

o[1]  // "b"

o.length // 2

o.push('d') // TypeError: o.push is not a function

上面代码中,变量o是一个对象,虽然使用的时候看上去跟数组很像,但是无法使用数组的方法。这就是类数组对象。 


类数组对象有一个特征,就是具有length属性。换句话说,只要有length属性,就可以认为这个对象类似于数组。但是,对象的length属性不是动态值,不会随着成员的变化而变化。


由于类数组对象没有继承自Array.prototype,那就不能在它们上面直接调用数组方法。不过我们可以间接的使用Function.call方法调用。

var o = {

  0: 'a',

  1: 'b',

  length:2

};

Array.prototype.slice.call(o)  // ["a","b"]


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


关注”全栈技术杂货铺“

全栈技术杂货铺