Javascript 如何在阵列中有效地存储数据？

我有这段代码，我想知道是否有更好的方法来存储这个数组的第一个值（类名）？否则此代码将重复

import React from 'react';
import NavigationItem from '../navigation-item';

const className = 'mr-3';
const clN = className;

const navigationBarElements = [
  { className: clN, link: '/restaurants', name: 'ListRestaurant' },
  { className: clN, link: '/map', name: 'Map' },
  { className: clN, link: '/about', name: 'About' },
  { className: clN, link: '/contact', name: 'Contact' },
  { className: clN, link: '/login', name: 'Login' },
  { className: clN, link: '/registration', name: 'Registration' },
];

const navigationBarData = navigationBarElements.map((e) => (
  <NavigationItem
    clName={e.className}
    link={e.link}
    name={e.name}
  />
));

export default navigationBarData;

从“React”导入React；
从“../navigation item”导入NavigationItem；
const className='mr-3'；
const clN=className；
常量导航元素=[
{className:clN，链接：'/restaurants'，名称：'ListRestaurant'}，
{className:clN，link:'/map'，name:'map'}，
{className:clN，链接：'/about'，name:'about'}，
{className:clN，链接：'/contact'，名称：'contact'}，
{className:clN，链接：'/login'，name:'login'}，
{className:clN，链接：'/registration'，name:'registration'}，
];
const navigationBarData=navigationBarElements.map（（e）=>(
));
导出默认导航数据；

如果所有navbar元素使用相同的类，为什么不使用常量

className

import React from 'react';
import NavigationItem from '../navigation-item';

const className = 'mr-3';

const navigationBarElements = [
  { link: '/restaurants', name: 'ListRestaurant' },
  { link: '/map', name: 'Map' },
  { link: '/about', name: 'About' },
  { link: '/contact', name: 'Contact' },
  { link: '/login', name: 'Login' },
  { link: '/registration', name: 'Registration' },
];

const navigationBarData = navigationBarElements.map((e) => (
  <NavigationItem
    clName={className}
    link={e.link}
    name={e.name}
  />
));

export default navigationBarData;

---

你能解释一下你想去掉什么样的复制品吗？如果

类名

不会更改，您只需跳过将其添加到数组中，并将其直接分配给

clName

谢谢！但是如果我们需要另一个值呢？如果您需要一个不同的值，那么对每个元素重复一次类名没有什么错——毕竟您有多个元素。如果你真的想学究气，你可以编写一个名为

createMr3NavbarElement

的函数，它将链接和名称作为参数。

import React from 'react';
import NavigationItem from '../navigation-item';

const mr3ClassName = 'mr-3';

var createMr3NavigationBarElement = (link, name) => {className: mr3ClassName, link, name}

const navigationBarElements = [
  createMr3NavigationBarElement('/restaurants', 'ListRestaurant') // repeat for others
];

const navigationBarData = navigationBarElements.map((e) => (
  <NavigationItem
    clName={e.className}
    link={e.link}
    name={e.name}
  />
));

export default navigationBarData;