Khi nào tôi nên sử dụng dấu ngoặc nhọn để nhập ES6?

Điều này có vẻ là hiển nhiên, nhưng tôi thấy hơi bối rối khi sử dụng dấu ngoặc nhọn để nhập một mô-đun duy nhất trong ES6. Ví dụ, trong dự án React-Native mà tôi đang làm việc, tôi có tệp sau và nội dung của nó:

var initialState = {
    todo: {
        todos: [
            {id: 1, task: 'Finish Coding', completed: false},
            {id: 2, task: 'Do Laundry', completed: false},
            {id: 2, task: 'Shopping Groceries', completed: false},
        ]
    }
};

export default initialState;

Trong TodoReducer.js, tôi phải nhập nó mà không có dấu ngoặc nhọn:

import initialState from './todoInitialState';

Nếu tôi đặt initialStatetrong dấu ngoặc nhọn, tôi sẽ gặp lỗi sau cho dòng mã sau:

Không thể đọc tài sản cần làm của không xác định

export default function todos(state = initialState.todo, action) {
// ...
}

Lỗi tương tự cũng xảy ra với các thành phần của tôi với dấu ngoặc nhọn. Tôi đã tự hỏi khi nào tôi nên sử dụng dấu ngoặc nhọn cho một lần nhập, bởi vì rõ ràng, khi nhập nhiều thành phần / mô-đun, bạn phải đặt chúng trong dấu ngoặc nhọn, mà tôi biết.

Biên tập:

Các bài SO ở đây không trả lời câu hỏi của tôi, thay vào đó tôi đang hỏi khi tôi nên hay không nên sử dụng dấu ngoặc nhọn nhập khẩu một đơn mô-đun, hoặc tôi không bao giờ nên sử dụng dấu ngoặc nhọn nhập khẩu một mô-đun duy nhất trong ES6 (đây là rõ ràng không phải là trường hợp, như tôi đã thấy nhập khẩu duy nhất với dấu ngoặc nhọn yêu cầu)

Đây là một nhập khẩu mặc định :

// B.js
import A from './A'

Nó chỉ hoạt động nếu Acó xuất mặc định :

// A.js
export default 42

Trong trường hợp này, bạn không gán tên gì cho tên đó khi nhập:

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

Bởi vì nó sẽ luôn luôn quyết tâm bất cứ điều gì là xuất khẩu mặc định của A.

Đây là một nhập khẩu có tên làA :

import { A } from './A'

Nó chỉ hoạt động nếu Acó chứa một tên xuất khẩu được gọi làA :

export const A = 42

Trong trường hợp này, tên quan trọng vì bạn đang nhập một thứ cụ thể theo tên xuất của nó :

// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!

Để thực hiện những công việc này, bạn sẽ thêm một xuất khẩu có tên tương ứng vào A:

// A.js
export const A = 42
export const myA = 43
export const Something = 44

Một mô-đun chỉ có thể có một xuất mặc định , nhưng xuất nhiều tên như bạn muốn (không, một, hai hoặc nhiều). Bạn có thể nhập tất cả chúng lại với nhau:

// B.js
import A, { myA, Something } from './A'

Ở đây, chúng ta nhập xuất khẩu mặc định là A, và được đặt tên xuất khẩu được gọi myAvà Something, tương ứng.

// A.js
export default 42
export const myA = 43
export const Something = 44

Chúng tôi cũng có thể gán cho chúng tất cả các tên khác nhau khi nhập:

// B.js
import X, { myA as myX, Something as XSomething } from './A'

Xuất khẩu mặc định có xu hướng được sử dụng cho bất cứ điều gì bạn thường mong đợi nhận được từ mô-đun. Xuất khẩu có tên có xu hướng được sử dụng cho các tiện ích có thể tiện dụng, nhưng không phải lúc nào cũng cần thiết. Tuy nhiên, tùy thuộc vào bạn chọn cách xuất các thứ: ví dụ: một mô-đun có thể không có xuất mặc định nào cả.

Đây là một hướng dẫn tuyệt vời cho các mô-đun ES, giải thích sự khác biệt giữa xuất khẩu mặc định và được đặt tên.

Tôi muốn nói rằng cũng có một ký hiệu được đánh dấu sao cho importtừ khóa ES6 đáng được đề cập.

Nếu bạn cố gắng để đăng nhập bảng điều khiển Mix:

import * as Mix from "./A";
console.log(Mix);

Bạn sẽ nhận được:

Khi nào tôi nên sử dụng dấu ngoặc nhọn để nhập ES6?

Dấu ngoặc là vàng khi bạn chỉ cần các thành phần cụ thể từ mô-đun, điều này tạo ra dấu chân nhỏ hơn cho các gói như webpack.

Dan Abramov trả lời ở trên giải thích về xuất khẩu mặc định và xuất khẩu được đặt tên .

Dùng loại nào?

Trích dẫn David Herman : ECMAScript 6 ủng hộ kiểu xuất đơn / mặc định và đưa ra cú pháp ngọt ngào nhất để nhập mặc định. Nhập khẩu xuất khẩu có tên có thể và thậm chí nên ít súc tích hơn.

Tuy nhiên, trong TypeScript có tên export được ưa chuộng vì tái cấu trúc. Ví dụ, nếu bạn mặc định xuất một lớp và đổi tên nó, tên lớp sẽ chỉ thay đổi trong tệp đó chứ không thay đổi trong các tham chiếu khác, với tên lớp xuất khẩu được đặt tên sẽ được đổi tên trong tất cả các tham chiếu. Xuất khẩu được đặt tên cũng được ưa thích cho các tiện ích.

Tổng thể sử dụng bất cứ điều gì bạn thích.

Bổ sung

Xuất mặc định thực sự là xuất có tên với mặc định tên, vì vậy xuất mặc định có thể được nhập dưới dạng:

import {default as Sample} from '../Sample.js';

Nếu bạn nghĩ importnhư chỉ là cú pháp đường cho các mô-đun nút, đối tượng và phá hủy, tôi thấy nó khá trực quan.

// bar.js
module = {};

module.exports = { 
  functionA: () => {},
  functionB: ()=> {}
};

 // really all that is is this:
 var module = { 
   exports: {
      functionA, functionB
   }
  };

// then, over in foo.js

// the whole exported object: 
var fump = require('./bar.js'); //= { functionA, functionB }
// or
import fump from './bar' // same thing, object functionA and functionB props


// just one prop of the object
var fump = require('./bar.js').functionA;

// same as this, right?
var fump = { functionA, functionB }.functionA;

// and if we use es6 destructuring: 
var { functionA } =  { functionA, functionB };
// we get same result

// so, in import syntax:
import { functionA } from './bar';

Để hiểu được việc sử dụng dấu ngoặc nhọn trong các importcâu lệnh, trước tiên, bạn phải hiểu khái niệm phá hủy được giới thiệu trong ES6

1. Phá hủy đối tượng

   var bodyBuilder = {
     firstname: 'Kai',
     lastname: 'Greene',
     nickname: 'The Predator'
   };
   
   var {firstname, lastname} = bodyBuilder;
   console.log(firstname, lastname); //Kai Greene
   
   firstname = 'Morgan';
   lastname = 'Aste';
   
   console.log(firstname, lastname); // Morgan Aste

2. Phá hủy mảng

   var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];
   
   console.log(firstGame); // Gran Turismo

   Sử dụng kết hợp danh sách

     var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
     console.log(secondGame); // Burnout

   Sử dụng toán tử trải

   var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
   console.log(firstGame);// Gran Turismo
   console.log(rest);// ['Burnout', 'GTA'];

Bây giờ chúng tôi đã giải quyết được điều đó, trong ES6, bạn có thể xuất nhiều mô-đun. Sau đó, bạn có thể sử dụng phá hủy đối tượng như dưới đây

Giả sử bạn có một mô-đun gọi là module.js

    export const printFirstname(firstname) => console.log(firstname);
    export const printLastname(lastname) => console.log(lastname);

Bạn muốn nhập các hàm đã xuất vào index.js;

    import {printFirstname, printLastname} from './module.js'

    printFirstname('Taylor');
    printLastname('Swift');

Bạn cũng có thể sử dụng các tên biến khác nhau như vậy

    import {printFirstname as pFname, printLastname as pLname} from './module.js'

    pFname('Taylor');
    pLanme('Swift');

Các ES6mô-đun tóm tắt :

xuất khẩu:

Bạn có 2 loại hàng xuất khẩu:

1. Xuất khẩu có tên
2. Xuất mặc định, Tối đa 1 cho mỗi mô-đun

Cú pháp:

// Module A
export const importantData_1 = 1;
export const importantData_2 = 2;
export default function foo () {}

Nhập khẩu:

Các loại hình xuất khẩu (tức là tên hoặc xuất khẩu mặc định) ảnh hưởng như thế nào đến một cái gì đó nhập khẩu:

1. Để xuất khẩu có tên, chúng ta phải sử dụng dấu ngoặc nhọn và tên chính xác làm khai báo (nghĩa là biến, hàm hoặc lớp) đã được xuất.
2. Để xuất mặc định chúng ta có thể chọn tên.

Cú pháp:

// Module B, imports from module A which is located in the same directory

import { importantData_1 , importantData_2  } from './A';  // for our named imports

// syntax single named import: 
// import { importantData_1 } 

// for our default export (foo), the name choice is arbitrary
import ourFunction from './A';   

Điều quan tâm:

1. Sử dụng danh sách được phân tách bằng dấu phẩy trong dấu ngoặc nhọn với tên phù hợp của bản xuất để xuất tên.
2. Sử dụng tên bạn chọn mà không có dấu ngoặc nhọn để xuất mặc định.

Bí danh:

Bất cứ khi nào bạn muốn đổi tên một nhập khẩu có tên, điều này có thể thông qua các bí danh . Cú pháp cho điều này là như sau:

import { importantData_1 as myData } from './A';

Bây giờ chúng tôi đã nhập importantData_1 nhưng định danh là myDatathay vì importantData_1.

thông thường khi bạn xuất một hàm bạn cần sử dụng {}

if you have export const x 

bạn sử dụng import {x} from ''

if you use export default const x 

bạn cần sử dụng import X from '' ở đây bạn có thể thay đổi X thành bất kỳ biến nào bạn muốn

Các dấu ngoặc nhọn ({}) được sử dụng để nhập các ràng buộc có tên và khái niệm đằng sau nó là hủy gán

Có thể tìm thấy một minh họa đơn giản về cách hoạt động của câu lệnh nhập với một ví dụ trong câu trả lời của riêng tôi cho câu hỏi tương tự tại Khi nào chúng ta sử dụng '{}' trong nhập javascript?

Các dấu ngoặc nhọn chỉ được sử dụng để nhập khi xuất khẩu được đặt tên. Nếu xuất là mặc định thì dấu ngoặc nhọn không được sử dụng để nhập.

Để xuất mặc định, chúng tôi không sử dụng {} khi chúng tôi nhập.

ví dụ

player.js

export default vx;

index.js

import vx from './player';

index.js

player.js

Nếu chúng ta muốn nhập mọi thứ mà chúng ta xuất thì chúng ta sử dụng *