javascript中数组与对象的使用方法区别

 更新时间:2022年12月14日 15:03:20   投稿:yin  
数组(array)是按次序排列的一组值。JS其实没有真正的数组,只是用对象模拟数组。本质上,数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。在javascript中,数组又可以认为是索引数组,即可以用整数来进行索引。数组和对象在这种情况下非常接近。

数组(array)是按次序排列的一组值。JS其实没有真正的数组,只是用对象模拟数组。本质上,数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。

在javascript中,对象被定义为属性和值的集合。最直接的表现便是对象字面量:var obj={a:3,b:"hello",c:[1,2,3]}。相比传统的面向对象的语言,这种方式大大简化的对象创建。在这种情况下,javascript的对象其实就是一个关联数组。在javascript中,数组又可以认为是索引数组,即可以用整数来进行索引。数组和对象在这种情况下非常接近。

一、JS声明对象或数组

JS对象:{ }  JS数组:[ ]

对象       var b={m:'123',n:'abc'};alert(b.m);alert(b.n);

一维数组     var a=[1,2,3];alert(a[1]);alert(a.length);
二维数组     var ar = [ [ 'a' , 'b'],[ 4, 5 , 6 , 5 ],[ 7, 8 , 9 ] ];alert(ar[1].length);

对象跟数组结合  var b={m:[{f:'123'},{g:'abc'}],n:[{h:'456'},{u:'098'}]};alert(b.m[0].f);

数组跟对象结合  var b=[{m:'abc',n:'fff'},{x:'123',y:'555'}];alert(b[1].x);

二、数组”(array)和“对象”(object)两者都可以用来表示数据的集合。

比如数组a=[1,2,3,4],和对象a={0:1,1:2,2:3,3:4},运行alert(a[1])两种结果是相同的。

这就是说,数据集合既可以用数组表示,也可以用对象表示,那么我到底该用哪一种呢?

三、数组和对象的使用方法区别:

(1)创建方式不同:

数组表示有序数据的集合,而对象表示无序数据的集合。数组的数据没有”名称”(name),对象的数据有”名称”(name)。

var arr = [11,22,33,44,55];
var obj = {
    attr1:'01',
    attr2:'02',
    attr3:'03',
    attr4:'04',
    attr5:'05'
}

(2)调用方法不同

对象的属性可以用点号和中括号(注意中括号内是字符串表达式,要加引号)来引用,而数组的元素使用中括号来引用。

console.dir(arr[1]);
console.dir(obj.attr1);
console.dir(obj['attr1']);

(3)对象键值唯一,数组可以重复

var arr = [11,11,33,44,55];
var obj = {
        attr1:'01',
        attr2:'02',
        attr3:'03',
        attr4:'04',
        attr5:'05',
        attr1:"00"
}
console.dir(arr);
console.dir(obj);

(4)对象没有长度,不能用for循环

// 对象没有长度

    console.dir(arr.length);   //

    console.dir(obj.length);   // undefined

    for (var i = 0; i <arr.length; i++) {

        console.dir(arr[i]);

     }

(5)数组和对象都可以使用for...in 循环

for(var index in arr){

    console.dir(index);          // 属性

    console.dir(arr[index]);    // 值

}

for(var attr in obj){

     console.dir(attr);          // 属性

     console.dir(obj[attr]);    // 值

}

到此这篇关于javascript中数组与对象的使用方法区别的文章就介绍到这了,更多相关js数组与对象区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript事件冒泡简单示例

    javascript事件冒泡简单示例

    这篇文章主要介绍了javascript事件冒泡原因、显示效果及阻止冒泡的方法,需要的朋友可以参考下
    2016-06-06
  • JavaScript 应用类库代码

    JavaScript 应用类库代码

    S.Sams Lifexperience CopyRight (C) 2003-2007 S.Sams Lifexperience ScriptClassLib MSNLive: S.Sams#msn.com Update by : 2007-01-19 转载传播请保留版权
    2008-06-06
  • 微信小程序版翻牌小游戏

    微信小程序版翻牌小游戏

    这篇文章主要为大家详细介绍了微信小程序版翻牌小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • js实现点击切换checkbox背景图片的简单实例

    js实现点击切换checkbox背景图片的简单实例

    下面小编就为大家带来一篇js实现点击切换checkbox背景图片的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 浅谈JavaScript超时调用和间歇调用

    浅谈JavaScript超时调用和间歇调用

    JavaScript是单线程语言,但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码,而后者则是每隔指定的时间就执行一次代码。
    2015-08-08
  • 用js提交表单解决一个页面有多个提交按钮的问题

    用js提交表单解决一个页面有多个提交按钮的问题

    这篇文章主要介绍了用js提交表单解决一个页面有多个提交按钮的问题,主要是判断是否为提交文本,然后再执行相应的动作,需要的朋友可以参考下
    2014-09-09
  • unapp微信小程序转发分享及携带参数的2种方式

    unapp微信小程序转发分享及携带参数的2种方式

    这篇文章主要给大家介绍了关于unapp微信小程序转发分享及携带参数的2种方式,我们在微信小程序中经常会使用到分享商品海报,或者是重绘微信小程序分享链的图片功能,需要的朋友可以参考下
    2023-11-11
  • layui table复选框禁止某几条勾选的实例

    layui table复选框禁止某几条勾选的实例

    今天小编就为大家分享一篇layui table复选框禁止某几条勾选的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 全面了解函数声明与函数表达式、变量提升

    全面了解函数声明与函数表达式、变量提升

    下面小编就为大家带来一篇全面了解函数声明与函数表达式、变量提升。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • ES10的13个新特性示例(小结)

    ES10的13个新特性示例(小结)

    这篇文章主要介绍了ES10的13个新特性示例(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09

最新评论