前端如何解析[{"imgUrl":"123"},{"imgUrl":"123"}]，获取成一个imgurl的数组：imgurl:["123","123"]

在JavaScript中，前端解析JSON数组通常使用`JSON.parse()`方法，假设你有一个包含对象的字符串，如`"[{"imgUrl":"123"},{"imgUrl":"123"}]"`。你可以按照以下步骤将其转换为一个包含`imgUrl`属性值的数组：

// 假设你有一个JSON字符串
var jsonString = '[{"imgUrl":"123"},{"imgUrl":"123"}]';

// 使用JSON.parse()方法解析字符串
var jsonArray = JSON.parse(jsonString);

// 创建一个imgUrl数组
var imgurls = jsonArray.map(function(obj) {
    return obj.imgUrl;
});

// 打印结果
console.log(imgurls); // 输出: ["123", "123"]

这里，`map()`函数遍历解析后的JSON对象数组，取出每个对象的`imgUrl`属性，并将其添加到新数组`imgurls`中。

相关问题

解释代码：<script> import navBar from '@/components/NavBar' import swiper from '@/components/Swiper' import { getHome } from '../service/home' import { getUserInfo } from '../service/user' import { getLocal } from '@/common/js/utils' import { Toast } from 'vant' import axios from '../utils/axios' export default { name: 'home', data() { return { swiperList: [], isLogin: false, headerScroll: false, hots: [], newGoodses: [], recommends: [], categoryList: [ { name: '楼楼交友', imgUrl: '//s.yezgea02.com/1598679532890/jiaoyou.png', categoryId: 100001 }, { name: '楼楼家政', imgUrl: '//s.yezgea02.com/1598679532890/jiazheng.png', categoryId: 100003 }, { name: '楼楼水产', imgUrl: '//s.yezgea02.com/1598679734813/shuichan1.png', categoryId: 100002 }, { name: '楼楼租车', imgUrl: '//s.yezgea02.com/1598679532890/zuche.png', categoryId: 100004 }, { name: '楼楼招聘', imgUrl: '//s.yezgea02.com/1598679792590/pin.png', categoryId: 100005 }, { name: '楼楼二手', imgUrl: '//s.yezgea02.com/1598679853415/ershou.png', categoryId: 100006 }, { name: '楼楼宠物', imgUrl: '//s.yezgea02.com/1598679532890/chongwu.png', categoryId: 100007 }, { name: '楼楼外卖', imgUrl: '//s.yezgea02.com/1598679905787/wm.png', categoryId: 100008 }, { name: '楼楼电器', imgUrl: '//s.yezgea02.com/1598680199443/dianqi.png', categoryId: 100009 }, { name: '楼楼充值', imgUrl: '//s.yezgea02.com/1598680264015/czcz.png', categoryId: 1000010 } ], } }, components: { navBar, swiper }, async mounted() { const token = getLocal('token') if (token) { this.isLogin = true } window.addEventListener('scroll', this.pageScroll) Toast.loading({ message: '加载中...', forbidClick: true }); const { data } = await getHome() this.swiperList = data.carousels this.newGoodses = data.newGoodses this.hots = data.hotGoodses this.recommends = data.recommendGoodses Toast.clear() }, methods: { pageScroll() { let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop scrollTop > 100 ? this.headerScroll = true : this.headerScroll = false }, goToDetail(item) { this.$router.push({ path: `product/${item.goodsId}` }) } } } </script>

这是一个 Vue.js 组件的代码，其中包含了导入组件、导入服务、导入工具函数、导入第三方库等等。组件的名称是 home，其中包含了一些数据和方法，如轮播图列表、是否登录、是否滚动等等。在 mounted 生命周期中，会调用 getHome() 函数获取首页数据，并将获取到的数据赋值给组件的数据。在 methods 中，还包含了一个 goToDetail() 方法，用于跳转到商品详情页。

<template> <view class='commodity-List'> <Commodity :dataList:'commodityList'></Commodity> </view> </template> <script> import Commodity from './Commodity.vue' export default { data() { return { commodityList: [{ id: 1, imgUrl: "../../static/img/格子衫.webp", name: "便宜大衣快来买啦，不买后悔呀！为了不后悔，一定要买呀！！！", pprice: "299", oprice: "466", discount: "5.6折" }, { id: 2, imgUrl: "../../static/img/短袖.jpg", name: "便宜大衣快来买啦，不买后悔呀！为了不后悔，一定要买呀！！！", pprice: "299", oprice: "466", discount: "5.6折" }] } },,uniapp报错

根据你提供的代码，有一个明显的错误。在 `<Commodity>` 组件中，使用 `:` 绑定属性时，应该使用单个冒号而不是双冒号。另外，在 `export default` 的对象中，有一个额外的逗号，需要将其删除。下面是修正后的代码：

<template>
  <view class="commodity-List">
    <Commodity :dataList="commodityList"></Commodity>
  </view>
</template>

<script>
import Commodity from './Commodity.vue'

export default {
  data() {
    return {
      commodityList: [
        {
          id: 1,
          imgUrl: "../../static/img/格子衫.webp",
          name: "便宜大衣快来买啦，不买后悔呀！为了不后悔，一定要买呀！！！",
          pprice: "299",
          oprice: "466",
          discount: "5.6折"
        },
        {
          id: 2,
          imgUrl: "../../static/img/短袖.jpg",
          name: "便宜大衣快来买啦，不买后悔呀！为了不后悔，一定要买呀！！！",
          pprice: "299",
          oprice: "466",
          discount: "5.6折"
        }
      ]
    }
  },
  components: {
    Commodity
  }
}
</script>

请注意，我假设你的文件路径和引入组件的方式是正确的。如果还有其他问题，请提供更多细节。