如何從 Object 導出數據？

Question

我正在嘗試將名為 CoffeeTree 的 object 從名為 Coffee_Tree.js 的文件導出到名為 coffee.js 的 js 文件中，這樣我就可以從 object 中獲取數據。 但是，我不斷得到這個：

未捕獲的 ReferenceError：咖啡未在 Coffee_Tree.js:2 中定義

這是我到目前為止的代碼，我仍然是一個 js 初學者，但我不知道該怎么辦我將 html 類型更改為模塊，但這沒有用。 到目前為止，這是我的代碼：

Coffee_Tree.js

export default coffeeTree = {
    refill: () => {
        coffee.isEmpty = false;
        console.log('refilled');
    },
    drink: () => {
        coffee.isEmpty = true;
        console.log('chug');
    },
    isEmpty: true,
}

coffee.js

import coffeeTree from './Coffee_Tree.js';

console.log(coffeeTree);

再次在控制台中，我不斷收到此錯誤：

Uncaught ReferenceError: coffee is not defined
    at Coffee_Tree.js:2

Answer 1

你需要

(1) 使用正確的變量名（ coffeeTree或coffee - 選擇一個，不要同時使用）

(2) 默認導出的表達式不會作為標識符放入當前的 scope 中。 您當前正在隱式創建一個全局變量並在草率模式下運行。 擁有模塊系統的主要目的之一是盡可能避免使用全局變量。 改用命名導出，以便 object 可以在其方法中引用自身，而無需分配給全局 object：

export const coffee = {
    refill: () => {
        coffee.isEmpty = false;
        console.log('refilled');
    },
    drink: () => {
        coffee.isEmpty = true;
        console.log('chug');
    },
    isEmpty: true,
};

import { coffee } from './Coffee_Tree.js';
console.log(coffee);

（如果可能的話，我也強烈建議使用嚴格模式 - 如果您閱讀錯誤消息並嘗試調試它們，它將幫助您避免此類錯誤）