­

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<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對象
Tags:

VirMach 便宜 VPS

QNews

QNews