JavaScript的进阶之路（五）理解数组1

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

数组是值得有序结合，每个值叫做一个元素，每个元素的位置称为索引，索引从0开始。

在JavaScript中，数组是对象的特殊形式。继承自Array.prototype中的属性，有丰富的数组操作方法。

通常数组的实现是经过优化的，用数字索引访问数组元素比访问常规的对象属性要快很多。足够稀疏的数组查找元素和常规对象属性的查找时间一样长。

首先：创建数组

var a1=[];
var a2=[1,2,3];
var a3=[1,"a",2,"b"];
var a4=[1,[2,3],4];
var a5=new Array();
var a6=new Array(10); //预分配一个数组空间，没有存储值，甚至索引属性还未定义
var a7=new Array(1,2,3,"hello,world");
var base =1024;
var a8 = [base,base+1,base+2];
var a9 = [1,,]; //省略数组直接量中的某个值，将被赋予undefined值，直接量的写法允许有可选的结尾逗号，因此a9数组有2个元素
console.log(a9.length); //

其次：数组元素的读和写。除了正常的读和写，数组也可以从原型继承元素，在ECMA5中可以定义数组元素的getter和setter方法（暂不研究）。

//定义一个测试数组
var arr=[1,2,3,null,4,5,6];
//读操作
console.log(arr[3]); //获得数组下标是3的元素
console.log(arr[arr.length-1]); //获得数组最后一个元素
//写操作
arr[arr.length] = 7; //给数组末尾添加一个元素
//数组遍历
for(var i=0,len=arr.length;i<len;i++){
//跳过null undefined 和不存在的元素
if(!arr[i]){
continue;
}
console.log(arr[i]);
}
//将对象中的值变成数组
var obj={x:1,y:2,z:5,m:3,n:"a"};
var array1=[];
var keys=Object.keys(obj); //将对象的属性变为数组
console.log(keys);
for(var i=0,len=keys.length;i<len;i++){
var key=keys[i];
array1[i]=obj[key];
}
console.log(array1);

第三：关于稀疏数组

var test = new Array(10); //利用new Array()构造函数创建稀疏数组
var test1 = [1,2,3];
delete test1[1]; //如果从数组中删除一个元素，也会变为稀疏数组，但不影响数组的下标和长度
console.log(test1[1]); // 返回undefined
console.log(test1[2]); //还是3
test1[99] = 100; //利用大于索引值大于当前数组长度创建稀疏数组
console.log(0 in test); //false 判断test在索引0处有没有元素 true有 false没有
console.log(1 in test1); //false 删除后在下标位置没有元素

第四：数组的长度

如果给数组设置长度（array.length=2）;若设置的长度小于数组长度则移除数组中的项，大于数组的长度则添加undefined项

数组的长度是：array.length;数组最后一项的下标是：array.length-1

设置数组的特性Object.defineProperty()

封闭数组Object.seal()可以改，但是不能删除和扩展

冻结数组Object.freeze()不能修改删除扩展

//定义一个测试数组
var arr=[1,2,3,null,4,5,6];
console.log(arr.length); //
arr.length =4;
console.log(arr); // [1,2,3,null]
arr.length = 5;
console.log(arr); //[1,2,3,null,empty] 长度为5
Object.defineProperty(arr,"length",{writable:false}); //设置数组对象的特性长度不能修改
arr.length = 0;
console.log(arr); //[1,2,3,null,empty] 长度为5
Object.seal(arr); //封闭数组arr 能改但是不能删除和扩展
delete arr[0];
console.log(arr[0]); //1 没有删除
arr[0] = 7;
console.log(arr[0]); //但是可以修改
Object.freeze(arr); //冻结数组arr,完全不能修改删除扩展
arr[0] = 9;
console.log(arr[0]); //还是 7 被冻结不能修改

第五：数组元素的添加和删除

添加：下标方法 push() unshift()

删除：设置长度 pop() shift() delete操作符

万能大法：splice()

第六：数组遍历：使用for循环是遍历数组元素最常见的方法，for（var e in arr）不推荐使用，在ECMAScript5中，还定义了数组的forEach(v,i,a){}方法

//创建一个对象，获得对象的属性组成的数组
var obj={x:1,y:2,z:5,m:null,n:"a"};
var keys = Object.keys(obj);
console.log(keys); // [x,y,z,m,n]
//利用for循环获得对象的值，添加到新数组中
var array1 = [];
for(var i=0,len=keys.length;i<len;i++){
var key = keys[i]; //key= x,y,z,m,n
array1.push(obj[key]); // 等同于array1[i]=obj[key];
}
console.log(array1); // [1,2,5,null,a] //如果数组是稀疏数组呢？如果想要排除null,undefined,不存在的元素
for(var i=0,len=array1.length;i<len;i++){
//跳过不存在的元素
if(!(i in array1)) continue;
//跳过不存在的元素和undefined
if(array1[i]===undefined) continue;
//跳过null undefined 和不存在的元素
if(!array1[i]) continue;
console.log(array1[i]); //1,2,5,a
}
//由于for in 循环能够枚举继承的属性名，所以在数组上不应该使用for in循环，若使用应检测过滤掉不想要的属性
for(var e in array1){
if(!array1.hasOwnProperty(e)) continue; //跳过了数组继承的属性
if(String(Math.floor(Math.abs(Number(e))))!==e) continue; //跳过不是非负整数的e
//以上检测二者取其一就可以
}
//在ECMAScript5中可以使用forEach()方法遍历数组元素
var array2 = [1,2,3,4,5];
var squares = 0;
array2.forEach(function(v){
squares += v*v;
});
console.log(squares);