js用"."和"[]"获取属性的区别
在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用"."和"[]"获取属性的区别的更多相关文章
- js和jquery获取属性的区别
一.获取元素: js获取元素: 根据id获取:document.getElementById("id"); 根据类名获取:document.getElementsByClassNa ...
- 原生JS与JQ获取元素的区别
刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...
- html中设置data-*属性值 并在js中进行获取属性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS之获取属性总结
嗨,我是沐晴,今天来说说JS中关于获取属性的一些方法和区别.闲话不说,来正题. 首先什么是属性呢,比如input标签,标签中的value id type style等,这些就是属性.我们JS获取属性一 ...
- JS中isPrototypeOf 和hasOwnProperty 的区别 ------- js使用in和hasOwnProperty获取对象属性的区别
JS中isPrototypeOf 和hasOwnProperty 的区别 1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的 ...
- offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂
浅谈JS中的!=.== .!==.===的用法和区别 var num = 1; var str = '1'; var test = 1; test == num //tr ...
- [转]js对象中取属性值(.)和[ ]的区别
原文地址:https://www.jianshu.com/p/6a76530e4f8f 今天在写js的过程中遇到这么一个问题,取一个对象的属性值,通过obj.keys怎么都取不出来,但是用obj[ke ...
- html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。
关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...
随机推荐
- Chrome 的滚动条修改.
该方法针对于win下Chrome任何版本(未测试基于Chrome内核的其他浏览器),Lunix就是目录换了一下 目录是:**\Google\Chrome\User Data\Profile 2\Use ...
- protobuf json xml比较
1 protobuf/xml/json对比 从数据的存储格式的角度进行对比 假如要存储一个键值对: {price:150} 1.1 protobuf的表示方式 message Test { opti ...
- (1)Web 应用是一个状态机,视图与状态是一一对应的。 (2)所有的状态,保存在一个对象里面。
Redux 入门教程(一):基本用法 - 阮一峰的网络日志 http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_u ...
- Refused to set unsafe header
Refused to set unsafe header Refused to set unsafe header "Host"waitServerDeal @ tGet.html ...
- HDFS relaxes a few POSIX requirements to enable streaming access to file system data
https://hadoop.apache.org/docs/r2.7.2/hadoop-project-dist/hadoop-hdfs/HdfsDesign.html Introduction [ ...
- Discuz!支持发布视频帖子设定 + 修改后台文件
最近想做一个地方性论坛,果断在阿里巴巴的phpwind论坛程序与腾讯旗下的discuz论坛程序中选择,虽然phpwind大气,后面还是 决定选择了discuz程序用来构建这个平台,经过一番安装后,发现 ...
- Java for LeetCode 124 Binary Tree Maximum Path Sum
Given a binary tree, find the maximum path sum. The path may start and end at any node in the tree. ...
- Vue:实践学习笔记(5)——Vue-Cli脚手架的使用
Vue:实践学习笔记(5)——Vue-Cli脚手架的使用 快速开始 项目配置 可视化配置 vue ui 命令配置 vue init webpack vue-demo(项目名) 运行测试 进入vue-d ...
- 前端开发工程师必备JS技能-切图
/******************************************** 学习时间:2015年12月21日 学习者:易天曦 学习目的:掌握切图技巧 学习目标:1.学会从网页设计师的P ...
- css3图书3D动画
css3图书3D动画,css3,立体特效,旋转效果,3D动画,css3图书3D动画是一款基于css3实现的立体旋转3D图书动画特效. 代码下载页:http://www.huiyi8.com/sc/71 ...