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

  • 时间:
  • 4809人关注

这篇文章主要介绍了详解ES6 export default 和 import语句中的解构赋值,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,另外这篇文章主要知识点是关于ES6、export、default、ES6、import语句解构赋值、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:
  • 编辑整理:乌天华
  • 教程字数:2268字节
  • 阅读时间:大概8分钟
  • 下载本教程(DOC版)
  • MyFitnessPal Data Exporter by FOODFASTFIT
  • Strava, export gpx track
  • ES6标准入门
  • 深入理解ES6
  • JavaScript ES6函数式编程入门经典
  • 解构赋值

    有如下 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中变量与字符串的特性、使用方法与相关注意事项,需要的朋友可以参考下

      03-19ES6新特性之变量和字符串用法示例

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

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

      11-04ES6新特性之解构、参数、模块和记号用法示例

      阅读更多
    • ES6语法重构React组件代码知识点

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

      01-02利用ES6语法重构React组件详解

      阅读更多
    • 实例分析ES6中module模块化开发

      这篇文章主要介绍了ES6中module模块化开发,结合实例形式分析了ES6中模块化开发的相关功能、使用方法与相关注意事项,需要的朋友可以参考下

      02-09ES6中module模块化开发实例浅析

      阅读更多
    • ES6 Set与Map的数据结构实例详解

      这篇文章主要介绍了ES6新特性五之Set与Map的数据结构,结合实例形式分析了ES6中Set与Map的功能、定义、属性、结构与相关使用技巧,需要的朋友可以参考下

      02-03ES6新特性五:Set与Map的数据结构实例分析

      阅读更多
    • 深入理解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程序设计

      点击下载

    学习笔记

    28小时46分钟前回答

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

    本文实例讲述了ES6新特性之变量和字符串用法。分享给大家供大家参考,具体如下: 一、变量 1. LET 我们都习惯用var 来声明变量,现在还可以用let来声明变量,两者的主要区别是作用域:var声明的变量作用域为包围它的函数,而let声明的变量作用域仅在它所在的块中。(在ES5中是没有块的概念的)。 if(true){ let a=1;}console.log(a);//undifined 这样使代码更加干净,减少滞留的变量,再如我们经常用的数组遍历: for(let i=0;ilists.length;i++){ //do somthing with lists[i]}console.log(i)l//undifined 通常情况下,我们在同一作用域里使用变量J来完成另一个遍历,但是现在有了let,可以安全的再一次声明i变量,因为它只在被声明的块……

    1小时47分钟前回答

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

    前置知识准备 Generator 函数 执行会返回一个迭代器(Iterator), 在迭代器上可以调用 next() 方法, 执行下一个 yield 或 return 调用 next() 方法,会返回一个对象 {value: res, done: false} , value 的值 为 yield 之后表达式的值,done 的值 表示迭代器,是否已经执行完毕(最后一个yield 或 return ) next() 方法,可以传入一个值,做为前一个yield 表达式的返回值 有了这些知识,可以把Promise 对象 做一个的 yield 的值,配合一个执行器,来处理异步操作 方式一: Generator + Promise + 执行器 const fs = require(fs)// Promise 版的readFileconst readFile = function (fileName) { return new Promise(function(resolve, reject) { fs.readFile(fileName, function(err, data){ if (err) retu……

    38小时49分钟前回答

    ES6小技巧整理

    如果你还知道其他一些小技巧,欢迎留言~ 很高兴把它们补充进来。 1. 强制要求参数 ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函数被调用时没有传入这些参数。 在下面的例子中,我们写了一个required()函数作为参数a和b的默认值。这意味着如果a或b其中有一个参数没有在调用时传值,会默认required()函数,然后抛出错误。 const required = () = {throw new Error(Missing parameter)};const add = (a = required(), b = required()) = a + b;add(1, 2) //3add(1) // Error: Missing parameter. 2. 强大的reduce 数组的reduce方法用途很广。它一般被用来把数组中每一项规约到单个值。但是你可以利用它做更多的事。 2.1 使用reduce同时实现map和……

    22小时7分钟前回答

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

    本文实例讲述了ES6新特性之解构、参数、模块和记号用法。分享给大家供大家参考,具体如下: 一、解构 解构提供了一个方便的地从对象或数组中提取数据的方法,请看下面的例子: //ES6let [x,y]=[1,2];//x=1,y=2//ES5var arr=[1,2];var x=arr[0];var y=arr[1]; 使用这个语法,可以一次性给多个变量赋值。一个很好的附加用处是可以很简单的交换变量值: let x=1,y=2;[x,y]=[y,x];x=2 y=1 解构也可以用于对象,注意对象中必须存在的对应的键: let obj={x:1,y:2};let {x,y}=obj;//a=1,b=1 或者 let {x:a,y:b}=obj;//a=1,b=2 另一个有趣的模式是模拟多个返回值: function doSomething(){ return [1,2];}let [x.y]=doSomething();//x=1.y=2 解构可以用来为参数对象赋默认值。……

    33小时55分钟前回答

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

    以下只是个人的学习笔记: super这个关键字,既可以当作函数使用,也可以当作对象使用。在这两种情况下,它的用法完全不同。 1、当作函数使用 class A {}class B extends A { constructor() { super(); //ES6 要求,子类的构造函数必须执行一次super函数。 }} 注意,super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部的this指的是B,因此super()在这里相当于A.prototype.constructor.call(this)。 class A { constructor() { console.log(new.target.name); //new.target指向当前正在执行的函数 }}class B extends A { constructor() { super(); }}new A() // Anew B() // B 可以看到,在super()执行时,它指向的是子类B的构造函数,而不是父类A的构造函数。……

    6小时16分钟前回答

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

    本文实例讲述了ES6中javascript实现函数绑定及类的事件绑定功能的方法。分享给大家供大家参考,具体如下: 函数绑定 箭头函数可以绑定this对象,大大减少了显式绑定this对象的写法(call、apply、bind)。但是,箭头函数并不适用于所有场合,所以 ES7 提出了 函数绑定 ( function bind )运算符,用来取代call、apply、bind调用。虽然该语法还是 ES7 的一个提案,但是 Babel 转码器已经支持。 函数绑定运算符是并排的两个双冒号( :: ),双冒号左边是一个对象,右边是一个函数。该运算符会自动将左边的对象,作为上下文环境(即 this 对象),绑定到右边的函数上面。 foo::bar;// 等同于bar.bind(foo);foo::bar(...argumen……

    32小时4分钟前回答

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

    promise俗称链式调用,它是es6中最重要的特性之一 简单的说可以不停的then调用嵌套在调用(异步之后,链式调用方式执行回调),这种操作方式称为promise then()方法的作用是Promise实例添加解决(fulfillment)和拒绝(rejection)状态的回调函数。then()方法会返回一个新的Promise实例,所以then()方法后面可以继续跟另一个then()方法进行链式调用。 let p = new Promise((resolve, reject) = { setTimeout(resolve, 1000, success);});p.then( res = { console.log(res); return `${res} again`; }) .then( res = console.log(res) );// 连续// success// success again 但是前一个then()方法中的回调函数中又可能返回一个Promise实例,这时候后面一个then()方法中的回调函数会等前一……

    29小时41分钟前回答

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

    一、创建组件 ES6 class创建的组件语法更加简明,也更符合javascript。内部的方法不需要使用function关键字。 React.createClass import React from react;const MyComponent = React.createClass({ render: function() { return ( div以前的方式创建的组件/div ); }});export default MyComponent; React.Component(ES6) import React,{ Component } from react;class MyComponent extends Component { render() { return ( divES6方式创建的组件/div ); }}export default MyComponent; 二、属性 props propTypes and getDefaultProps . 使用 React.Component 创建组件,需要通过在constructor中调用 super() 将props传递给 React.Component 。另外react 0.13之后props必须是不可变的。 . 由于是用ES6 class语法创建组件,其内部只允许定义方法……