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 作用域使用说明
Aug 13 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
深入探究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中遍历二维数组的几种方法详解
2013/06/08 PHP
PHP计数器的实现代码
2013/06/08 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
用python找出那些被“标记”的照片
2017/04/20 Python
Python 处理图片像素点的实例
2019/01/08 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
如何现实servlet的单线程模式
2014/08/05 面试题
幼儿园安全检查制度
2014/01/30 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
软件售后服务承诺书
2014/05/21 职场文书
实习公司领导推荐函
2014/05/21 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
文明单位汇报材料
2014/12/24 职场文书
财务人员岗位职责
2015/02/03 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
Python天气语音播报小助手
2021/09/25 Python
Python中的程序流程控制语句
2022/02/24 Python
如何利用python创作字符画
2022/06/25 Python
JS实现九宫格拼图游戏
2022/06/28 Javascript