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 相关文章推荐
$()JS小技巧
Jul 21 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
React 高阶组件HOC用法归纳
Jun 13 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
PHP中的超全局变量
2006/10/09 PHP
php pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
php strcmp使用说明
2010/04/22 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
python检测服务器是否正常
2014/02/16 Python
Python中的迭代器漫谈
2015/02/03 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
应届毕业生应聘自荐信
2013/12/07 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
爱护花草树木的标语
2014/06/11 职场文书
先进员工获奖感言
2014/08/14 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis