Javascript 如何重写冗余的方法声明并创建一个较短的方法声明？

我已经声明了相同的常量值（某种程度上）。这是我到目前为止所拥有的

import React from 'react'

function Component_a() {
   const x = 5;
   const y = 10;
   const image_a = [...Array(x)].map((e, i) =>
       <div className="image" key={i}>
           <img src="img/image.png" alt="" />
       </div>
   )
   const image_b = [...Array(y)].map((e, i) =>
       <div className="image" key={i}>
           <img src="img/image.png" alt="" />
       </div>
   )
   return (
      {/*some more codes*/}
   )
}

export default Component_a

从“React”导入React
功能组件_a（）{
常数x=5；
常数y=10；
常量图像a=[…数组（x）].map（（e，i）=>
)
常量图像b=[…数组（y）].map（（e，i）=>
)
返回(
{/*还有一些代码*/}
)
}
导出默认组件

---

这看起来有点烦人，尤其是当我添加更多像这样的冗余行时。感谢您的帮助。

因为看起来唯一需要更改的是数组的长度，所以只需从数组中创建一个函数，然后调用该函数两次（或根据需要调用任意次数）：

const makeImages=length=>Array.from(
{length}，
（u，i）=>(
)
);
功能组件_a（）{
常数x=5；
常数y=10；
常量图像_a=生成图像（x）；
const image_b=生成图像（y）；
返回(
{/*还有一些代码*/}
)
}

一种方法是这样做，将两个数组合并在一个数组中并循环通过它们

const [image_a,image_b] = [[...Array(x)],[...Array(y)]].map((v, i) =>
        v.map((e,i)=>
       <div className="image" key={i}>
           <img src="img/image.png" alt="" />
       </div>
     )
 )

---

将映射函数另存为变量，以便可以重用。只需创建一个以数组长度为参数的函数即可。谢谢，但我可以问一下（u，I）中的下划线是什么意思吗？它只是一个变量名，下划线通常用于表示不使用变量

const [image_a,image_b] = [[...Array(x)],[...Array(y)]].map((v, i) =>
        v.map((e,i)=>
       <div className="image" key={i}>
           <img src="img/image.png" alt="" />
       </div>
     )
 )

let getHtml = (arr) => arr.map((e,i)) =>
                     <div className="image" key={i}>
                        <img src="img/image.png" alt="" />
                     </div>

   let image_a = getHtml(array1)