ES6中的Module与Interator
小编今天在用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七、处理不可遍历对象可以使用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}【ES6中的Module与Interator】八、通过处理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对象
推荐阅读
- 热闹中的孤独
- JS中的各种宽高度定义及其应用
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷（Invasion篇）发售
- Android中的AES加密-下
- (二)ES6第一节变量(let|(二)ES6第一节变量(let,const)
- 六步搭建ES6语法环境
- 放下心中的偶像包袱吧
- C语言字符函数中的isalnum()和iscntrl()你都知道吗
- C语言浮点函数中的modf和fmod详解