類實例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是一個「應用編程接口」，你可以通過它的名字猜測，它是一個接口和打字稿，你可以使用接口定義。