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 mobile changepage的三种传参方法介绍
Sep 13 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
Nuxt使用Vuex的方法示例
Sep 06 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
php使用百度天气接口示例
2014/04/22 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
python如何查看系统网络流量的信息
2016/09/12 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
小学数学国培感言
2014/03/10 职场文书
党员自我评价2015
2015/03/03 职场文书
仰望星空观后感
2015/06/10 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang