时间戳

首页 > 解决方案 > JavaScript - 导出一个硬编码的数组与创建一个

javascript - JavaScript - 导出一个硬编码的数组与创建一个

问题描述

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

示例 A：

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

export default DATA;

嗯不错。问题是，我们正在写出fullName属性，它可以通过组合firstNameand来收集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的开销可能会小得多，文件大小会更小，并且可以减少潜在的拼写错误……但是，我们声明一个数组，然后导出一个不同的数组，我认为这可能有性能下降？想法？

标签： javascriptecmascript-6

解决方案

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')
];

推荐阅读