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 相关文章推荐
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
JavaScript错误处理
Feb 03 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 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二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
PHP中header用法小结
2016/05/23 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
Python入门篇之编程习惯与特点
2014/10/17 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
10条PHP编程习惯
2014/05/26 面试题
药物学专业学生的自我评价
2013/10/27 职场文书
学雷锋演讲稿
2014/03/04 职场文书
房产公证委托书范本
2014/09/20 职场文书
python关于集合的知识案例详解
2021/05/30 Python
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL