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 XML数据显示为HTML一例
Dec 23 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
Vue编程式跳转的实例代码详解
Jul 10 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
高级文秘工作总结的自我评价
2013/09/28 职场文书
生产副总岗位职责
2013/11/28 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android