Javascript数组Array基础介绍


Posted in Javascript onMarch 13, 2016

Javascript,一门神奇的语言,它的数组也同样独特。我们要去其糟粕,取其精华,把常用的最优实践总结出来。如有错误,请指出。

javascript数组是一种类数组的对象,拥有对象的特性。当属性名是小而连续的整数时,应该使用数组,否则,使用对象。

数组来源

所有的数组都是Array构造出来的,我们来测试一下constructor这个属性。

var arr = [];
arr.constructor === Array; // true
arr.constructor === Array.prototype.constructor; // true

创建数组

//数组字面量方式
var arr1 = [1, 2, 3]; // [1,2,3]

//构造函数方式
var arr2 = new Array();    // [] 空数组
var arr3 = new Array('9');   // ["9"] 一个字符串元素
var arr4 = new Array(9);    // [] 数组长度length为9
var arr5 = new Array([9]);   // [[9]] 相当于二维数组
var arr6 = new Array(1, 2, 3); // [1, 2, 3]
var arr7 = new Array(1, function f(){}, {o : 6}, null,undefined,true);
// 数组可以存储任意混合数据类型

由于arr4的方式,当只有一个数字参数传递到Array的构造函数中,构造函数会返回设置了length属性的空数组。所以推荐使用数组字面量方式,短小而简洁。

检测对象是否为数组

var arr1 = [1, 2, 3];
typeof(arr1); // object

众所周知,typeof不能正确检测类型。

arr1 instanceof Array; //true

instanceof 方式在一个网页内是没有问题,一旦嵌套其他网页,便存在两个全局作用域,互相调用时的检测就会出问题。

Array.isArray(arr1); // true

Array.isArray() 是ECMAScript5 新增的方法,没有缺陷。唯一的问题是ie8浏览器不支持,ie9浏览器在严格模式下也不支持。

Object.prototype.toString.apply(arr1).slice(8, -1); // Array

最后一种方式是检测类型的最好方法。

数组长度

数组的length也是它的属性,增大length也不会发生越界错误。
length值等于数组最大的整数属性名加1。

var arr1 = [];
arr1[9] = 1; // 长度为10,只包含一个元素的数组

设小值将将会把属性名大于等于length的属性删除。
如果将length值设为0,相当于清空数组。

var arr2 = [1, 2, 3, 4, 5];
arr2.length = 3; // [1, 2, 3]
arr2.length = 0; // []

数组遍历

遍历数组不要使用for in循环遍历数组,因为for in会遍历原型链上的所有属性,但我们并不需要这么多。推荐使用for循环的方式。

var arr1 = [1, 2, 3];
arr1.test = 9;

//for in 方式
for(var prop in arr1){
  cosole.log(prop, arr1[prop]);
}
// 输出如下
// 0 1
// 1 2
// 2 3
// test 9

//for循环方式
for(var i = 0, len = arr1.length; i < len; i++){
  console.log(arr1[i]);
}
//输出如下
// 1
// 2
// 3

我们看到for in方式多出了一个test值,可以使用hasOwnProperty函数排除,但那会比for循环的方式慢很多。
缓存数组长度很有必要的一步,每次访问是有性能开销的(最新的浏览器在这方面做了优化)。

小结

简单介绍了Array的相关基础知识,到这里也算是能对Array有更全面的理解了。下一篇介绍Array的方法。

Javascript虽然有很多不太容易弄懂的地方,随着长时间的学习,我已经慢慢地爱上它了(因为现在没有妹子让我爱)。

Javascript 相关文章推荐
JavaScript与C# Windows应用程序交互方法
Jun 29 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
详解iframe与frame的区别
Jan 13 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
微信小程序通过websocket实时语音识别的实现代码
Aug 19 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 #Javascript
简单谈谈json跨域
Mar 13 #Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 #Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 #Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 #Javascript
Node.js的Express框架使用上手指南
Mar 12 #Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 #Javascript
You might like
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
PHP分页显示制作详细讲解
2006/12/05 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
Python subprocess模块学习总结
2014/03/13 Python
Python和php通信乱码问题解决方法
2014/04/15 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
基于python实现名片管理系统
2018/11/30 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
出国签证在职证明
2014/01/16 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
歌咏比赛主持词
2015/06/29 职场文书
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸