在JavaScript中通常使用”."运算符来存取对象的属性的值。或者使用[]作为一个关联数组来存取对象的属性。

对象的属性和方法统称为对象的成员。

访问对象的属性

在JavaScript中,可以使用“ . ”和“ [ ] ”来访问对象的属性。

1. 使用“ . ”来访问对象属性

语法:

objectName.propertyName

其中,objectName 为对象名称,propertyName为属性名称。

2. 使用“ [ ] ”来访问对象属性

语法:

objectName[propertyName]

其中,objectName 为对象名称,propertyName为属性名称。

访问对象的方法

在JavaScript中,只能使用“ . ”来访问对象的方法。

语法:

objectName.methodName()

其中,objectName 为对象名称,methodName() 为函数名称。

【例5-1】创建一个Person类:

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person() {
  this.name=" 张三 "; // 定义一个属性 name
  this.sex=" 男 "; // 定义一个属性 sex
  this.age=22; // 定义一个属性 age
  this.say=function(){ // 定义一个方法 say()
    return "嗨!大家好,我的名字是 " + this.name + " ,性别是 " + this.sex + ",今年 " + this.age +"岁!";
  }
}
var zhangsan=new Person();
alert("姓名:"+zhangsan.name); // 使用“.”来访问对象属性
alert("性别:"+zhangsan.sex);
alert("年龄:"+zhangsan["age"]); // 使用“[ ]”来访问对象属性
alert(zhangsan.say);  // 使用“.”来访问对象方法

PS:浅析对象访问属性的"."和"[]"方法区别

在JavaScript中通常使用”."运算符来存取对象的属性的值。或者使用[]作为一个关联数组来存取对象的属性。但是这两种方式有什么区别了?

例如,读取object中的property属性值:

    object.property

    object['property']

以上两种方式都可以实现属性的存取。

1.语法方面的区别

点表示法的对象的属性名是标识符,而后者的属性名则是一个字符串。

2.灵活性方面的区别

在JavaScript编写程序中,可以为对象创建任意数目的属性。但使用”.“运算符来存取一个对象的属性时,属性名是用标识符表示的。而在JavaScript程序中,标识符必须被逐字地输入,它们不是一种数据类型,因此程序不能对其操作。也就是说,标识符是静态的,在程序中必须对其进行硬编码。

而使用数组[]表示法来存取一个对象的属性时,属性名是用字符串表示的。字符串是JavaScript的一种数据类型,因此可以在程序运行中操作并创建它们。

3.性能方面区别

数组[]表示法在存取属性值时会进行表达式运行。而点表示法是直接存取属性值,理论上执行效率会比数组表示法高。性能方面其实可以忽略。

某些场景必须用到数组表示法来动态存取属性值,这个是点表示法无法做到的。

总的来说,这两种方法区别上不大,都有对应的使用场景。点表示法一般作为静态对象使用时来存取属性。而数组表示法在动态存取属性时就非常有用。

js用"."和"[]"获取属性的区别的更多相关文章

  1. js和jquery获取属性的区别

    一.获取元素: js获取元素: 根据id获取:document.getElementById("id"); 根据类名获取:document.getElementsByClassNa ...

  2. 原生JS与JQ获取元素的区别

    刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...

  3. html中设置data-*属性值 并在js中进行获取属性值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JS之获取属性总结

    嗨,我是沐晴,今天来说说JS中关于获取属性的一些方法和区别.闲话不说,来正题. 首先什么是属性呢,比如input标签,标签中的value id type style等,这些就是属性.我们JS获取属性一 ...

  5. JS中isPrototypeOf 和hasOwnProperty 的区别 ------- js使用in和hasOwnProperty获取对象属性的区别

    JS中isPrototypeOf 和hasOwnProperty 的区别 1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的 ...

  6. offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  8. [转]js对象中取属性值(.)和[ ]的区别

    原文地址:https://www.jianshu.com/p/6a76530e4f8f 今天在写js的过程中遇到这么一个问题,取一个对象的属性值,通过obj.keys怎么都取不出来,但是用obj[ke ...

  9. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

随机推荐

  1. 【BZOJ2597】[Wc2007]剪刀石头布 最小费用流

    [BZOJ2597][Wc2007]剪刀石头布 Description 在一些一对一游戏的比赛(如下棋.乒乓球和羽毛球的单打)中,我们经常会遇到A胜过B,B胜过C而C又胜过A的有趣情况,不妨形象的称之 ...

  2. 九度OJ 1153:括号匹配问题 (DP)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5193 解决:2248 题目描述: 在某个字符串(长度不超过100)中有左括号.右括号和大小写字母:规定(与常见的算数式子一样)任何一个左括 ...

  3. 九度OJ 1146:Flipping Pancake(翻饼子) (递归、游戏)

    时间限制:1 秒 内存限制:32 兆 特殊判题:是 提交:265 解决:116 题目描述: We start with a stack n of pancakes of distinct sizes. ...

  4. IIS7:通过脚本来配置ftp站点

    Appcmd.exe是IIS7提供的一个管理站点的命令行工具,同时支持Ftp和Http的站点,功能还算强大,具体使用方法参考微软网站. 需求 我这里的例子主要配置一个Ftp站点,并且允许CcUser这 ...

  5. 【windows】更改最大动态端口数

    最近业务遇到一个奇怪的问题,一台iis服务器,居然报端口不足的错误,分析应该是服务器可用的动态端口数不够了,windows默认的动态端口范围为:1024-5000,也就是最多3977个动态端口可用,如 ...

  6. WebsiteCrawler

    看到网上不少py的爬虫功能极强大,可惜对py了解的不多,以前尝试过使用c# WebHttpRequert类来读取网站的html页面源码,然后通过正则表达式筛选出想要的结果,但现在的网站中,多数使用js ...

  7. Java基础知识整理之static修饰属性

    static 关键字,我们在开发用的还是比较多的.在<Java编程思想>有下面一段话 static 方法就是没有 this 的方法.在 static 方法内部不能调用非静态方法,反过来是可 ...

  8. GCC的-wl,-rpath=参数

    使用GCC编译动态链接库的项目时,在其他目录下执行很可以出现找不到动态链接库的问题. 这种情况多发生在动态链接库是自己开发的情况下,原因就是程序运行时找不到去何处加载动态链接库. 可能会说在编译时指定 ...

  9. 苹果AppStore如何申请加急审核

    登录iTunesconnect,点击右上角的“?”图标,选择“联系我们”. iTunes Connect首页 依次选择“App Review”.“App Store Review” .” Reques ...

  10. yt-seo-checklist

    YouTube Video Ranking Checklist 1. Create video in 16:9 ratio, 720P (1280x720)pixel 2. Video file na ...