JS属性访问表达式之对象访问属性点方式和中括号方式的区别
来源:互联网 发布:mac实用软件 编辑:程序博客网 时间:2024/05/16 15:23
js中属性访问表达式,通过表达式访问对象或者数组中的属性.
本文只讲解对象部分.
语法:
expression.identifier // person.name
这种写法是一个表达式后面加上一个点再加上标识符.
表达式代表对象,标识符表示要访问属性的名称.expression[expression] // person[“name”]
该方法由一个表达式后跟随一个中括号,并且中括号里面也算一个表达式.
这种写法一般适用于对象和数组.第二个表达用于指定要访问的属性名或者数组的索引.
区别:
一般点后面跟上的是对象的属性名标识符,注意是标识符而不是字符串.
例如:
person.name //正确
person.”name” // 语法错误中括号内跟的是属性名的字符串表示方式.
person[“name”]// 正确
person[name]// 返回undefined
机制:
不论方式1或方式2,在点和中括号之前的表达式也会进行计算.
意思是说如果对象或者数组为undefined或者为null,那么就抛出类型错误异常.因为一个是未定义一个是空都无法包含属性.如果使用方式1以点方式访问属性,那么则直接在对象中查找点后标识符对应的属性,并返回该值.
如果使用方式2以中括号访问属性,那么先把中括号内的变量转换成为字符串再再对象中查找.
(关于中括号方式下面我会继续说明)
代码
Code1
<script type="text/javascript"> var person = {name:"Tom"}; // 对象Person console.log(person.name); // Tom,直接用name标识符去对象中找对应的属性找到了就返回(上面已经提过了.) console.log(person."name"); // 语法错误. console.log(person["name"]; // Tom console.log(person[name]); // undefined</script>
console.log(person["name"];
// 输出结果:Tom
这里还需要说明一个过程.
js在创建对象的时候,实际上var person = {name:"Tom"};
和var person = {"name":"Tom"};
是相等的.也就是说不加双引号,他也会自己给加上.
所以他根据中括号中的name字符串去对象中自然就可以找到对应的值.
console.log(person[name]);
// 输出结果:undefined
为什么会输出为undefined?
首先他先计算变量name的值尝试将它转成String类型.但是我们并没有定义name这个变量.所以中括号内的表达式计算结果为undefined,再去对象中找undefined显然是找不到的所以最终输出为undefined.
Code2
<script type="text/javascript"> var person = {name:"Tom"}; // 对象Person var namestr = "name"; console.log(person.nameStr); // undefined console.log(person[nameStr]); // Tom</script>
console.log(person.nameStr);
// 输出结果:undefined
为什么会是undefined?
这很好解释,他直接去对象中找nameStr属性,对象中并没有这个属性,自然就为undefined.
console.log(person[nameStr]);
这里可以输出Tom则是因为nameStr自动转换成了”name”这个字符串.这点上面提到了.
中括号里面的算是一个表达式,如果是一个变量,那么会自动转成字符串类型,这里的nameStr则转成了”name”字符串,所以person[nameStr]
相当于person["name"]
所以自然可以取到属性值.
总结
以点的方式访问,那么一般都是写属性名.
而以中括号的方式访问,需要把属性名用双引号括起来.
如果中括号内是一个变量,那么会自动把变量转成字符串,再去对象中查找.
本文参考:《javascript权威指南》4.4节:属性访问表达式.
- JS属性访问表达式之对象访问属性点方式和中括号方式的区别
- JS:访问对象属性的两种方式区别之中括号引用方式
- JS中访问对象属性的方式
- JavaScript中访问id对象.属性的方式访问属性
- js访问对象属性两种方式
- js的对象属性的两种访问方式和对象的内存理解
- js访问xml之 各种对象的属性和方法
- 类中似有属性的访问方式
- js对象{...}属性访问和属性有无的判断
- JavaScript的对象属性的两种访问方式
- object.property方式访问对象属性时的限制
- <转>获取对象属性的点方法和中括号法的区别
- 获取对象属性的点方法和中括号法的区别
- 访问对象属性的点表示法和方括号表示法的区别
- js访问xml之节点对象属性和方法【1】
- js--语法--for和for-in;访问对象的属性.和[]的区别
- JavaScript中for和for-in的区别;访问对象的属性.和[]的区别
- javaScript访问对象属性应该用点号还是中括号?
- Throwable:Invalid stub element type in index
- iOS性能优化
- hdu1004 Let the Balloon Rise && hdu1263 水果(map)
- 基于SuperSocket 1.6版本的自定义帧过滤的源码分析
- 使用ivy管理项目需要的jar包
- JS属性访问表达式之对象访问属性点方式和中括号方式的区别
- 【PHP】microtime 与 time 函数介绍
- iOS开发网络篇—监测网络状态
- Java CopyOnWriteArrayList 源码分析
- Java千百问_02基本使用(001)_如何用记事本编写Java程序
- 用指针替换全局变量
- 理解C++ dynamic_cast
- POJ3069左右点贪心 贪心
- MyBatis中selectOne和selectList比较