js对象如何通过变量读取属性

最新推荐文章于 2023-11-30 20:28:52 发布

原创最新推荐文章于 2023-11-30 20:28:52 发布 · 4.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

javascript基础专栏收录该内容

3 篇文章

订阅专栏

本文介绍了JavaScript中通过.和[]操作符读取对象属性的基本方法，并探讨了如何在函数中动态根据参数属性名修改对象值。通过实例演示了`obj.a`的undefined行为以及使用[type]访问对象属性的技巧。

先看看js读取属性的常见的方法。

1.通过.的方式读取

let obj = {
  name:"javascript",
  price:20000
}
console.log(obj.name,obj.price)

2.通过[变量名]的方式读取

let obj = {
  name:"javascript",
  price:20000
}
console.log(obj['name'],obj['price'])

如果有这样一段代码，输出结果会是什么呢？

let a = 'name
let obj = {
    name:"javascript"
}
console.log(obj.a)

结果如下：

为什么是undefined，而不是JavaScript，英文obj.a的意思是obj['a']，他是去找obj里面的a这个属性，而不会把a当作一个变量，这是关键。如果是obj[a]的话结果就是'javascript' ，obj[a]等价于obj['name']等价于obj.name。

好，如果我们要给一个函数传参数，参数是一个对象，对象的属性是一个变量该如何传递。看下面的代码。

//这是一个将表格中某一个输入框内的小写字母变为大写字母的函数
const lowerToUpper = (type,value)=>{
    //form1就是那个表格,setFieldsValue是改变表格值的方法，参数是一个对象，你想要改变那个一输入框的值，就把该输入框的name属性的值当作key，输入框的值当作value传递.
   /*
    form1.setFieldsValue({
      password:value.toUpperCase()//就是把name值为password的输入框的值改为大写
    })
    */

    //当传递的type不同时，要进行改变的输入框也就不同（可能是在操作不同的输入框），这时候我们读取type值作为对象的属性就要使用[type]的方法才能正确拿到不同的属性
    form1.setFieldsValue({
      [type]:value.toUpperCase()
    })
  }