类实例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看来，如果你让编译器知道什么对象是，它会表现更好。这个例子是与一个数组，但我觉得对于对象也是如此。 EG：

// 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是一个“应用编程接口”，你可以通过它的名字猜测，它是一个接口和打字稿，你可以使用接口定义。