javascript - 如何迭代两个数组并产生唯一的 y 坐标
问题描述
上下文:在 Sketch 中,我正在编写一个插件来在画布上呈现文本,显示文本的垂直列表及其字体大小 + 粗细组合。
[ 使用 JavaSCript [
问题:我无法弄清楚如何以编程方式正确增加每一层的 Y 位置。
假设我有两个数组:
const fontWeights = ['normal', 'bold'];
const fontSizes = ['small', 'medium', 'large'];
我想生成每个 fontWeight + fontSize 组合的垂直列表,所以它看起来像这样:
smallNormal
smallBold
mediumNormal
mediumBold
largeNormal
largeBold
(或以图形方式,见图片)
function renderLayers() {
return fontWeights.map((weight, weightsIndex) =>
fontSizes.map((size, sizeIndex) =>
return (
<TextLayer
fontSize={size}
fontWeight={weight}
yPos={ (weightsIndex + sizeIndex) * 100 }
/>
}
这有点工作,除了有以下情况:
0 + 0 * 100 = 0
0 + 1 * 100 = 100
1 + 0 * 100 = 100 // <-- that should be 200
我真正想做的就是将每次迭代偏移一个固定的量。我确信有一些逻辑/数学方法可以做到这一点,但我被卡住了。
帮助将非常感谢!
解决方案
您可以只保留一个外部变量来存储 yPos:
function renderLayers() {
let y = 0;
return fontWeights.map((weight) =>
fontSizes.map((size) => {
y = y + 100;
return <TextLayer fontSize={size} fontWeight={weight} yPos={y} />;
})
);
}
地图索引可能不是最适合这项工作的,因为它在 0 和数组长度 - 1 之间交替,所以它真的不是你想要的。您需要地图外部的一些变量来存储两个迭代组合的“计数”。
我添加了一个新行,但您也可以这样做:
return <TextLayer fontSize={size} fontWeight={weight} yPos={y += 100} />;
推荐阅读
- python - Python 服务器的问题
- swift - Swift / SwiftNIO / Vapor:EventLoop 中的 wait() 或类似的,相当于 JavaScript 的 Promise.all()
- web-scraping - kimurai gem - 适用于开发,而不是生产 - 错误:参数数量错误(给定 2,预期 1;必需关键字:url)
- javascript - 尝试在 React 中导入导出的接口,但 React 找不到
- android - 如何验证图像视图?
- amazon-web-services - 使用 socket.io 时 Websocket 连接失败
- javascript - 如何更新 Chart js 中的标签?
- javascript - 如何获取 URL 参数,将其作为参数添加到 webhook,然后让 webhook 返回将重定向用户的链接?
- python - 当我想让我的精灵角色发射子弹时,我收到一条属性错误消息。我究竟做错了什么?
- java - java可以用循环创建多个哈希集吗