Javascript 在 es6 中导出/导入 Json 对象

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/34741111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 16:48:15  来源:igfitidea点击:

Exporting/importing Json object in es6

javascriptjson

提问by sedo023

I am converting some ES5 code to ES6.

我正在将一些 ES5 代码转换为 ES6。

I have the following line somewhere in the file StatesComponent.js

我在文件中的某处有以下行 StatesComponent.js

const STATES = require('../data/states.js');

I am using jspm and it doesn't support require, so I would like to use ES6 importsyntax instead.

我正在使用 jspm 并且它不支持require,所以我想改用 ES6import语法。

The states.jsfile contains the following:

states.js文件包含以下内容:

exports.AU = [
    { value: 'australian-capital-territory', label: 'Australian Capital Territory', className: 'State-ACT' },
    { value: 'new-south-wales', label: 'New South Wales', className: 'State-NSW' },
    { value: 'victoria', label: 'Victoria', className: 'State-Vic' },

];

exports.US = [
    { value: 'AL', label: 'Alabama', disabled: true },
    { value: 'AK', label: 'Alaska' },
    { value: 'AS', label: 'American Samoa' },
];

STATESvariable is being used as var options = STATES[this.state.country];

STATES变量被用作 var options = STATES[this.state.country];

How do I change the format of the json in states.jssuch that I can `import' it?

如何更改 json 的格式states.js以便我可以“导入”它?

i.e import STATES from '../data/states'

IE import STATES from '../data/states'

回答by shriek

Not sure if you got the answer to this already but you can export it as:-

不确定您是否已经得到了答案,但您可以将其导出为:-

export default {
  STATES: {
    'AU' : {...},
    'US' : {...}
  }
};

to which you can import as:-

您可以导入为:-

import STATES from 'states';

or

或者

var STATES = {};
STATES.AU = {...};
STATES.US = {...};
export STATES;

to which you can import as:-

您可以导入为:-

import { STATES } from 'states';

Notice the difference between one that uses defaultand one that doesn't. With defaultyou can export any javascript expression and during import you can use whatever identifier and it will be defaulted to that defaultexpression. You could also have done

注意使用default和不使用的区别。随着default您可以导出任何JavaScript表达和导入过程中,你可以使用任何标识,它会被默认为是default表达。你也可以做到

import whatever from 'states';

and whateverwould get the value of an object that we assigned to default.

whatever会得到我们分配到默认对象的值。

In contrast, when you don't export defaultexpression, exportexports it as an part of object which is why you had to use

相反,当您不导出default表达式时,export将其作为对象的一部分导出,这就是您必须使用的原因

import {STATES}

In this case you HAVEto use the right literal name for import to work or else import will not be able to understand what you're trying to import. Also, note that it's using object destructuringto import the right value.

在这种情况下,你HAVE使用正确的文本名称为进口工作,否则导入将无法理解你想进口的东西。另外,请注意它object destructuring用于导入正确的值。

And like @AlexanderT said, there are ways to import as *too, in fact there are various ways to importand exportbut I hope I explained the core concept of how this import/exportworks.

就像@AlexanderT 所说的,也有导入的方法*,实际上导入导出的方法有很多种,但我希望我解释了其import/export工作原理的核心概念。