Когда мы используем '{ }' в импорте JavaScript?

Я изучаю импорт Javascript, и мне еще предстоит понять, когда мы используем фигурные скобки при импорте элементов (функций, объектов, переменных) из другого файла JS.

import Search from './models/Search';
import * as searchView from './views/searchView';
import { elements, renderLoader } from './views/base'
//elements is an object, renderLoader is a function
Источник

8 ответов

Решение
import { elements, renderLoader } from './views/base'

это способ импорта одного именованного экспорта из модуля, в этом случае он импортирует именованные экспорты elements а также renderLoader от base.js,

{ elements, renderLoader } во многих случаях синтаксис является просто синтаксическим сахаром (называемым деструктуризацией), добавленным в последние версии стандарта ECMAScript.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

В этом случае, однако, необходимо получить только названный экспорт, который вы хотите.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Обратите внимание, что вы также можете выбрать новые имена для ваших переменных, например:

import { elements as newNameForElements, renderLoader as newNameForRenderLoader } from './views/base'

который затем сделал бы elements экспорт доступен как newNameForElements и т.п.

Источник

Операторы импорта используются для импорта экспортированных привязок из другого модуля.

Фигурные скобки ({}) используются для импорта именованных привязок, и концепция, лежащая в основе этого, называется назначением деструктурирования. Концепция назначения деструктурирования - это процесс, который позволяет распаковать значения из массивов или объектов в отдельные переменные в импортированном модуле.

Фигурные скобки ({}) используются для импорта именованных привязок

Я хотел бы объяснить различные типы импорта в ES6 с помощью примера

Предположим, у нас есть модуль с именем Aninmals(Animals.js). Предположим, что модуль экспортирует привязку по умолчанию. Man и несколько других именованных привязок, таких как Cat, Dog так далее

/*
 Animal.js
*/
..
export Cat;
export Dog
export default Man

Импорт одного экспорта из модуля

Чтобы экспортировать один экспорт из другого модуля (скажем, Cat), мы можем написать его так

/*
 Anothermodule.js
*/
import {Cat} from "./Animals"

Аналогично для собаки

/*
 YetAnothermodule.js
*/
import {Dog} from "./Animals"

Импорт нескольких экспортов из модуля

Вы также можете импортировать несколько модулей следующим образом

/*
 Anothermodule.js
*/
import {Dog, Cat} from "./Animals"

Импортируйте экспорт с более удобным псевдонимом

/*
 Anothermodule.js
*/
import {Dog as Puppy}  from './Animals.js';

Переименовать несколько экспортов во время импорта

/*
 Anothermodule.js
*/
import {Dog as Puppy, Cat as Kitty}  from './Animals.js';

Но в случае импорта Man в другой модуль, так как это экспорт по умолчанию, вы можете написать его как

/*
 Anothermodule.js
*/
import Man  from './Animals.js';

Вы также можете смешать оба вышеупомянутых варианта, например

/*
 Anothermodule.js
*/
import Man, {Dog as Puppy, Cat as Kitty} from '/Animals.js';

Импортировать содержимое всего модуля

Если вы хотите импортировать все, что вы можете использовать

/*
 Anothermodule.js
*/
import * as Animals from './Animals.js';

Здесь доступ к экспорту означает использование имени модуля (в данном случае "Животные") в качестве пространства имен. Например, если вы хотите использовать Cat в этом случае, вы можете использовать его, как показано ниже

Animals.Cat

Вы можете прочитать больше информации об импорте здесь

Вы можете прочитать о разрушении здесь

Источник 
import Search from './models/Search';

Импортирует экспортированный элемент по умолчанию как Search,

import * as searchView from './views/searchView';

Импортирует все в searchView это было экспортировано.

import { elements, renderLoader } from './views/base'

Импортирует выбранное количество именованных экспортируемых элементов.

Источник

{} используется, когда вы хотите импортировать часть объекта. * As searchView импортирует все свойства и методы в файле searchView.

Предположим, что "./views/base" имеет 3 свойства: elements, renderLoader, AdditionalParam (при условии, что все три были экспортированы как именованные экспорты в файле)

При выполнении

import { elements, renderLoader } from './views/base'

вы импортируете только эти 2 конкретные свойства

Но когда вы делаете

import * as base from './views/base'

Вы импортируете все три свойства в объект с именем base

Источник

Возьмите следующий пример:

Файл, который нужно импортировать, скажем importFile.js:

var defaultExport, otherExport1, otherExport2, otherExport3;

export default defaultExport = () => {
    console.log("Default Export")
}

export otherExport1 = "Other non-default Export";

export otherExport2 = function() {
  console.log("Some more non-default Export");
};

export otherExport3 = { msg: "again non-default Export" };

Теперь в вашем основном файле JS, если вы сделаете следующее:

import something from './importedFile.js;

Здесь переменная something получит значение переменной / функции, которая была экспортирована по умолчанию в файле importFile.js, т.е. переменная defaultExport, Теперь, если вы делаете что-то вроде следующего:

import { otherExport1, otherExport2 } from './importedFile.js;

Это будет импортировать специально otherExport1 а также otherExport2 переменная и функция, а не defaultExport а также otherExport3,

Вы также можете сделать что-то вроде следующего, чтобы импортировать все переменные по их именам из importFile.js:

import { defaultExport, otherExport1, otherExport2, otherExport3 } from './importedFile.js';

Заключение:

  1. фигурные скобки используются для выбора переменных / функций / объектов (с использованием метода, называемого деструктуризацией объектов в ES6), которые необходимо импортировать без импорта всех других ненужных экспортируемых переменных / функций / объектов.
  2. Если вы не укажете фигурные скобки, он всегда будет импортировать только переменную / функцию / объект, которая была экспортирована по умолчанию, и ничего больше. Это импортировало бы неопределенное, если ничто не было экспортировано как экспорт по умолчанию.
Источник

Если что-то экспортируется по умолчанию, оно импортируется без фигурных скобок.

Если экспортируется несколько переменных, они импортируются с помощью фигурных скобок.

Например,

в somefunction.js

export default module;

import module from './somefunction.js';

в someOtherFunction.js

export func1;

export func2;

import { func1, func2 }  from './someOtherFunction.js'
Источник

Вы можете использовать фигурные скобки для неявного и выборочного импорта из другого модуля функций или объектов и так далее.

// import implicitly one function and one constant from example.js
import { a, b } from 'example'

example.js

// export a and b but kept c private to example.js
export const a => { ... }
export const b = "hello"
const c = "private, not visible to the outside"

Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

Источник

Вы можете экспортировать более 1 контента из одного модуля.

Например, в вашем коде:

import * as searchView from './views/searchView'; //1
import { elements, renderLoader } from './views/base' //2

В //1Вы импортируете все из './views/searchView';

В //2может быть больше контента от './views/base', но вы импортируете только elements and renderLoader

Для получения дополнительной информации: импорт MDN

Источник
Другие вопросы по тегам