JS中如何通过属性获取属性值

简介: JS中如何通过属性获取属性值

JS中如何通过属性获取属性值



const mySymbol = Symbol()
let obj = {
  name:'cwl',
  1: '1',
  true:'bool',
  [mySymbol]: 'sym',
}


当属性名是字符串



一般通过 . 来访问

obj.name

f0330acbb99f4f45a215025499ed24c3.png


当属性名是数字时



obj[1] //√
obj.1 //报错

a045b7325a9349a0a6d29c1eb57f0e0b.png


当属性值是bool类型



obj[true]
obj.true
obj['true']

27e6510f1b734e5ea16194bca6992b34.png


当属性值为Symbol类型



obj[mySymbol]


01bc6cea642746799171b279c8908a83.png


注意


Symbol 值作为对象属性名时,不能用点运算符。

const mySymbol = Symbol();
const a = {};
a.mySymbol = 'Hello!';
a[mySymbol] // undefined
a['mySymbol'] // "Hello!"


上面代码中,因为点运算符后面总是字符串,所以不会读取mySymbol作为标识名所指代的那个值,导致a的属性名实际上是一个字符串,而不是一个 Symbol 值。


同理,在对象的内部,使用 Symbol 值定义属性时,Symbol 值必须放在方括号之中。如果不放在方括号中,该属性的键名就是字符串,而不是[]所代表的那个 Symbol 值。


目录
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中,需要通过测试和验证来确定最适合的加载方式,以提供更好的用户体验和页面性能。
|
4月前
|
存储 JavaScript 前端开发
js中map属性
js中map属性
52 1
|
1月前
|
监控 JavaScript 前端开发
使用 `defer` 属性异步加载 JavaScript
【10月更文挑战第24天】使用 `defer` 属性异步加载 JavaScript 是一种有效的提高页面性能和用户体验的方法。通过合理设置 `defer` 属性,可以在不影响页面渲染的情况下异步加载脚本,并确保脚本的执行顺序。在实际应用中,需要根据具体情况选择合适的加载方式,并注意处理可能出现的问题,以确保页面能够正常加载和执行。
|
2月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
85 4
|
2月前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器
30 1
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-枚举对象中的属性
关于JavaScript基础知识中如何枚举对象属性的介绍。
33 1
JavaScript基础知识-枚举对象中的属性
|
2月前
|
存储 JavaScript 前端开发
js中map属性
js中map属性
23 0
|
2月前
|
缓存 JavaScript 前端开发
深入理解Vue.js中的计算属性与侦听属性
【10月更文挑战第5天】深入理解Vue.js中的计算属性与侦听属性
36 0
|
2月前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器:深入理解与实践
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器:深入理解与实践
27 0