当前位置：主页 > javascript教程 > 详解ES6 export default 和 import语句中的解构赋值

ES6 export default 和 import语句中的解构赋值的实例解析

  • 更新时间：2020-06-14 06:46:17
  • 编辑：惠冷安
本站精选了一篇相关的编程文章，网友耿海露根据主题投稿了本篇教程内容，涉及到ES6、export、default、ES6、import语句解构赋值、详解ES6 export default 和 import语句中的解构赋值相关内容，已被901网友关注，下面的电子资料对本篇知识点有更加详尽的解释。

参考资料

正文内容

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

解构赋值

有如下 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 也没问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。

相关教程

  • 实例分析ES6新特性之变量和字符串使用方法

    这篇文章主要介绍了ES6新特性之变量和字符串用法,结合具体实例形式分析了ES6中变量与字符串的特性、使用方法与相关注意事项,需要的朋友可以参考下

    发布时间：2020-03-19

  • 深入理解ES6中的三种异步解决方式

    这篇文章主要介绍了详解ES6中的三种异步解决方案，详细的介绍了这三种方案的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2020-03-16

  • ES6小技巧整理

    ES6出来已经有好几年了，同时很多新特性可以被巧妙地运用在项目中。我想要列下其中一些，希望它们对你有用

    发布时间：2020-03-24

  • ES6中解构、参数、模块和记号用法介绍

    这篇文章主要介绍了ES6新特性之解构、参数、模块和记号用法,结合实例形式分析了解构、参数、模块和记号的功能、用法及相关使用注意事项,需要的朋友可以参考下

    发布时间：2019-11-04

  • ES6 Class中的super关键字知识点详解

    本文给大家收藏整理了ES6 Class 中的 super 关键字，非常不错，具有参考借鉴价值，需要的朋友参考下吧

    发布时间：2020-01-16

  • ES6中javascript实现函数绑定及类的事件绑定功能代码实例

    这篇文章主要介绍了ES6中javascript实现函数绑定及类的事件绑定功能,结合实例形式分析了ES6中函数绑定及类的事件绑定原理、实现方法、相关操作技巧与注意事项,需要的朋友可以参考下

    发布时间：2020-01-28

  • ES6 Promise对象then方法链式调用代码内容

    这篇文章主要介绍了详解ES6 Promise对象then方法链式调用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2020-01-23

  • ES6语法重构React组件代码知识点

    这篇文章主要介绍了利用ES6语法重构React组件的相关资料，文中通过示例代码介绍的很详细，对大家具有一定的参考借鉴价值，需要的朋友们下面来一起看看吧。

    发布时间：2020-01-02

  • 深入理解ES6

    深入理解ES6

    本书主要给已经熟悉JavaScript 和 ECMAScript 5 的人提供教程，特别针对的是那些想了解这门语言最新特性并在浏览器或 Node.js 里实现的中级或高级开发者

    大小：7.42 MBECMAScript6电子书

  • ES6标准入门

    ES6标准入门

    大小：183.9 MBES6电子书

  • JavaScript DOM编程艺术

    JavaScript DOM编程艺术

    非常畅销书全新升级，首版销售量确保。 书中详细说明开发Web运用的基石W3C的DOM标准，由提倡Web标准的大神领军人物执笔用心编写，表明了前端工程师的人生真谛，是学习培训JavaScript和DOM开发

    大小：109.2 MBJavaScript电子书

  • 趣学Javascript：教孩子学编程

    趣学Javascript：教孩子学编程

    《趣学JavaScript教孩子学编程》用轻松自在的方法，根据细心的、循规蹈矩的实例，及其填满快乐的图例，协助读者轻轻松松地学习培训编程基本知识。本书共16章，从基本知识刚开始，详解了实际操作字符串数组、数组及其循环系统，随后继续学习一些高級话题讨论，如应用jQuery搭建易用性，及其应用画板制图等。这书根据专家教授撰写一些简易有意思的游戏，协助读者把握JavaScript编程。每一章都搭建于上一章的基本之中，而且各章末尾的编程挑戰可以

    大小：42.7 MBJavascript电子书

  • JavaScript从入门到精通

    JavaScript从入门到精通

    本书是javascript高级程序的权威指南，从初学者角度出发，通过通俗易懂的语言、丰富多彩的实例，详细介绍了使用JavaScript语言进行程序开发应该掌握的各方面技术，是一本入门经典书籍

    大小：92.2 MBJavaScript电子书

  • JavaScript核心技术开发解密

    JavaScript核心技术开发解密

    这本书针对JavaScript 中的核心技术，结合前沿开发实践，全面的讲解与分析JavaScript 的内存、函数、执行上下文、面向对象、模块等重点知识

    大小：68.4 MBJavaScript电子书

  • 完美图解物联网IoT实操：ESP8266 Arduino，Cordova物联网移动App，JavaScript微控制器编程

    完美图解物联网IoT实操：ESP8266 Arduino，Cordova物联网移动App，JavaScript微控制器编程

    完美图解物联网技术系列》图书是当前物联网开发技术应用的集大成者。本书内容以Arduino和JavaScript为主线，开发物联网应用、手机App和操控微电脑

    大小：60.8 MB物联网电子书

  • HTML5+CSS3+JavaScript从入门到精通

    HTML5+CSS3+JavaScript从入门到精通

    本书以基础知识、示例、实战案例相结合的方式详尽讲述了HTML，CSS，JavaScript及目前最新的前端技术

    大小：186 MBweb开发电子书

  • JavaScript入门经典

    JavaScript入门经典

    本书是学习JavaScript编程的经典教程。全新的第6版涵盖了ECMAScript 6。 全书分为8个部分，共26章。首部分JavaScript基础，包括第1章到第4章，介绍了如何使用常用函数编写简单的脚本。第二部分J

    大小：56.2 MBJavaScript电子书

  • JavaScript高级程序设计

    JavaScript高级程序设计

    《 JavaScript高級编程设计(第3版) 》是JavaScript超級畅销书的*版。ECMAScript5和HTML5在规范之战中同时获胜，使很多特有保持和手机客户端拓展宣布进到标准，另外也为JavaScript增加了许多融入发展方

    大小：23 MBJS程序设计电子书

用户留言

发布评论

最新更新

热门推荐