export / import 温故而知新 / 憋错料

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

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

/**
 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 }

.highlight { padding: 15px }
td.linenos { background-color: #f0f0f0; padding-right: 10px }
span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px }
pre { line-height: 125% }
.hll { background-color: #49483e }
.c { color: #75715e }
.err { color: #960050; background-color: #1e0010 }
.k { color: #66d9ef }
.l { color: #ae81ff }
.n { color: #f8f8f2 }
.o { color: #f92672 }
.p { color: #f8f8f2 }
.ch { color: #75715e }
.cm { color: #75715e }
.cp { color: #75715e }
.c1 { color: #75715e }
.cs { color: #75715e }
.gd { color: #f92672 }
.ge { font-style: italic }
.gi { color: #a6e22e }
.gs { font-weight: bold }
.gu { color: #75715e }
.kc { color: #66d9ef }
.kd { color: #66d9ef }
.kn { color: #f92672 }
.kp { color: #66d9ef }
.kr { color: #66d9ef }
.kt { color: #66d9ef }
.ld { color: #e6db74 }
.m { color: #ae81ff }
.s { color: #e6db74 }
.na { color: #a6e22e }
.nb { color: #f8f8f2 }
.nc { color: #a6e22e }
.no { color: #66d9ef }
.nd { color: #a6e22e }
.ni { color: #f8f8f2 }
.ne { color: #a6e22e }
.nf { color: #a6e22e }
.nl { color: #f8f8f2 }
.nn { color: #f8f8f2 }
.nx { color: #a6e22e }
.py { color: #f8f8f2 }
.nt { color: #f92672 }
.nv { color: #f8f8f2 }
.ow { color: #f92672 }
.w { color: #f8f8f2 }
.mb { color: #ae81ff }
.mf { color: #ae81ff }
.mh { color: #ae81ff }
.mi { color: #ae81ff }
.mo { color: #ae81ff }
.sb { color: #e6db74 }
.sc { color: #e6db74 }
.sd { color: #e6db74 }
.s2 { color: #e6db74 }
.se { color: #ae81ff }
.sh { color: #e6db74 }
.si { color: #e6db74 }
.sx { color: #e6db74 }
.sr { color: #e6db74 }
.s1 { color: #e6db74 }
.ss { color: #e6db74 }
.bp { color: #f8f8f2 }
.vc { color: #f8f8f2 }
.vg { color: #f8f8f2 }
.vi { color: #f8f8f2 }
.il { color: #ae81ff }

认知二：无论是 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] } }

td.linenos { background-color: #f0f0f0; padding-right: 10px }
span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px }
pre { line-height: 125% }
.hll { background-color: #49483e }
.c { color: #75715e }
.err { color: #960050; background-color: #1e0010 }
.k { color: #66d9ef }
.l { color: #ae81ff }
.n { color: #f8f8f2 }
.o { color: #f92672 }
.p { color: #f8f8f2 }
.ch { color: #75715e }
.cm { color: #75715e }
.cp { color: #75715e }
.c1 { color: #75715e }
.cs { color: #75715e }
.gd { color: #f92672 }
.ge { font-style: italic }
.gi { color: #a6e22e }
.gs { font-weight: bold }
.gu { color: #75715e }
.kc { color: #66d9ef }
.kd { color: #66d9ef }
.kn { color: #f92672 }
.kp { color: #66d9ef }
.kr { color: #66d9ef }
.kt { color: #66d9ef }
.ld { color: #e6db74 }
.m { color: #ae81ff }
.s { color: #e6db74 }
.na { color: #a6e22e }
.nb { color: #f8f8f2 }
.nc { color: #a6e22e }
.no { color: #66d9ef }
.nd { color: #a6e22e }
.ni { color: #f8f8f2 }
.ne { color: #a6e22e }
.nf { color: #a6e22e }
.nl { color: #f8f8f2 }
.nn { color: #f8f8f2 }
.nx { color: #a6e22e }
.py { color: #f8f8f2 }
.nt { color: #f92672 }
.nv { color: #f8f8f2 }
.ow { color: #f92672 }
.w { color: #f8f8f2 }
.mb { color: #ae81ff }
.mf { color: #ae81ff }
.mh { color: #ae81ff }
.mi { color: #ae81ff }
.mo { color: #ae81ff }
.sb { color: #e6db74 }
.sc { color: #e6db74 }
.sd { color: #e6db74 }
.s2 { color: #e6db74 }
.se { color: #ae81ff }
.sh { color: #e6db74 }
.si { color: #e6db74 }
.sx { color: #e6db74 }
.sr { color: #e6db74 }
.s1 { color: #e6db74 }
.ss { color: #e6db74 }
.bp { color: #f8f8f2 }
.vc { color: #f8f8f2 }
.vg { color: #f8f8f2 }
.vi { color: #f8f8f2 }
.il { color: #ae81ff }
td.linenos { background-color: #f0f0f0; padding-right: 10px }
span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px }
pre { line-height: 125% }
.hll { background-color: #49483e }
.c { color: #75715e }
.err { color: #960050; background-color: #1e0010 }
.k { color: #66d9ef }
.l { color: #ae81ff }
.n { color: #f8f8f2 }
.o { color: #f92672 }
.p { color: #f8f8f2 }
.ch { color: #75715e }
.cm { color: #75715e }
.cp { color: #75715e }
.c1 { color: #75715e }
.cs { color: #75715e }
.gd { color: #f92672 }
.ge { font-style: italic }
.gi { color: #a6e22e }
.gs { font-weight: bold }
.gu { color: #75715e }
.kc { color: #66d9ef }
.kd { color: #66d9ef }
.kn { color: #f92672 }
.kp { color: #66d9ef }
.kr { color: #66d9ef }
.kt { color: #66d9ef }
.ld { color: #e6db74 }
.m { color: #ae81ff }
.s { color: #e6db74 }
.na { color: #a6e22e }
.nb { color: #f8f8f2 }
.nc { color: #a6e22e }
.no { color: #66d9ef }
.nd { color: #a6e22e }
.ni { color: #f8f8f2 }
.ne { color: #a6e22e }
.nf { color: #a6e22e }
.nl { color: #f8f8f2 }
.nn { color: #f8f8f2 }
.nx { color: #a6e22e }
.py { color: #f8f8f2 }
.nt { color: #f92672 }
.nv { color: #f8f8f2 }
.ow { color: #f92672 }
.w { color: #f8f8f2 }
.mb { color: #ae81ff }
.mf { color: #ae81ff }
.mh { color: #ae81ff }
.mi { color: #ae81ff }
.mo { color: #ae81ff }
.sb { color: #e6db74 }
.sc { color: #e6db74 }
.sd { color: #e6db74 }
.s2 { color: #e6db74 }
.se { color: #ae81ff }
.sh { color: #e6db74 }
.si { color: #e6db74 }
.sx { color: #e6db74 }
.sr { color: #e6db74 }
.s1 { color: #e6db74 }
.ss { color: #e6db74 }
.bp { color: #f8f8f2 }
.vc { color: #f8f8f2 }
.vg { color: #f8f8f2 }
.vi { color: #f8f8f2 }
.il { color: #ae81ff }

而神奇的是，如果使用 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]

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

时间： 2024-10-12 07:37:44

export / import 温故而知新

export / import 温故而知新的相关文章

程序间数据共享与传递：EXPORT/IMPORT、SAP/ABAP Memory

（转）关于ES6的模块功能 Module 中export import的用法和注意之处

PL/SQL developer export/import (转)

docker export import后，导入镜像，启动时的错误，Error response from daemon: No command specified

Use Drush to Export/Import a Drupal MySQL Database Dump File

使用export/import导出和导入docker容器

export,import和export default的区别

docker save/load、export/import 区别

export,import, es6 export, es6 import