第2章必会 ES6-7 语法特性与规范

2-1生成器函数

1.自定义迭代器

function myItrator(arr) {
    let index = 0
    return {
        next: () => {
            if (index < arr.length) {
                return { value: arr[index++], done: false }
            } else {
                return { done: true }
            }
        }
    }
}

const arr=['起床','刷牙','洗脸','吃饭']
let it=myItrator(arr)
 console.log(it.next().value)
 console.log(it.next().value)
 console.log(it.next().value)
 console.log(it.next().value)

2.使用generator 生成器函数

//  generator 生成器
function *myItrator(arr){
    for(let i=0;i<arr.length;i++){
        yield arr[i]  //遍历元素 用yield关键字处理元素
    }
}

const arr=['起床','刷牙','洗脸','吃饭']
let it=myItrator(arr)
 console.log(it.next().value)
 console.log(it.next().value)
 console.log(it.next().value)
 console.log(it.next().value)

下面通过co库来进一步了解generator 生成器

2-2 co 库执行 promise 和 generator function

image.png

2-4 异步函数 asyunc function 统一世界

const fs = require('fs')
// 第一阶段 回调函数
function  readFile(cb) {
    fs.readFile('./package.json',(err,data)=>{
        if(err) return cb(err)
        cb(null,data)
    })
}
 
readFile((err,data)=>{
    err||console.log(JSON.parse(data).name)
})

// 第二阶段promise 
function readFileAsyc(){
    return new Promise((resolve,reject)=>{
        fs.readFile('./package.json',(err,data)=>{
            if(err) reject(err)
            resolve(JSON.parse(data))
        }) 
    })
}

readFileAsyc().then(data=>{console.log(data.name)})

// 第三阶段 co + generator + promisify
const util=require('util')
const co=require('co')
co(function *(){
    let data = yield util.promisify(fs.readFile)('./package.json')
    console.log(JSON.parse(data).name)
})

// 第四节度 Async 统一世界
let _readFile = util.promisify(fs.readFile)

async function init(){
    let data = await _readFile('./package.json')
    console.log(JSON.parse(data).name)
}
init()

2-5 借助 babel 编译 import 与 export

//先全部加载fs然后 再拿到writeFile
//必须等到代码运行时加载  运行时加载
const { writeFile } = require('fs')

//所以我们希望能在编译的时候就能获取到这个方法 静态加载  铜鼓import实现

具体步骤如下：
1.npm i babel-cli babel-preset-env -D
2.新建.babelrc文件

{
    "presets":[
        [
            "env":{
                "targets":{
                    "node":"current"
                }
            }
        ]
    ]
}

3.在package.json中新建dev配置

"scripts": {
    "dev":"nodemon -w src --exec \"babel-node src --presets env",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

4.全局安装 nodemon
npm i nodemon -g

然后就可以用import和export了

image.png

2-6 生产环境使用 babel 支持 es6-7

1.新增build命令
"build":"rimraf dist && babel src -s -D -d dist --presets env",
(其中 rimraf dist 是指每次build的时候清空dist目录 npm i rimraf -D)
2.新增babel支持es6-7
npm install -S babel-plugin-transform-runtime babel-runtime --registry=https://registry.npm.taobao.org
3.在babelrc中配置

{
    "presets":[
        [
            "env":{
                "targets":{
                    "node":"current"
                }
            }
        ]
    ],
    "plugins":[
        [
            "transform-runtime",{
                "polyfill":false,
                "regenerator":true
            }
        ]
    ]
}

最后编辑于：2019.01.05 22:39:30

第2章 必会 ES6-7 语法特性与规范