es6基础知识

这两天在整理react知识点的时候,顺便对es6的基础知识也进行了一些整理,其实es6出来已经很久了,也不算是一个新的技术了,现在也已经很普及了,所以是时候将它掌握起来了。

一,es6是什么以及为什么要学习它

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
标准的制定者有计划,以后每年发布一次标准,使用年份作为标准的版本。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。也就是说,ES6就是ES2015,下一年应该会发布小幅修订的ES2016。
虽然现在的浏览器还不能支持es6,但是我们能通过babel语法转化器,将es6转化为能被大多数浏览器能够支持的es5。
流行的库基本都基于es6构建,React默认使用es6新语法开发,现在React16.0中

二,环境准备,使用react官方推荐的脚手架create-react-app

  • 1 安装nodejs
  • 2 npm install -g create-react-app 安装脚手架

    1
    npm install -g create-react-app
  • 3 create-react-app es6-demo 创建react项目

    1
    2
    cd Desktop // 进入桌面
    create-react-app es6-demo // 用脚手架生成es6-demo

三,es6里都有些什么

  • 块级作用域,字符串,函数
  • 对象扩展,解构
  • 类,模块化
    1,作用域:let与const
    定义变量使用let代替var,块级作用域
    Const定义不可修改的变量

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // let:块级作用域
    {
    var a1 = 'darrell1';
    let a2 = 'darrell2'
    }

    console.log(a1); // darrell1
    console.log(a2); // 'a2' is not defined

    // const:基本类型
    const a3 = 'darrell3'
    a3 = 'darrell4'
    console.log(a3); // "a3" is read-only

    const a = []; // 如果是引用类型的话,往里面添加值是没问题的,但是改变指向后则会报错
    a.push('apple');
    a.push('egg');
    console.log(a); // ["apple", "egg"]

    2,字符串:模板字符串
    使用反引号,直接写变量
    多行字符串
    告别+拼接字符串

    1
    2
    3
    4
    5
    6
    let name='imooc'
    // es5
    console.log('hello '+name+'! \n you are funny!')
    // es6 after
    console.log(`hello ${name}!
    you are funny!`) // 换行不需要加\n,直接换行就行

    3,函数扩展:ES6中函数的用法
    参数有默认值
    箭头函数
    展开运算符

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 带默认参数的箭头函数
    let hello = (name='world')=>{
    console.log(`hello ${name}`)
    }
    // 直接返回值的箭头函数
    let cal = num=>num*2
    // 多个参数
    let cal1 = (num1, num2)=>num1*num2

    hello() // hello world
    hello('darrell') // hello darrell

    console.log(cal(5)) // 10
    console.log(cal1(5, 6)) // 30

    let arr = [6, 7]
    console.log(cal1(...arr)) // ...解构,输出 42

    4,对象扩展:Object扩展
    Object.keys、values、entries
    对象方法简写,计算属性
    展开运算符(不是ES6标准,但是babel也支持)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    const name = 'imooc'
    // es5
    const obj = {
    name: name,
    site:'imooc.com',
    sayHello: function(){
    console.log('hello world!')
    }
    }
    console.log(obj)
    obj.sayHello()

    //es6:
    //在对象里面添加跟变量名一样的属性址,并且属性的值就是变量的属性址。就可以直接简写成下面这样,函数也可以简写
    const obj = {
    name,
    site:'imooc.com',
    sayHello(){
    console.log('hello world!')
    }
    }
    console.log(obj)
    obj.sayHello()

    5,解构赋值,函数也可以多返回值
    数组结构
    对象解构

    1
    2
    3
    4
    const [name, age] = ['imooc', '20']
    const {title,job} = {title:'React开发App', job:'IT'}
    console.log(name,age) // imooc,20
    console.log(title,job) // React开发App, IT

    6,类:提供class的语法糖
    是prototype的语法糖
    Extends继承
    Constructor构造函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    class MyApp{
    constructor(age) {
    this.name='darrell'
    this.age = age
    } //用这个类实例化一个对象是,会最先执行这个构造器
    sayHello(){
    console.log(`hello ${this.name}, I am ${this.age} years old`) //模版字符串
    }
    }
    let app = new MyApp(18)
    app.sayHello() // 输出的为:hello darrell, I am 18 years old

    7,新的数据结构:ES6中新出现的数据结构
    Set,元素不可重合
    Map
    Symbol

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // Set:不能有重复的内容
    let desserts = new Set(['tomao','peats','egg']);

    desserts.add('toma');
    console.log(desserts); // ['tomao','peats','egg','toma']
    console.log(desserts.size); 4
    console.log(desserts.has('tomao')); // true
    desserts.delete('toma');
    console.log(desserts) // ['tomao','peats','egg']
    desserts.clear(); // []

    8,模块化:ES6中自带了模块化机制,告别seajs和require.js
    Import,import{}
    Emport,Export default
    Node现在还不支持,还需要require来加载文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // module1.js
    let fruit = 'apple';
    let dessert = 'cake';
    let dinner = (fruit,dessert) => {
    console.log(`今天的晚餐是${fruit}和${dessert}`);
    }
    export {fruit,dessert};
    export default dinner; // 导出默认的函数

    //module2.js
    import dinner from './module1.js'; //这个是拿到module1.js默认导出的dinner函数
    dinner('apple','egg'); // 今天的晚餐是apple和egg

    import * as chef from './module1.js'; // 将module1种所有的export都导出重命名为chef

    chef.default('apple','egg');// 今天的晚餐是apple和egg,默认导出的是放在chef的defalut里
    chef.default(chef.fruit,chef.dessert); // 今天的晚餐是apple和cake

    9,还有一些特性,虽然不在ES6的范围,其他的特性,但是也被babel支持,普遍被大家接受和使用(需要安装插件)。不过这些对于初学者来说,这些暂时还不需要全部掌握。
    Async await

    处理异步的方法,非常的简单优雅,具体大家可以参考阮一峰老师的这篇文章,async 函数的含义和用法,

    1
    2
    3
    4
    5
    6
    7
    8
    9
    Promise

    new Promise((resolve) => {
    setTimeout(function(){
    resolve()
    }, 3000);
    }).then(() => {
    console.log('promise 成功');
    });

    上面是一个简单的例子,我new了一个promise对象,让他在三秒之后可以输出promise 成功,具体的操作大家可以查看,具体的Promise大家可以参考阮一峰老师的ECMAScript 6 入门这本书中对于Promise的讲解,讲的很好。
    其实promise更多的是用来获取数据,比如我们在react项目中,会通过fetch发送异步请求,其实fetch返回的就是一个promise对象,所以我们一直.then()

    迭代器(Iterators)和生成器(Generators)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    // 自己实现的一个简单版的迭代器
    function chef(foods) {
    let i = 0;

    return {
    next(){
    let done = (i >= foods.length);
    let value = !done ? foods[i++] : undefined;

    return {
    value: value,
    done:done
    }
    }
    }
    }

    let anghao = chef(['tomato','egg']);

    console.log(anghao.next()); // {value: "tomato", done: false}
    console.log(anghao.next()); // {value: "egg", done: false}
    console.log(anghao.next()); // {value: undefined, done: true}

    //es6 的 Generators
    function* chef(foods) {
    for(var i = 0 ;i< foods.length;i++) {
    yield foods[i]
    }
    }

    //第二种
    let wanghao = chef(['tomato','egg']);
    console.log(wanghao.next()); // {value: "tomato", done: false}
    console.log(wanghao.next()); // {value: "egg", done: false}
    console.log(wanghao.next()); // {value: undefined, done: true}

    以上是简单的迭代器与生成器的例子,笔者最近在学习阿里的dva的redux框架,其中他处理异步数据流的时候使用了redux-saga,里面有用到生成器。不过对于初学者来说,这些暂时还不需要掌握。