详解ES6 export default 和 import语句中的解构赋值


Posted in Javascript onMay 28, 2019

解构赋值

有如下 config 对象

const config = {
 host: 'localhost',
 port: 80
}

要获取其中的 host 属性

let { host } = config

拆分成模块

以上两段代码,放到同一个文件当中不会有什么问题,但在一个项目中,config 对象多处会用到,现在把 config 对象放到 config.js 文件当中。

// config.js
export default {
 host: 'localhost',
 port: 80
}

在 app.js 中 import config.js

// app.js
import config from './config'

let { host } = config
console.log(host) // => localhost
console.log(config.host) // => localhost

上面这段代码也不会有问题。但在 import 语句当中解构赋值呢?

// app.js
import { host } from './config'

console.log(host) // => undefined

问题所在

import { host } from './config'

这句代码,语法上是没什么问题的,之前用 antd-init 创建的项目,在项目中使用下面的代码是没问题的。奇怪的是我在之后用 vue-cli 和 create-react-app 创建的项目中使用下面的代码都不能正确获取到 host。

// config.js
export default {
 host: 'localhost',
 port: 80
}

// app.js
import { host } from './config'
console.log(host) // => undefined

babel 对 export default 的处理

我用 Google 搜 'es6 import 解构失败',找到了下面的这篇文章:ES6的模块导入与变量解构的注意事项。原来经过 webpack 和 babel 的转换

在ES6中变量解构是这样的:

const a = { b: 1 }
const { b } = a

我们可以直接用解构赋值来获得对象的同名属性,等效于:

const b = a.b

除了变量的解构赋值,ES6的模块导入也提供了相似的语法:

import { resolve } from 'path'

如果使用webpack构建项目的话,注意这里的解构与普通变量的解构是有所区别的,比如在a.js里有以下代码:

export default {

 b: 1

}

如果按照普通变量的解构法则来导入这个包,即这种形式:

import { b } from './a'

是会发生错误的,并不能导出变量b。主要因为这和webpack的构建有关。使用模块导入时,当用webpack构建后,以上的

import { b } from './a'

变为了类似

a.default.b

可以看到变量b在a.default上,并不在a上,所以解构出来是undefined。如果要正确解构,则必须在模块内导出,即:

export const b = 1

这样的话,构建后的代码中,变量b即在a上,而不是在a.default上,从而能正确解构。

所以

export default {
 host: 'localhost',
 port: 80
}

变成了

module.exports.default = {
 host: 'localhost',
 port: 80
}

所以取不到 host 的值是正常的。那为什么 antd-init 建立的项目有可以获取到呢?

解决

再次 Google,搜到了GitHub上的讨论 。import 语句中的"解构赋值"并不是解构赋值,而是 named imports,语法上和解构赋值很像,但还是有所差别,比如下面的例子。

import { host as hostName } from './config' // 解构赋值中不能用 as

let obj = {
 a: {
 b: 'hello',
 }
}

let {a: {b}} = obj // import 语句中不能这样子写
console.log(b) // => helllo

这种写法本来是不正确的,但 babel 6之前可以允许这样子的写法,babel 6之后就不能了。

// a.js
import { foo, bar } from "./b"
// b.js
export default {
 foo: "foo",
 bar: "bar"
}

所以还是在import 语句中多加一行

import b from './b'
let { foo, bar } = b

或者

// a.js
import { foo, bar } from "./b"
// b.js
let foo = "foo"
let bar = "bar"
export { foo, bar }

或者

// a.js
import { foo, bar } from "./b"
// b.js
export let foo = "foo"
export let bar = "bar"

而 antd-init 使用了babel-plugin-add-module-exports,所以 export default 也没问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript:以前写的xmlhttp池,代码
May 18 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
js+css实现打字效果
Jun 24 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
jQuery实现高级检索功能
May 28 #jQuery
利用原生JS实现data方法示例代码
May 28 #Javascript
php结合js实现多条件组合查询
May 28 #Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 #Javascript
js 将线性数据转为树形的示例代码
May 28 #Javascript
React中使用外部样式的3种方式(小结)
May 28 #Javascript
vue实现多条件和模糊搜索功能
May 28 #Javascript
You might like
flash用php连接数据库的代码
2011/04/21 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
php轻松实现文件上传功能
2016/03/03 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
Three.JS实现三维场景
2018/12/30 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
小程序实现分类页
2019/07/12 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
使用cx_freeze把python打包exe示例
2014/01/24 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
网站设计师的岗位职责
2013/11/21 职场文书
党员培训思想汇报
2014/01/07 职场文书
企业军训感想
2014/02/07 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
工作评语大全
2014/04/26 职场文书
国庆节演讲稿
2014/05/27 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书