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

Question

问题:

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

代码:

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;

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

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

期望的输出:

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

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);

编辑:如果你使用数组而不是对象，缺点是访问速度有点慢到元素。您将需要在数组中搜索相应的元素。如果您没有数组索引，这是为了以防万一。