Cách sử dụng export và import trong ES6

Xuất nhập trong ES5

Xuất biến đơn lẻ

// Xuất hằng số
export const greeting = "Chào mừng";

Import biến đơn lẻ

import { message } from "./assets/js/exporttest";
console.log("message", message);

Xuất biến và hàm

export const message = "Xin chào";
export const displayMessage = function (text) {
  console.log(text);
};

Import biến và hàm cần dùng {}

import { message, displayMessage } from "./assets/js/exporttest";
console.log("message", message);
console.log("displayMessage", displayMessage("Chào thế giới"));
// Xuất hàm
export const displayMessage = function (text) {
  console.log(text);
};

Xuất mặc định

const response = "Haha";
export default {
  response,
};

Import mặc định

import test from "./assets/js/exporttest";
console.log("test", test.response);

Xuất kết hợp (mặc định + tên)

export const message = "Xin chào";
export const displayMessage = function (text) {
  console.log(text);
};

export default {
  response: "Thế giới",
};

Import kết hợp (mặc định trước, tên sau)

import response, { message, displayMessage } from "./assets/js/exporttest";
console.log("message", message);
console.log("displayMessage", displayMessage("Chào thế giới"));
console.log("response", response.response);

Import toàn bộ và đổi tên (mặc định dùng từ khóa default)

import * as test1 from "./assets/js/exporttest";
console.log("message", test1.message);
test1.displayMessage("Chào thế giới");
console.log("response", test1.default.response);

Khi xuất kết hợp, import như sau: import test1 from "./assets/js/exporttest"; chỉ lấy được xuất mặc định, các xuất tên sẽ không truy cập được

import test1 from "./assets/js/exporttest";

console.log("message", test1);
test1.displayMessage("Chào thế giới");
console.log("response", test1.default.response);
export const message = "Xin chào";
export const status = "Tốt";
// Xuất biến
export const greeting = "Chào mừng";
// Xuất hàm
export const displayMessage = function (text) {
  console.log(text);
};
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
export const XiaoMing = new Person("Minh", 12);
const response = "Haha";
export default {
  response,
};

Import kết hợp test

import displayMessage, { message, XiaoMing } from "./assets/js/exporttest";
console.log("displayMessage", displayMessage.response);
console.log("message", message);
console.log("XiaoMing", XiaoMing.name);

Import kết hợp với cách đặt tên (phải dùng default)

import * as test1 from "./assets/js/exporttest";
console.log("response", test1.default.response);
console.log("status", test1.default.status);
console.log("message", test1.message);
console.log("XiaoMing", test1.XiaoMing.name);

Thẻ: es6 module js import export

Đăng vào ngày 5 tháng 7 lúc 04:34