数组是值得有序结合,每个值叫做一个元素,每个元素的位置称为索引,索引从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);

第七:多维数组 arr[0][0]  访问数组中第一个数组元素的第一个元素

            var arr = new Array(10); //创建一个长度为10的数组
for(var i=0;i<arr.length;i++){
arr[i] = new Array(10); //利用for循环给每个数组的元素添加一个长度为10的数组
}
//初始化数组(给多维数组赋值)
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr[i].length;j++){
arr[i][j] = i*j;
}
}
console.log(arr);
console.log(arr[5][7]);

JavaScript的进阶之路(五)理解数组1的更多相关文章

  1. JavaScript的进阶之路(五)理解数组2

    数组方法 //定义一个测试数组 var array1 = [1,2,5,null,"a"]; //join()方法是String.split()方法的逆操作,后者是将字符串分割成若 ...

  2. JavaScript的进阶之路(六)理解函数

    函数:定义一次,多次调用:用于对象的属性则称为对象的方法:在JavaScript中,函数即对象:嵌套的函数形成闭包: 定义函数和简单调用函数: //函数定义 function f1(){ //没有参数 ...

  3. JavaScript的进阶之路(四)理解对象2

    对象的三个属性 原型属性 1.var v={}的原型是Object.prototype;继承了一个constructor属性指代Object()构造函数,实际的原型是constructor.proto ...

  4. JavaScript的进阶之路(四)理解对象1

    对象是JavaScript的基本数据类型.简单的名值对组成了对象,BUT:还可以从一个被称为原型的对象继承属性,对象的方法通常就是继承的属性. 对象最常见的用法有:创建.设置.查找.删除.检测.枚举它 ...

  5. JavaScript正则进阶之路——活学妙用奇淫正则表达式

    原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博客,记录点滴. 有些童鞋肯定 ...

  6. JavaScript的进阶之路(七)客户端JavaScript知识点总结

    一.客户端JavaScript主要是BOM DOM的操作和js脚本的兼容性.互用性.可访问性.安全性的应用.以及一些框架的引用. 二.BOM:浏览器对象模型 主要介绍window对象 1.定时器:se ...

  7. JavaScript的进阶之路(三)引用类型之Object类型和Array类型

    引用类型 Object类型 function a(num){ if(num>3){ a(--num); } console.log(num); } a(5); //如何创建对象的实例 var o ...

  8. JavaScript的进阶之路(一)

    JavaScript由ECMAScript BOM DOM三部分组成 ECMAScript重要版本1,3,5,6,提供核心语言功能 DOM提供访问和操作网页内容的方法和接口 BOM提供与浏览器交互的的 ...

  9. ASP.NET MVC进阶之路:深入理解依赖注入(DI)和控制反转(IOC)

    0X1 什么是依赖注入 依赖注入(Dependency Injection),是这样一个过程:某客户类只依赖于服务类的一个接口,而不依赖于具体服务类,所以客户类只定义一个注入点.在程序运行过程中,客户 ...

随机推荐

  1. ThinkPHP 5.0.x SQL注入分析

    前言 前段时间,晴天师傅在朋友圈发了一张ThinkPHP 注入的截图.最近几天忙于找工作的事情,没来得及看.趁着中午赶紧搭起环境分析一波.Think PHP就不介绍了,搞PHP的都应该知道. 环境搭建 ...

  2. Apache Maven的入门使用之项目的基本构建(1)

    前言 最近在研究java框架struts2的相关漏洞,然后就去看了官方给出的文档.在看文档的过程中发现使用到了Apache Maven这个项目管理工具,我在网上搜索了一下,大多数文章都写得不是很系统, ...

  3. Scrapyd API的安装

    安装好了Scrapyd之后,我们可以直接请求它提供的API来获取当前主机的Scrapy任务运行状况.比如,某台主机的IP为192.168.1.1,则可以直接运行如下命令获取当前主机的所有Scrapy项 ...

  4. HLS:跑马灯实验

    跑马灯实验的第一部分记录: 1. vivado 2018.2的HLS在跑C/RTL co-simulation的时候,一直报错,不论是用modelsim 还是vivado自带的similator.使用 ...

  5. Zynq-7000 FreeRTOS(二)中断:PL中断请求

    总结Zynq-7000的PL发送给PS一个中断请求,为FreeRTOS中断做准备. UG585的P225显示了系统的中断框图,如下图所示. 图:ZYNQ器件的中断框图 UG585的P227画出来中断控 ...

  6. 造一个轮子然后安装到pypi上

    之前写了一个爬虫的包,主要是根据自己写爬虫的情况总结一下. 因为每次都要重复写一些代码,所以提炼出来,类似一个框架的样子吧. 开始是放在自己的项目里引用,但如果换了一个项目,就得重新拷一遍,很麻烦. ...

  7. (转)oracle linux 7 安装oracle 12c

    原文:https://blog.csdn.net/jiuyun1986/article/details/53589446 https://blog.csdn.net/admin_root1/artic ...

  8. android开发之提高应用启动速度_splash页面瞬间响应_避免APP启动闪白屏

    Application和Activity中的onCreate都进行了优化,基本没有耗时操作,但是启动应用之后还是会闪现一下白色背景,然后才进入Splash页面,对比了一下QQ.微信.微博等客户端,点击 ...

  9. ie和火狐事件addEventListener()及attachEvent()区别分析

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...

  10. css定位问题的记录

    postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom.兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留.而 ...