React基础(四)- 获取对象的键和值

获取对象的键和值
麒麒(小姐姐哦)来啦!!!今天的内容是`获取对象的键和值`
代码是看不会的!!!~~~ 一定要动手呦!
如果对你有帮助 就支持下我呦!♥
先来回顾下涉及的js内容
  • js中获取对象的值有两种方式
  1. 点(.)的方式,如 obj.name
  2. 如果对象的key是变量,则不可以使用点的方式,使用[]方式获取值, 如 obj[name]
  • js中数组的返回值
  1. Object.keys(obj) // 返回一个数组类型的数据,返回内容是对象的键(key)
  2. Object.values(obj) // 返回一个数组类型的数据,返回内容是对象的值(value)
获取对象的内容

这里使用 Object.keys(obj)map() 方法

  <div id="demoReact"></div>
  <script type="text/babel">
    let obj = {
      name: "qiqi",
      age: "20"
    }
    console.log(Object.keys(obj), 'obj');
    let myDemo = <div>
        {Object.keys(obj).map((v,i)=>{
          return <p key={i}>{v}(key)---- (value){obj[v]}</p>
        })}
      </div>;
    ReactDOM.render(myDemo,document.getElementById("demoReact"))
  </script>

输出结果

  • 页面显示:
    name(key)---- (value)qiqi
    age(key)---- (value)20
  • 控制台显示:
    在这里插入图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值