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版本的代码
Sep 03 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
vue.js多页面开发环境搭建过程
Apr 24 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
德劲1103的维修打理经验
2021/03/02 无线电
PHP数字金额转换成中文大写显示
2019/01/05 PHP
关于递归运算的顺序测试代码
2011/11/30 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
Python实现求解括号匹配问题的方法
2018/04/17 Python
python保存网页图片到本地的方法
2018/07/24 Python
django Serializer序列化使用方法详解
2018/10/16 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
python实现三维拟合的方法
2018/12/29 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
代办委托书怎么写
2014/08/01 职场文书
党支部四风整改方案
2014/10/25 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
Python Pandas常用函数方法总结
2021/06/15 Python
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android
Elasticsearch 批量操作
2022/04/19 Python