小编明天在用Vue做我的项目的时候，发现组件中有import和export,刚好明天看到相干的语法介绍和一些实例，上面小编就和大家一起提高。对于模块化标准，在es6呈现之前，有以下三种标准，别离是Common.js(Node.js)、AMD(require.js)、CMD(sea.js)。大家还能够关注我的微信公众号，蜗牛全栈。
一、根本用法
// module.jsexport const a = 9export const b = "abc"export const sum = (x,y) => x+yconst obj = { name:"lilei"}export {obj} // 导出对象的时候须要增加花括号// index.jsimport {a,b,sum,obj} from "./module.js" // 必须保障引入的名和export名称完全一致console.log(a,b) // 5 abcconsole.log(sum(2,5)) // 7console.log(obj) // {name:"lilei"}二、import 别名
// module.jsexport const a = 9// index.jsimport { a as aa } from "./module.js" // 通过as关键字重命名，在应用的时候，应用重命名后的名字即可console.log(a) // undefindconsole.log(aa) // 9三、export default：只能export default一个数据，如果外面有多个数据，能够通过对象实现。
// module.js// export defalut const a = 9 报错const a = 9const b = "abc"export defalut a// index.jsimport a from "./module.js" // 导入默认导出的量，不须要用花括号四、混合导出
// module.jsexport const a = 5export default b = "abc"// index.jsimport {a},b from "./module.js" // 导入不同模式导出的数据五、导出多个内容
// module.jsclass People{ constructor(name){ this.name = name } showName(){ console.log("我的名字是："+this.name) }}const a = 9const b = "abc"const sum = (x,y) => x+yconst obj = { name:"lilei"}export { a,b,sum,obj,People}// index.jsimport {a,b,sum,obj,People} from "./module.js"let p = People("lilei")p.showName() // 我的名字：lilei// module.jsclass People{ constructor(name){ this.name = name } showName(){ console.log("我的名字是："+this.name) }}const a = 9const b = "abc"const sum = (x,y) => x+yconst obj = { name:"lilei"}export default { a,b,sum,obj,People}// index.jsimport * as aa from "./module.js"console.log(aa.default.a) // 9六、创立Interator
function makeInterator(arr){ let nextIndex = 0; return { next(){ return nextIndex<arr.length? { value:arr[nextIndex++], done:false }:{ value:undefined, done:true } } }}let it = makeInterator(['a','b','c'])it.next() // {value:"a",done:false}it.next() // {value:"b",done:false}it.next() // {value:"c",done:false}it.next() // {value:undefind,done:true}七、解决不可遍历对象能够应用for...of...函数。个人感觉相似python中的魔法函数
let course = { allCourse:{ science:["math","physics","chemistry"], arts:["geography","history"] }}// for...of...// for(let c of course){// console.log(c) // 报错：course is not iterable// }let arr = ["a","b","c"]console.log(arr) // Symbol(Symbol.iterator) prototype中含有这个属性的，是可遍历的let it = arr[Symbol.iterator]() // 固定语法console.log(it.next()) // {value:"a",done:false}console.log(it.next()) // {value:"b",done:false}console.log(it.next()) // {value:"c",done:false}console.log(it.next()) // {value:undefind,done:true}八、通过解决Symbol.iterator属性来遍历。
let courses = { allCourse:{ science:["math","physics","chemistry"], arts:["geography","history"] }}courses[Symbol.iterator] = function(){ let allCourse = this.allCourse let keys = Reflect.ownKeys(allCourse) let values = [] return { next(){ if(!values.length){ if(keys.length){ values = allCourse[keys[0]] keys.shift() } } return { done: !values.length, value: values.shift() } } }}for(let c of courses){ console.log(c) // math physics chemistry geography history}九、应用generator
let courses = { allCourse:{ science:["math","physics","chemistry"], arts:["geography","history"] }}courses[Symbol.iterator] = function* (){ let allCourse = this.allCourse let keys = Reflect.ownKeys(allCourse) let values = [] while(1){ if(!values.length){ if(keys.length){ values = allCourse[key[0]] keys.shift() yield values.shift() }else{ return false } }else{ yield values.shift() } }}for(let c of courses){ console.log(c) // math physics chemistry geography history}十、原生具备Interator接口的数据结构，通过for...of...间接遍历
- Array
- Map
- Set
- String
- TypedArray
- 函数的arguments对象
- NodeList对象