脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js中[]、{}、()区别

js中[]、{}、()区别示例浅析

 更新时间：2023年06月20日 11:15:48   作者：前端kit  
很多人都知道在js中[]表示的是数组对象,{}表示的是对象,但是这两者的区别却说不出来,下面这篇文章主要给大家介绍了关于js中[]、{}、()区别的相关资料,需要的朋友可以参考下

一、{ } 大括号，表示定义一个对象，大部分情况下要有成对的属性和值，或是函数体

{}表示对象、[]表示对象的属性、方法,()如果用在方法名后面，代表调用

如：var LangShen = {"Name":"Langshen","AGE":”28”}; 

上面声明了一个名为“LangShen”的对象，多个属性或函数用,（逗号）隔开，因为是对象的属性， 

所以访问时，应该用.（点）来层层访问：LangShen.Name、LangShen.AGE，

当然我们也可以用数组的方式来访问，如：LangShen["Name"]、LangShen["AGE"]，结果是一样的。

var LangShen = { 
    Name : function(){ 
        return "LangShen"; 
    }, 
    Age : function(){ 
        return "28"; 
    } 
} 
调用 LangShen.Name()

二、[ ]中括号，表示一个数组，也可以理解为一个数组对象

如：var LangShen = [ "Name","LangShen","AGE","28" ]; 

很明显，每个值或函数，都是独立的，多个值之间只用,（逗号）隔开，因为是数组对象，所以它等于： 

var LangShen = Array( "Name","LangShen","AGE","28" );

访问时，也是和数组一样，alert( LangShen[0] )

三、{ } 和[ ] 一起使用，我们前面说到，{ } 是一个对象，[ ] 是一个数组，我们可以组成一个对象数组

var LangShen = { 
    "Name":"Langshen", 
    "MyWife":[ "LuLu","26" ], 
    "MySon":[{"Name":"Son1"},{"Name":"Son2"},{"Name":"Son3"}] 
}

从上面的结构来看，是一个对象里面的第一项是个属性，第二项是一个数组，第三个是包含有多个对象的数组。

调用起来，也是一层一层访问，对象的属性用.（点）叠加，数组用 [下标] 来访问。 

如：alert( LangShen.MySon[1].Name ) ；

var LangShen=[
    {“name”：“wangwu”},
    {“name”：“lieu”}
];

这是一个对象数组

四、()多表示参数、{}表示函数体

function show(name){
    Alert(name);
}

es6中，

let show=(name)=>{
    alert(name);
}

在es6中如果参数只有一个，或者函数体只有一个话，可以省略（）、{},如

let show=name=>alert(name);

补充：{ } 和 [ ]一起使用，前面说过{ }是一个对象，[ ] 是一个数组，一起使用的话，可以组成一个对象数组

例如:

var xiaoming = {
"name":"xiaoming",
"hiswife":["xiaoli","24"],
"hishabit":[{"habit1":"football"},{"habit2":"adventure"}]
}

总结

到此这篇关于js中[]、{}、()区别的文章就介绍到这了,更多相关js中[]、{}、()区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 微信小程序自定义组件实现单选功能

    微信小程序自定义组件实现单选功能

    这篇文章主要为大家详细介绍了微信小程序自定义组件实现单选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • js密码强度检测

    js密码强度检测

    这篇文章主要介绍了js密码强度检测的相关资料，并给出了详细代码，需要的朋友可以参考下
    2016-01-01
  • js HTML DOM EventListener功能与用法实例分析

    js HTML DOM EventListener功能与用法实例分析

    这篇文章主要介绍了js HTML DOM EventListener功能与用法,结合实例形式分析了js HTML DOM EventListener事件监听相关用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • JavaScript中常用的3种弹窗(警告框、确认框、提示框)

    JavaScript中常用的3种弹窗(警告框、确认框、提示框)

    JavaScript提供了几种常用的弹窗方法,用于与用户进行交互或显示提示消息,这篇文章主要给大家介绍了关于JavaScript中常用的3种弹窗的相关资料,分别包括警告框、确认框、提示框,需要的朋友可以参考下
    2023-09-09
  • 利用JS实现窗口最大化和最小化效果

    利用JS实现窗口最大化和最小化效果

    在现代 Web 开发中,JavaScript 提供了多种方法来与浏览器窗口进行交互,包括最大化和最小化浏览器窗口,虽然浏览器通常会限制对窗口尺寸的直接控制,但我们依然可以实现一些常见的行为,本文将探讨如何使用 JavaScript 实现窗口的最大化和最小化效果
    2024-12-12
  • JavaScript栏目列表隐藏/显示简单实现

    JavaScript栏目列表隐藏/显示简单实现

    隐藏侧边栏，并将图片换成右箭头图片;显示侧边栏，并将图片换成左箭头，这样的效果想必大家都很熟悉吧，接下来实现下，感兴趣的朋友可以参考下哈
    2013-04-04
  • 原生JS和JQuery动态添加、删除表格行的方法

    原生JS和JQuery动态添加、删除表格行的方法

    这篇文章主要介绍了原生JS和JQuery动态添加、删除表格行的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下
    2015-05-05
  • 详解uniapp无痛刷新token方法

    详解uniapp无痛刷新token方法

    为了给用户一个流畅的体验,token过期后需要重新请求新的token替换过期的token。本文将详细介绍uniapp无痛刷新token方法。
    2021-06-06
  • js实现橱窗展示效果

    js实现橱窗展示效果

    这篇文章主要为大家详细介绍了js实现橱窗展示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动

    js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动

    这篇文章主要介绍了js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动,需要的朋友可以参考下
    2014-04-04

最新评论