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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
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脚本的10个技巧(3)
2006/10/09 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
PHP学习笔记之session
2018/05/06 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
python中列表元素连接方法join用法实例
2015/04/07 Python
python类继承与子类实例初始化用法分析
2015/04/17 Python
为Python的web框架编写前端模版的教程
2015/04/30 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
解决yum对python依赖版本问题
2019/07/05 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
如何利用Python 进行边缘检测
2020/10/14 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
八一建军节慰问信
2015/02/14 职场文书
放假通知怎么写
2015/08/18 职场文书
考研经验交流会策划书
2015/11/02 职场文书