javascript数组详解


Posted in Javascript onOctober 22, 2014

如果你是一个有经验的开发者,你可能会认为这个问题比较简单,但是有的时候,我们会感觉这个问题比较有趣。

首先我们来看看数组的定义:“An array is just a list of values which can be accessed by using an integer as the “key”. The list starts at 0 and goes up from there.”,下面我们用对象来描述数组的定义:

var arr = ["benjamin", "zuojj"];

//=>

var arr = {

    "0": "benjamin",

    "1": "zuojj"

};

看上面的例子,总感觉缺少了什么,OK,数组的长度:

 var arr = {

    "0"      : "benjamin",

    "1"      : "zuojj",

    "length" : 2

};

我们知道,在Javascript语言中,数组是一个特殊的对象,我们可以使用访问数组的方式来访问对象的属性,同时,数组也可以像对象那样添加属性。看下例:

var arr = {

    "0"      : "benjamin",

    "1"      : "zuojj",

    "length" : 2

};

//Outputs: "benjamin"

console.log(arr[0]);

//Outputs: 2

console.log(arr.length);
var arr = ["benjamin", "zuojj"];

arr.url = "3water.com";

//Outputs: "3water.com"

console.log(arr.url);

//Outputs: 2

console.log(arr.length);

下面我们来看看数组的方法,数组有很多可操作的方法,如indexOf/slice/splice/sort等,我们知道实际上这些方法存在于Array.prototype中。看下面的例子:

var arr = ["benjamin", "zuojj"];

//Outputs: 1

console.log(arr.indexOf("zuojj"));

arr.indexOf = function(str) {

    return "It is customed indexOf!";

}

//Outputs: "It is customed indexOf!"

console.log(arr.indexOf("zuojj"));

事实上,我们可以使用对象重载所有的数组方法。看下面的push方法的例子:

var arr = {

    length: 0,

    push: function(val) {

        //赋值

        this[this.length] = val;

        //更新数组长度

        this.length += 1;

        //返回数组长度

        return this.length;

    }

}

arr.push("zuojj");

arr.push("benjamin");

//Object {0: "zuojj", 1: "benjamin", length: 2, push: function}

console.log(arr);

但是有一个是不能从新实现的,数组的字面量定义:

var arr = ["benjamin", "zuojj"];

但是我们可以使用构造函数来代替:

var arr = new Array("benjamin", "zuojj");

如果不适用字面量定义数组,那么我们可以重定义数组的定义,以我们自己的方式。

var myArr = new CustomArray("benjamin", "zuojj");

现在你知道javascript中数组是如何工作的了吧,希望对大家有所帮助。

Javascript 相关文章推荐
jQuery Clone Bug解决代码
Dec 22 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
javascript如何创建对象
Aug 29 Javascript
Vue声明式渲染详解
May 17 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
Javascript 数组排序详解
Oct 22 #Javascript
Javascript中arguments对象详解
Oct 22 #Javascript
Javascript中的默认参数详解
Oct 22 #Javascript
js style动态设置table高度
Oct 21 #Javascript
js读写json文件实例代码
Oct 21 #Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 #Javascript
javascript Deferred和递归次数限制实例
Oct 21 #Javascript
You might like
php程序之die调试法 快速解决错误
2009/09/17 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
用Python编写web API的教程
2015/04/30 Python
Python 装饰器使用详解
2017/07/29 Python
详解如何减少python内存的消耗
2019/08/09 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
三下乡活动方案
2014/01/31 职场文书
护士的自我鉴定
2014/02/07 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
先进个人推荐材料
2014/12/29 职场文书
会计岗位职责
2015/02/03 职场文书
创先争优活动个人总结
2015/03/04 职场文书