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入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
javascript数组详解
Oct 22 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
原生js无缝轮播插件使用详解
Mar 09 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
深入探究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
建立文件交换功能的脚本(三)
2006/10/09 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
javascript中的this详解
2014/12/08 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
vue3.0生命周期的示例代码
2020/09/24 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
附答案的Java面试题
2012/11/19 面试题
计算机科学系职业生涯规划书
2014/03/08 职场文书
出国留学计划书
2014/04/27 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
一文搞懂php的垃圾回收机制
2021/06/18 PHP
Nginx速查手册及常见问题
2022/04/07 Servers