如何在javascript中将字符串作为命名对象推送到数组中？答案

【问题标题】：How to push a string onto an array as a named object in javascript?如何在javascript中将字符串作为命名对象推送到数组中？
【发布时间】：2021-10-07 21:21:12
【问题描述】：

如何转换 imageCollection 中的数组以获取 carouselPhotos 中的数组？（见下面的代码）。

export default class HomeScreen extends Component {
  
state = {
      imageCollection: [
            {
            name: "Pictures of birds"
            image1: "http://127.0.0.1:8000/media/image1A.jpg", 
            image2: "http://127.0.0.1:8000/media/image2A.jpg",
            image3: "http://127.0.0.1:8000/media/image3A.jpg"}
],
      carouselPhotos: [
      {
        image: "http://127.0.0.1:8000/media/image1A.jpg", 
      },
      {
        image: "http://127.0.0.1:8000/media/image2A.jpg",
      },
      {
        image: "http://127.0.0.1:8000/media/image3A.jpg",
      },
    ],
  };

我正在使用 react-native-snap-carousel，它为每个对象呈现 1 张轮播卡片，因此每个图像必须是它自己的对象。 carouselPhotos 中的数据标记为“图像”也很重要，并且必须在页面打开时加载。

任何帮助将不胜感激！

说明： imageCollection 有很多对象，但我只会为 carouselPhoto 选择一个对象。图像属性名称 imageX 有 3 个，但也有“名称”等其他属性

【问题讨论】：

imageCollection 是否总是一个只有一个对象的数组？属性是否始终命名为 imageX？
imageCollection 有很多对象，但我只会为 carouselPhoto 选择一个对象。共有三个图像属性名称 imageX，但也有其他属性如“名称”

标签： javascript arrays reactjs react-native

【解决方案1】：

您可以简单地从 imageCollection 对象中检索值，然后将它们映射到所需的格式。

Object.values(state.imageCollection[0]).map(imgUrl => ({ image: imgUrl }));

编辑

由于imageCollection 数组中的对象包含应该被忽略的键，我们可以先将它们过滤掉，然后再映射到转换后的结果。我们使用Array.prototype.startsWith() 过滤掉不以字符串“image”开头的键。这意味着我们还需要从对象中收集键以及值，因此我们使用Object.entries()：

Object.entries(state.imageCollection[0]).filter(([key, val]) => key.startsWith("image")).map(([key, val]) => ({ image: val}));

试试看：

state = {
  imageCollection: [
    {
      name: "Pictures of birds",
      image1: "http://127.0.0.1:8000/media/image1A.jpg", 
      image2: "http://127.0.0.1:8000/media/image2A.jpg",
      image3: "http://127.0.0.1:8000/media/image3A.jpg"
    }
  ]
}

const result = Object.entries(state.imageCollection[0])
                .filter(
                  ([key, val]) => key.startsWith("image"))
                .map(
                  ([key, val]) => ({ image: val}));

console.log(result);

state.carouselPhotos = result;
console.log(state);

【讨论】：

谢谢！一个小问题：数组 imageCollection 包含其他属性（例如名称）。我已经修改了这个问题。但是，永远只有三张照片。
是否可以假设感兴趣的键看起来像“imageX”，其中 X 是任意数字（例如 3、07、25）？
是的，可以这样假设。我实际上是从数据库中提取数据，所以它的格式会完全一样。
在这种情况下，请参阅编辑。请让我知道这是否有效

【解决方案2】：

您可以在回调中使用reduce & 迭代当前对象并为每个图像创建一个新对象并将其推送到累加器数组中

const imageCollection = [{
  image1: "http://127.0.0.1:8000/media/image1A.jpg",
  image2: "http://127.0.0.1:8000/media/image2A.jpg",
  image3: "http://127.0.0.1:8000/media/image3A.jpg"
}]


const carouselData = imageCollection.reduce((acc, curr) => {
  for (let keys in curr) {
    acc.push({
      image: curr[keys]
    })
  }
  return acc;
}, []);

console.log(carouselData)

【讨论】：