合并JS中的两个对象并根据单个输入选择多个值

Question

问题：

我希望将两个对象合并在一起，并根据整数输入选择多个值。更具体地说，我希望基于整数输入为<img>元素分配图像源和alt。

代码：

JS对象#1

const sources = {
  1: "assets/images/newyorktimes.png",
  2: "assets/images/cnn.png",
  3: "assets/images/bbc.png",
  4: "assets/images/washingtonpost.png"
};

JS对象#2

const sourcenames = {
  1: "New York Times",
  2: "CNN",
  3: "BBC",
  4: "Washington Post"
};

输入值：

我从一个参数中获得输入值，我用以下方式解构该参数：

const { 
  fictionsource: fictionSrc,  // INPUT HERE (e.g., 1)
  content: contentSrc         // CONTENT HERE
} = stimulus;

我以下列方式分配内容：

const newsContent = node.querySelector(".js-news-content");
newsContent.innerHTML = contentSrc;

现在，我希望根据输入值分配图像源和alt文本.例如，如果值为1，那么我希望发生以下情况：

const newsImage = node.querySelector(".js-news-image img");
// Assign assets/images/newyorktimes.png to src-attribute
// Assign New York Times to alt-attribute

期望输出：

推荐的方法是结合这两个对象，并根据输入值分配图像源和alt文本。

Answer 1

你需要这样的东西：

// In principle is better to have 
// empty objects.
const sources = Object.assign(Object.create(null),{
  1: "assets/images/newyorktimes.png",
  2: "assets/images/cnn.png",
  3: "assets/images/bbc.png",
  4: "assets/images/washingtonpost.png"
});

const sourcenames = Object.assign(Object.create(null),{
  1: "New York Times",
  2: "CNN",
  3: "BBC",
  4: "Washington Post"
});

// Here we hardcode 
// the case when fictionsource 
// is equal to 1. 
const stimulus = {
  fictionsource: 1,
  content: "<div>test</div>"
}

const { 
  fictionsource: fictionSrc,  // INPUT HERE (e.g., 1)
  content: contentSrc         // CONTENT HERE
} = stimulus;


const newsImage = node.querySelector(".js-news-image img");

if (newsImage && typeof sources[fictionSrc] !== 'undefined' && typeof sourcenames[fictionSrc] !== undefined) {
   newsImage.setAttribute("src", sources[fictionSrc]);
   newsImage.setAttribute("alt", sourcenames[fictionSrc]);
} else {
    throw new Error("Incorrect data");
}

这就是如何将对象“合并”在一起的方法：

const sources = {
  1: "assets/images/newyorktimes.png",
  2: "assets/images/cnn.png",
  3: "assets/images/bbc.png",
  4: "assets/images/washingtonpost.png"
};

const sourcenames = {
  1: "New York Times",
  2: "CNN",
  3: "BBC",
  4: "Washington Post"
};

const result = {}

Object.keys(sources).forEach((x) => {
    result[sources[x]] = sourcenames[x];
});

console.log(result);

还有一个更好的主意：

const sources = {
  1: "assets/images/newyorktimes.png",
  2: "assets/images/cnn.png",
  3: "assets/images/bbc.png",
  4: "assets/images/washingtonpost.png"
};

const sourcenames = {
  1: "New York Times",
  2: "CNN",
  3: "BBC",
  4: "Washington Post"
};

const result = Object.keys(sources).reduce((acc, value) => {
    acc[sources[value]] = sourcenames[value];
    return acc;
},Object.create(null));

console.log(result);

如果您希望保留索引并让嵌套对象检查此示例：

const sources = Object.assign(Object.create(null), {
    1: "assets/images/newyorktimes.png",
    2: "assets/images/cnn.png",
    3: "assets/images/bbc.png",
    4: "assets/images/washingtonpost.png"
});

const sourcenames = Object.assign(Object.create(null),{
    1: "New York Times",
    2: "CNN",
    3: "BBC",
    4: "Washington Post"
});

const result = Object.keys(sources).
filter((key) => typeof sourcenames[key] !== 'undefined').
reduce((acc, value) => {
    acc[value] = Object.assign(Object.create(null), {
        source: sources[value],
        sourcename: sourcenames[value]
    });
    return acc;
},Object.create(null));

console.log(result);

编辑:如果您使用数组而不是对象，则缺点是对元素的访问速度有点慢。您需要在数组中搜索相应的元素。这是在没有数组索引的情况下使用的。

Answer 2

您可以像这样循环遍历对象：

let source = null
for(var key in sources){
     if ( value == key ) // value is the number you are looking for
           sources = sources.key
}
newsImage.src = source

但是，如果您的对象是数组，那么您可以直接访问它：

sources = ["assets/images/newyorktimes.png", "assets/images/cnn.png", "assets/images/bbc.png", "assets/images/washingtonpost.png" ]
newsImage.src = sources[value]

希望能帮上忙！