根据数组键比较然后输出值

Question

我很难弄明白。

背景：

我正在通过 graphQL 为不同的屏幕输出各种尺寸的图像，然后映射它们：

const variantSizes = variants.map(el => ({
          320: el.node.defaultImage.url_320,
          640: el.node.defaultImage.url_640,
          768: el.node.defaultImage.url_768,
          1280: el.node.defaultImage.url_1280,
          1920: el.node.defaultImage.url_1920,
          2560: el.node.defaultImage.url_2560
        }));

输出我这个：

然后我设置不同的屏幕尺寸并检查容器宽度，并根据最接近的值输出应该显示的值：

        const imageContainer = document.querySelector("#splide-slide01");
        const containerWidth = imageContainer.offsetWidth;

        const counts = [320, 640, 768, 960, 1280, 1920, 2560];
        const goal = containerWidth;

        const output = counts.reduce((prev, curr) => Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev);

现在是我挣扎的部分。

我正在尝试比较这两个，所以数组键和 const 输出 如果它们匹配，那么如果 VariantSizes[ 的键名=46=]匹配，它应该输出那个键的值。

但我不知道如何获取值的名称，而不是这些映射的 VariantSizes 的值本身，然后将其与 output的屏幕大小，然后输出匹配的值。

基本上我想要达到的目标是：

屏幕尺寸接近 640px 的用户访问网站，它将根据 const reduce 将其与 640px 值匹配，然后该值将与 640 来自 const variantSizes 的名称，它将从 variantSizes 输出 640 的值。

该值基本上是该特定尺寸的图像 URL，然后我会将其放入主图像的 src 中。

感谢您的帮助！

Answer 1

不完全清楚你想要实现什么，抱歉。不过我会尽力帮忙的。

变体大小看起来像一个数组，但您的控制台输出显示的是对象。所以有两种方法可以解决这个问题。

如果你有一个对象，你可以去：

const resultImage = variantSizes[output]

如果您有一个对象数组并且需要获取字符串数组，您可以这样做：

const resultImages = variantSizes.map(variant => variant[output])

根据数组键比较然后输出值

Compare and then output value based on array key

javascript

es6-modules