JavaScript - 导出硬编码数组与创建数组

Question

假设我有一个文件 data.js，其中包含一些数据的数组，这些数据将导入某处(例如 React 组件)。

示例 A:

const DATA = [
  {
    firstName: 'jim',
    lastName: 'beam',
    fullName: 'jim beam'
  },
  {
    firstName: 'jack',
    lastName: 'daniels',
    fullName: 'jack daniels'
  }
];

export default DATA;

好的，很酷。事实上，我们正在写出 fullName 属性，它可以通过组合 firstName 和 lastName 来收集。为了清楚起见，这是一个非常简单的例子，所以请耐心等待。我们也可以这样做:

示例 B:

const DATA = [
  { firstName: 'jim', lastName: 'beam' },
  { firstName: 'jack', lastName: 'daniels' }
];

export default DATA.map(person => ({
   ...person,
   fullName: `${person.firstName} ${person.lastName}`
});

哎呀，我们甚至可以做到这一点!

示例 C:

const DATA = ['jim beam', 'jack daniels'];

export default DATA.map(person => {
  const [firstName, lastName] = person.split(' ');
  return {
    firstName,
    lastName,
    fullName: person
  };
};

因此，假设您有一个庞大的数据列表，其中可以从一个初始值派生出多个值。我的问题是示例 B 和 C 与示例 A 中的所有内容硬编码有何不同？

如果您有数百个项目，示例 B 和 C 的开销可能会小得多，文件大小更小，并且可以减少潜在的拼写错误……但是，我们声明一个数组然后导出一个不同的数组，我认为这可能会导致性能下降？想法？

Answer 1

有一个在访问时评估 fullName 的 getter 的类怎么样？它提供更小的内存大小，并且没有性能问题，因为每个数据的 fullName 属性在导入和访问之前不会计算。

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    get fullName() {
        return `${this.firstName} ${this.lastName}`
    }
}

let a = new Person('Charles', 'Martel');
console.log(a.fullName)

// expected result: "Charles Martel"

然后您的数据可以声明如下。

const DATA = [
  new Person('jim', 'beam'),
  new Person('jack','daniels')
];