类实例 VS 接口 VS 泛型对象 - 性能

Question

我正在创建模拟数据，以便我可以编写前端代码。

这些数据可以是类实例或接口，只是普通的旧 javascript 对象。就我个人而言，我宁愿将其作为 javascript 对象，因为我不喜欢样板代码。

我需要决定是否对模拟数据和真实数据使用类或接口或通用 javascript 对象。

哪个性能更好？

这是我目前正在决定是否应该只是一个 javascript 对象的类的示例：

类：

export class Result {
  id: number;
  brand: string;
  name: string;
  description: string;
  image: string;
  rating: number;
  categories: string[];
  averagePrice: number;
  amount: string;
  reviews: Review[];
}

模拟数据：

import { Result } from './result';
export const RESULTS: Result[] = [
  { id: 11, 
    name: 'dairy free parmesan alternative original', 
    brand: "Angel Foods", 
    image: "result-images/dairy_free_parmesan_alternative_original.jpg",
    rating: 4.3,
    categories: ["dairy"],
    averagePrice: 6.60
  },
  { id: 12, 
    name: 'dairy free mozzarella alternative', 
    brand: "Angel Foods", 
    image: "result-images/dairy_free_mozzarella_alternative.jpg",
    rating: 3.9,
    categories: ["dairy"],
    averagePrice: 3.70
  },
  { id: 13, 
    name: 'dairy free tasty cheese sauce', 
    brand: "Angel Foods", 
    image: "result-images/dairy_free_tasty_cheese_sauce.jpg",
    rating: 3.7,
    categories: ["dairy", "condiment"],
    averagePrice: 5.50
  },
  { id: 14, 
    name: 'dairy free mild cheese mix', 
    brand: "Angel Foods", 
    image: "result-images/dairy_free_mild_cheese_mix.jpg",
    rating: 4.4,
    categories: ["dairy", "TV dinner"],
    averagePrice: 4.86,
    amount: "400g"
  },
  { id: 15, 
    name: 'sugar free dark chocolate salted caramel', 
    brand: "alpro", 
    image: "result-images/sugar_free_dark_chocolate_salted_caramel.png",
    rating: 4.2,
    categories: ["dessert", "Baking"],
    averagePrice: 4.32,
    amount: "400g"
  },
  { id: 16, 
    name: 'drink for professionals', 
    brand: "Alpro", 
    image: "result-images/alpro_drink_for_professional.jpg",
    rating: 2.1,
    categories: ["beverage"],
    averagePrice: 3.50,
    amount: "400g"
  },
  { id: 17, 
    name: 'custard', 
    brand: "alpro", 
    image: "result-images/alpro_custard.jpg",
    rating: 4.9,
    categories: ["dairy", "baking", "dessert"],
    averagePrice: 4.50,
    amount: "400g"
  },
  { id: 18, 
    name: 'coconut dessert', 
    brand: "alpro", 
    image: "result-images/alpro_coconut_dessert.jpg",
    rating: 3.1,
    categories: ["dairy", "baking", "dessert"],
    averagePrice: 6.50,
    amount: "400g"
  },
  { id: 19, 
    name: 'creamy caramel', 
    brand: "alpro", 
    image: "result-images/alpro_creamy_caramel.jpg",
    rating: 4.7,
    categories: ["dairy", "dessert"],
    averagePrice: 6.50,
    amount: "400g"
  },
  { id: 20, 
    name: 'dairy free sour cream alternative', 
    brand: "Angel Foods", 
    image: "result-images/dairy_free_sour_cream_alternative.jpg",
    rating: 4.5,
    categories: ["dairy", "condiment"],
    averagePrice: 4.8,
    amount: "400g"
  }
];

意思是我可以摆脱结果类并使其成为 JSON 对象，从长远来看，当我创建更少的类来保存可能是 JSON 或 javascript 对象的对象时，这会快得多。那么，摆脱类/接口并使用 JSON 对象是否会导致性能下降？

从reading a bit about performance 看来，如果你让编译器知道对象是什么，它的性能会更好。这个例子是一个数组，但我觉得它也适用于对象。例如：

// Here V8 can see that you want a 4-element array containing numbers:
var a = [1, 2, 3, 4];

// Don't do this:
a = []; // Here V8 knows nothing about the array
for(var i = 1; i <= 4; i++) {
     a.push(i);
}

我猜这是因为编译器不需要为内存中的对象留出大量可用空间，因为它知道接下来会发生什么。这意味着类实例比没有类的 javascript 对象更快。

Answer 1

如果您只想模拟服务器响应，我建议您使用接口而不是类。

export interface IResult {
  id: number;
  brand: string;
  name: string;
  description: string;
  image: string;
  rating: number;
  categories: string[];
  averagePrice: number;
  amount: string;
  reviews: Review[];
}

从'./interfaces/entities/result'导入{IResult}；

export const RESULTS: IResult [] = [
  { id: 11, 
    name: 'dairy free parmesan alternative original', 
    brand: "Angel Foods", 
    image: "result-images/dairy_free_parmesan_alternative_original.jpg",
    rating: 4.3,
    categories: ["dairy"],
    averagePrice: 6.60
  }
  // ...
];

HTTP API 是一个“应用程序编程接口”，您可以通过它的名称猜到，它是一个接口，在 TypeScript 中您可以使用接口来定义它。