import和export的问题

// test.js
const num = 20
const arr = [1,2,3,4]
const obj = { name:'zs', age:'20', }
const foo = ()=>{
  const a = 0;
  const b = 20;
  return a+b
}
console.log('test文件log')
/**
 * 没有default
 */
export const bar = () =>{
  console.log('bar')
}
export const str = '开水寻觅秋天'

/***
 * default导出：
 */
export default {
  num,
  arr,
  obj,
  foo,
}

// index.js
/******** 三种import的区别：**********/
// https://www.jianshu.com/p/b7db6224a4aa
// https://www.jianshu.com/p/6bfcfdab9156
import testA from './test' // 只包含：export default的内容，是一个对象
import * as testB from './test' // 包含： export default和直接export的内容，是一个Module
import testC, { bar, str } from './test' // testC:default内容； {}: 直接export的内容

const app = document.getElementById('root')
app.innerHTML = 'app开始'

console.log('testA:', testA)
/*** testA:是一个对象,eg:
 * arr: (4) [1, 2, 3, 4]
 * foo: () => { const a = 0; const b = 20; return a + b; }
 * num: 20
 * obj: {name: 'zs', age: '20'}
 */
console.log('testB:', testB)
/*** testB打印：是一个Module,结构如下：
 * bar: () => { console.log('bar'); }
 * default: arr: (4) [1, 2, 3, 4]
 *   foo: () => { const a = 0; const b = 20; return a + b; }
 *   num: 20
 *   obj: {name: 'zs', age: '20'}
 * str: '开水寻觅秋天'
 */
console.log('testC:', testC) // 是一个对象，testA === testC
console.log('是否全等', testA === testC) // true

console.log('bar:', bar) //
/*** bar打印：
 * bar: () => {
    console.log('bar');
  }
 */
console.log('str:', str) // str: 开水寻觅秋天