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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
vue实现移动端返回顶部
Oct 12 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 编写大型网站问题集
2010/05/07 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
JS实现图片切换特效
2019/12/23 Javascript
轻松掌握python设计模式之访问者模式
2016/11/18 Python
python实现简易动态时钟
2018/11/19 Python
Series和DataFrame使用简单入门
2019/11/13 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
理工大学毕业生自荐信
2013/11/01 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
招商引资工作汇报
2014/10/28 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
python scrapy简单模拟登录的代码分析
2021/07/21 Python