es6 学习笔记

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了es6 学习笔记相关的知识,希望对你有一定的参考价值。

环境搭建和简单实践

怎么es6还要环境搭建呢?我用的还是javascript吗?然而不是这么一回事。
es6在语法上有很多的变化,算是脱胎换骨了,但是因为浏览器还没有完全支持es6的新语法,所以使用es6开发,就应该先将其转化为es5,那么就需要工具来完成,

babel

Babel是一个编译器,负责将源代码转换成指定的语法的目标代码,可以使之很好的在运行环境中执行我们的代码。
安装babel的命令行工具:

//一般要先在当前项目生成一个package.json;然后将babel-cli安装在本地 ,它只是一个开发依赖。另外不同的项目依赖库的版本可能都不同,全局的babel-cli库也不能保证兼容各个项目中其他依赖库的版本。

$ npm install -D babel-cli;

安装转码规则包,Babel支持很多语法的转码,可以选择集成的。

babel-preset-env 是一个新的 preset,可以根据配置的目标运行环境(environment)自动启用需要的 babel 插件,babel-preset-env 的工作方式类似 babel-preset-latest,唯一不同的就是 babel-preset-env 会根据配置的 env 只编译那些还不支持的特性。

$ npm install -D babel-preset-env

然后编译,

//编译某个具体的js文件
$ babel index.js --out-file index-compile.js
//编译目录中所有的js文件并另存到指定目录
$ babel src --out-dir lib / $ babel src -d lib

每次都这样做,太繁琐了?试用一下这条命令。在package.json文件中的script中添加:

"build": "babel src -d lib"

它可以实现简单的编译的功能,不过这不是最好的解决方案,

因为Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码

为了能够完全转换es6的内容,需要安装babel-polyfill插件

1.先引入webpack,这里只是因为babel-polyfill可以在Node/Browserify/webpack中使用

//全局安装,在配置完成后,可以直接通过webpack运行,
$ npm install -g webpack
//一般会装在本地项目中,就不能直接使用webpack需要找node_module中的webpack的位置。
$ npm install -D webpack

2.安装babel-polyfill插件,babel-cli,babel-preset-env

$ npm install -save-dev babel-polyfill babel-cli babel-preset-env

3.在需要的文件中引入babel-polyfill:

import "babel-polyfill";
//node.js中引入:require(‘babel-polyfill‘);


4.配置webpack.config.js文件,将[‘babel-polyfill‘, ‘./src/index.js‘] 写到entry属性中。如下

const path = require(‘path‘);

module.exports = {
  entry: [‘babel-polyfill‘, ‘./src/index.js‘],
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  },
  output: {
    filename: ‘bundle.js‘,
    path: path.resolve(__dirname, ‘dist‘)
  }
};

  

5.配置.babelrc文件

{
    "persets": ["env"];
}

  

6.启动webpack


$ webpack

promise

promise是什么?(来自sf.gg的promise百科)

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了 Promise 对象。

所谓 Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。

promise方法:

1.构造函数

Promise(
    function(resolve, reject) {
    }
);

  

2.实例,构造函数用于生成Promise对象

let promise = new Promise(function(resolve, reject) { });

3.then方法

let promise = function() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {resolve()})
  })
}

promise()
.then(function() {
  //成功的事
  return new Promise(function(resolve, reject) {
    //异步请求
    setTimeout(function() {reslove()})
  })
})
.catch(() => {
  //错误处理
})
.then(function() {
  //成功的事
  return new Promise(function(resolve, reject) {
    //异步请求
    setTimeout(function() {reslove()})
  })
})
.catch(() => {
  //错误处理
})
.then(function() {

})

  

 

Promise链式调用的原因?

因为Promise.prototype.then方法和Promise.prototype.catch方法都返回Promise对象。所以可以链式调用

Promise对象的其他用法。

1.Promise.all()
将多个Promise实例,包装成一个新的Promise实例

let promise = Promise.all([promiseOne,promiseTwo]);

而且,只有当promiseOne 和 promiseTwo 都成功的时候,promise才会成功

2.Promise.race()

该方法同样是将多个Promise实例,包装成一个新的Promise实例。只不过在这种情况下,只要其中一个被成功调用,promise 就会被成功调用。

继续研究参考:https://segmentfault.com/a/1190000011742644

 

axios

基于http客户端的promise,面向浏览器和nodejs

安装:
使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

引入axios.js

在bowe_components中引入axios.js

axios请求

axios.get(‘http://h6.duchengjiu.top/shop/api_goods.php‘)
    .then(response => {
    console.log(response.data);
});

  

generator & yield

1.生成器函数(Generator Function)

//声明式
function* gene() {
    //...
}


//定义式
const gene = function*() {
    //...
}


2.yield

yield的作用与return相似,但是yield不会退出函数体,而是切出当前函数的运行时(此处为一个类协程,Semi-coroutine),并与此同时可以讲一个值(可以是任何类型)带到主线程中。

继续理解:生成器(Generator) 

3.使用方法:
构建生成器函数

function* genFn() {
    let a = 2
    yield a
    while (true) {
        yield a = a / (2 * a + 1)
    }
}

执行generator函数

generator函数不能直接作为函数来使用,执行generator函数会返回一个生成器对象,将用于运行生成器内容和接受其中的值。

const gen = genFn()

运行生成器内容

for (const a of gen) {
    if (a < 1/100) break
    console.log(a)
}


迭代器

1.for-in
都知道for-in循环用来遍历对象,但是细心的你也会发现,for-in无法控制遍历的顺序,它永远都是从第一个到最后一个。

2.for-of
for-of是es6的新语法,它用来配合迭代器,迭代对象,我们可以控制迭代顺序,

3.Symbol.iterator
对象被迭代的条件是它需要有一个Symbol.iterator属性,他是一个独一无二的属性,暂不详细介绍。

4.迭代器长啥样?

iterator[Symbol.iterator] = function () {
    return {
    next: function () {}
    }
}

//iterator[Symbol.iterator]() 它会返回一个类似于{next: function() {}}对象,原型是Array Iterator

let iterator = iterator[Symbol.iterator]();

//iterator.next(),会返回一个类似于{value: …, done: [true/false]}的对象,

iterator.next();

  

 

那么next()内部大概是这样的:

table[Symbol.iterator] = function () {
    var keys = Object.keys(this).sort();
    var index = 0;
    return {
        next: function () {
            return {
                value: keys[index], done: index++ >= keys.length
            };
        }
    }
}

  

 

针对对象,自己写一个迭代器

{
    let obj={
    start:[1,3,2],
    end:[7,9,8],
    [Symbol.iterator](){
        let self=this;
        let index=0;
        let arr=self.start.concat(self.end);
        let len=arr.length;
        return {
            next(){
                if(index<len){
                    return {
                        value:arr[index++],
                        done:false
                    }
                } else {
                    return {
                        value:arr[index++],
                        done:true
                    }
                }
            }
        }
    }
    // 遍历迭代器
    let iterator = obj[Symbol.iterator]();
    console.log(iterator);
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
}         

5.惰性执行:

如果next()函数永远不被调用的话,我们就浪费了性能。所以让我们来优化它:

table[Symbol.iterator] = function () {
  var _this = this;
  var keys = null;
  var index = 0;

  return {
    next: function () {
      if (keys === null) {
        keys = Object.keys(_this).sort();
      }

      return {
        value: keys[index], done: index++ >= keys.length
      };
    }
  }
}

6.内置迭代器

String,Array,TypedArray,Map和Set都是内置迭代器,因为它们的原型中都有一个Symbol.iterator方法

7.Generator函数

function* iterator(arr) {
    for(let item of arr) {
        yield item;
    }
}
let iter = iterator([1,2,3,5,6,7]);
for(let k of iter) {
    console.log(k);
}

这两种都可以用来迭代,iter是一个迭代器,像上面我们分析的那样,
它内部会返回 {next: function() { } }, for-of也是同样。

//iter.next();
//for(let k of iter) {}

8.iterables

iterable是一个概念,表示有Symbol.iterator属性的object,
这个属性指向一个generator函数,调用这个函数,会返回一个关于这个对象的iterator,
在ES6中所有的集合类对象(array, set, maps)和字符串都是iterable,并且有自己默认的iterator,
所以在使用for-of迭代的时候,每次都是利用了对象上的iterator,调用next(),

9.向迭代器中传递参数

function* createIterator() {
    let first = yield 1;
    let second = yield first + 2;
    yield second + 3;
}

let i= createItreator()

i.next() // {value:1 done: false}
i.next(5) // {value: 7 done: false}
i.next(3) // {value: 6 done: false}e}

 

10.应用实例

function run(taskDef) {
    let task = taskDef();
    let value = task.next()

    function step() {
        if (!value.done) {
            value = task.next(value.value)
            step()
        }
    }
    step()
}

run(function*(){
    let first = yield 1;
    let second = yield first + 3;
    yield second + 4;
})

11.应用实例2

 

以上是关于es6 学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

学习笔记:python3,代码片段(2017)

es6学习笔记1

学习笔记ES6标准入门

JavaScript学习笔记 -- ES6学习 let 和const

Es6学习笔记

ES6学习笔记九:修饰器