码迷,mamicode.com
首页 > 其他好文 > 详细

export / import 温故而知新

时间:2019-01-12 10:32:22      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:require   state   需要   说明   def   结合   const   font   console   

认知一: 导出的对象被修改,依然会影响原来的对象。

仔细想想这是理所当然的事(说明导出的依然是对象指向内存的地址,所以通常还需要结合深拷贝使用)

/**
 export const state = {
 	select: 0
 }

 export const logstate = () => {
 	console.log(‘what the fuck?‘, state)
 }
 */
import { state, logstate } from ‘./lib‘
state.select =  110
console.log(‘fuckyou‘, state) // fuckyou { select: 110 }
logstate()  // what the fuck? { select: 110 }

 

认知二:无论是 let 还是 const ,导出的变量都无法修改

/**
export let val = 0
 */
import { val } from ‘./lib‘
val = 110 // 报错: "val" is read-only

 

 

认知三: import 无法解构 export default {...} 导出的对象,哪怕他真的是导出一个对象!

我们知道,如果我们用常规的 require 导入 export default {...},其实还有一层 default 的:

/**
const state = {
	select: 0
}

const logstate = () => {
	console.log(‘what the fuck?‘, state)
}

export default {
	state,
	logstate
}
 */
const what = require(‘./lib‘);
console.log(what); // { default: { state: { select: 0 }, logstate: [Function: logstate] } }

 

而神奇的是,如果使用 Import 就会自动将这一层多余的default移出:

import what  from ‘./lib‘
console.log(20190111214203, what) // { state: { select: 110 }, logstate: [Function: logstate] }

 

但尽管如此,我们依然无法使用解构:

import what  from ‘./lib‘
import { state, logstate }  from ‘./lib‘
console.log(state, logstate) // undefined undefined

 

如果实在想使用解构,只能用最初的require方法了,但要记得加上 .default 哦:

const { state, logstate }  = require(‘./lib‘).default
console.log(state, logstate) // { select: 0 } [Function: logstate]

 

 

export / import 温故而知新

标签:require   state   需要   说明   def   结合   const   font   console   

原文地址:https://www.cnblogs.com/CyLee/p/10258565.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!