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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
js微信分享实现代码
Oct 11 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
JS实现百度搜索框关键字推荐
Feb 17 Javascript
javascript实现下拉菜单效果
Feb 09 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 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 中dirname(_file_)讲解
2007/03/18 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
php读取本地json文件的实例
2018/03/07 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
python获取当前日期和时间的方法
2015/04/30 Python
Python字符串切片操作知识详解
2016/03/28 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
土木工程个人自荐信范文
2013/11/30 职场文书
医药销售求职信范文
2014/02/01 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
司机岗位职责
2015/02/04 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js