共计 3230 个字符,预计需要花费 9 分钟才能阅读完成。
小编明天在用 Vue 做我的项目的时候,发现组件中有 import 和 export, 刚好明天看到相干的语法介绍和一些实例,上面小编就和大家一起提高。对于模块化标准,在 es6 呈现之前,有以下三种标准,别离是 Common.js(Node.js)、AMD(require.js)、CMD(sea.js)。大家还能够关注我的微信公众号,蜗牛全栈。
一、根本用法
// module.js
export const a = 9
export const b = "abc"
export const sum = (x,y) => x+y
const obj = {name:"lilei"}
export {obj} // 导出对象的时候须要增加花括号
// index.js
import {a,b,sum,obj} from "./module.js" // 必须保障引入的名和 export 名称完全一致
console.log(a,b) // 5 abc
console.log(sum(2,5)) // 7
console.log(obj) // {name:"lilei"}
二、import 别名
// module.js
export const a = 9
// index.js
import {a as aa} from "./module.js" // 通过 as 关键字重命名,在应用的时候,应用重命名后的名字即可
console.log(a) // undefind
console.log(aa) // 9
三、export default:只能 export default 一个数据,如果外面有多个数据,能够通过对象实现。
// module.js
// export defalut const a = 9 报错
const a = 9
const b = "abc"
export defalut a
// index.js
import a from "./module.js" // 导入默认导出的量,不须要用花括号
四、混合导出
// module.js
export const a = 5
export default b = "abc"
// index.js
import {a},b from "./module.js" // 导入不同模式导出的数据
五、导出多个内容
// module.js
class People{constructor(name){this.name = name}
showName(){console.log("我的名字是:"+this.name)
}
}
const a = 9
const b = "abc"
const sum = (x,y) => x+y
const obj = {name:"lilei"}
export {a,b,sum,obj,People}
// index.js
import {a,b,sum,obj,People} from "./module.js"
let p = People("lilei")
p.showName() // 我的名字:lilei
// module.js
class People{constructor(name){this.name = name}
showName(){console.log("我的名字是:"+this.name)
}
}
const a = 9
const b = "abc"
const sum = (x,y) => x+y
const obj = {name:"lilei"}
export default {a,b,sum,obj,People}
// index.js
import * 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 对象
正文完
发表至: javascript
2021-06-27