ES6 教程

上次分享了es6开发环境的搭建，本次接着分享es6常用的特性。

es6常用的语法参考   ：    https://blog.csdn.net/itzhongzi/article/details/73330681

es6 浏览器支持情况   http://kangax.github.io/compat-table/es6/

1.变量声明let和const

我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:

function aa() {
    if(bool) {
        var test = 'hello man'
    } else {
        console.log(test)
    }
  }

以上的代码实际上是：

function aa() {
    var test // 变量提升
    if(bool) {
        test = 'hello man'
    } else {
        //此处访问test 值为undefined
        console.log(test)
    }
    //此处访问test 值为undefined
  }

所以不用关心bool是否为true or false。实际上，无论如何test都会被创建声明。

接下来ES6主角登场：
我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？

• 在一个函数内部
• 在一个代码块内部

说白了 {}大括号内的代码块即为let 和 const的作用域。

看以下代码：

 function aa() {
    if(bool) {
       let test = 'hello man'
    } else {
        //test 在此处访问不到
        console.log(test)
    }
  }

let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。

再来说说const。

 const name = 'lux'
    name = 'joe' //再次赋值此时会报错

说一道面试题

var funcs = []
    for (var i = 0; i < 10; i++) {
        funcs.push(function() { console.log(i) })
    }
    funcs.forEach(function(func) {
        func()
    })

这样的面试题是大家常见，很多同学一看就知道输出 10 十次
但是如果我们想依次输出0到9呢？两种解决方法。直接上代码。

// ES5告诉我们可以利用闭包解决这个问题
    var funcs = []
    for (var i = 0; i < 10; i++) {
        func.push((function(value) {
            return function() {
                console.log(value)
            }
        }(i)))
    }
    // es6
    for (let i = 0; i < 10; i++) {
        func.push(function() {
            console.log(i)
        })
    }

达到相同的效果，es6简洁的解决方案是不是更让你心动！！！

2.模板字符串

es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。

第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

 //es5
    var name = 'lux'
    console.log('hello' + name)
    //es6
    const name = 'lux'
    console.log(`hello ${name}`) //hello lux

第二个用途，在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

  // es5
    var msg = "Hi \
    man!
    "
    // es6
    const template = `<div>
        <span>hello world</span>
    </div>`

对于字符串es6当然也提供了很多厉害的方法。说几个常用的。

// 1.includes：判断是否包含然后直接返回布尔值
    let str = 'hahay'
    console.log(str.includes('y')) // true
    // 2.repeat: 获取字符串重复n次
    let s = 'he'
    console.log(s.repeat(3)) // 'hehehe'
    //如果你带入小数, Math.floor(num) 来处理

3.函数

函数默认参数

在ES5我们给函数定义参数默认值是怎么样？

 function action(num) {
        num = num || 200
        //当传入num时，num为传入的值
        //当没传入参数时，num即有了默认值200
        return num
    }

但细心观察的同学们肯定会发现，num传入为0的时候就是false， 此时num = 200 与我们的实际要的效果明显不一样

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

 function action(num = 200) {
        console.log(num)
    }
    action() //
    action(300) //

箭头函数

ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。

箭头函数最直观的三个特点。

• 不需要function关键字来创建函数
• 省略return关键字
• 继承当前上下文的 this 关键字

//例如：
    [1,2,3].map( x => x + 1 )

//等同于：
    [1,2,3].map((function(x){
        return x + 1
    }).bind(this))

说个小细节。

当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{}；例如:

 var people = name => 'hello' + name
    //参数name就没有括号

作为参考

  var people = (name, age) => {
        const fullName = 'h' + name
        return fullName
    }
    //如果缺少()或者{}就会报错

4.拓展的对象功能

对象初始化简写

ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如：

 function people(name, age) {
        return {
            name: name,
            age: age
        };
    }

键值对重名，ES6可以简写如下：

  function people(name, age) {
        return {
            name,
            age
        };
    }

ES6 同样改进了为对象字面量方法赋值的语法。ES5为对象添加方法：

 const people = {
        name: 'lux',
        getName: function() {
            console.log(this.name)
        }
    }

ES6通过省略冒号与 function 关键字，将这个语法变得更简洁

 const people = {
        name: 'lux',
        getName () {
            console.log(this.name)
        }
    }

ES6 对象提供了Object.assign()这个方法来实现浅复制。Object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。第一参数即为目标对象。在实际项目中，我们为了不改变源对象。一般会把目标对象传为{}

 const obj = Object.assign({}, objA, objB)

5.更方便的数据访问--解构   (解构赋值是以对象或数组的形式去赋值，只是形似对象或数组，等号左边并不是一个数据【对象是一种数据格式】，区别于对象)

数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程

ES5我们提取对象中的信息形式如下：

const people = {
        name: 'lux',
        age: 20
    }
    const name = people.name
    const age = people.age
    console.log(name + ' --- ' + age)

是不是觉得很熟悉，没错，在ES6之前我们就是这样获取对象信息的，一个一个获取。现在，解构能让我们从对象或者数组里取出数据存为变量，例如 （个人，等号左边为对象或数组结构的是解构赋值，左边是一个变量的就是赋值）

//对象
    const people = {
        name: 'lux',
        age: 20
    }
    const { name, age } = people
    console.log(`${name} --- ${age}`)
    //数组
    const color = ['red', 'blue']
    const [first, second] = color
    console.log(first) //'red'
    console.log(second) //'blue'

6.Spread Operator 展开运算符

ES6中另外一个好玩的特性就是Spread Operator 也是三个点儿...接下来就展示一下它的用途。

组装对象或者数组

//数组
    const color = ['red', 'yellow']
    const colorful = [...color, 'green', 'pink']
    console.log(colorful) //[red, yellow, green, pink]

    //对象
    const alp = { fist: 'a', second: 'b'}
    const alphabets = { ...alp, third: 'c' }
    console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
}

有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项

const number = [1,2,3,4,5]
    const [first, ...rest] = number
    console.log(rest) //2,3,4,5
    //对象
    const user = {
        username: 'lux',
        gender: 'female',
        age: 19,
        address: 'peking'
    }
    const { username, ...rest } = user
    console.log(rest) //{"address": "peking", "age": 19, "gender": "female"
}

对于 Object 而言，还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名，右边覆盖左边

const first = {
        a: 1,
        b: 2,
        c: 6,
    }
    const second = {
        c: 3,
        d: 4
    }
    const total = { ...first, ...second }
    console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

7.import 和 export

import导入模块、export导出模块

//全部导入
import people from './example'

//有一种特殊情况，即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

//导入部分
import {name, age} from './example'

// 导出默认, 有且只有一个默认
export default App

// 部分导出
export class App extend Component {};

以前有人问我，导入的时候有没有大括号的区别是什么。下面是我在工作中的总结：

1.当用export default people导出时，就用 import people 导入（不带大括号）

2.一个文件里，有且只能有一个export default。但可以有多个export。

3.当用export name 时，就用import { name }导入（记得带上大括号）

4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age } 

5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example

原生js中使用模块：https://www.cnblogs.com/sherryStudy/p/es6_module.html

8. Promise （承诺）    参考：https://segmentfault.com/a/1190000007685095  或

　　　　　　　　https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise  （推荐）        注：大部分浏览器都已经支持 Promise 对象了。使用babel编译后的代码还是 Promise 对象。

在promise之前代码过多的回调或者嵌套，可读性差、耦合度高、扩展性低。通过Promise机制，扁平化的代码机构，大大提高了代码可读性；用同步编程的方式来编写异步代码，保存线性的代码逻辑，极大的降低了代码耦合性而提高了程序的可扩展性。

说白了就是用同步的方式去写异步代码。

发起异步请求

 fetch('/api/todos')
      .then(res => res.json())
      .then(data => ({ data }))
      .catch(err => ({ err }));

今天看到一篇关于面试题的很有意思。

setTimeout(function() {
      console.log(1)
    }, 0);
    new Promise(function executor(resolve) {
      console.log(2);
      for( var i=0 ; i<10000 ; i++ ) {
        i == 9999 && resolve();
      }
      console.log(3);
    }).then(function() {
      console.log(4);
    });
    console.log(5);

Excuse me？这个前端面试在搞事！

promise的知识点总结： https://www.imooc.com/article/20580?block_id=tuijian_wz   或   https://www.cnblogs.com/whybxy/p/7645578.html  或  https://www.cnblogs.com/guolintao/p/7821387.html

　　a、promise对象是一个构造函数，用来生成promise实例。 promise对象代表一个异步操作，有三种状态。需要通过  resolve 和 reject 手动设置状态。（一般根据 异步操作 结果执行 调用对应的函数）

　　　  resolve 和 reject 分别是两个函数方法，由Javascript引擎提供，不用自己部署。resolve函数的作用是将Promise对象的状态从“未完成”变为“成功”状态，（结果使then函数执行前一个回调函数，即对应resolve状态的函数）；

　　　  reject函数的作用则刚好相反，是将Promise对象的状态从“未完成”状态改变为“失败”状态 (reject 对应执行后一个then回调函数) 。注意reject函数的参数最好是一个错误对象 即 reject(new Error('error')) ,不然eslint会报错，但不影响运行。

　　　  Promise实例化时，这两个方法在测试参数函数中可以直接使用。在then方法中使用 resolve 方法必须是 Promise.resolve('某某数据')，不然会报resolve未定义的错误。

var promise = new Promise( function( resolve, reject) {
     //some code
    if(//异步操作成功){
        resolve(value);
    }else{
        reject(error);
    }
});

　　b、promise对象的then函数有两个参数（都是回调函数），对应 resolve 和 reject 的状态。

　　c、then() 返回一个新的promise，这个then函数中没有值传入到他的下一个then函数中，如果在每个then的回调函数中  return Promise.resolve(data)，则每个then函数都有数据传递到他的下一个then中。

        function asy () {
            var promise = new Promise(function (resolve, reject) {
                var b
                setTimeout(() => {
                    b = 12 + 15
                    if (b > 100) {
                        resolve(b)
                    } else {
                        reject(new Error('errd'))
                    }
                    }, 1000)
            })
            return promise
        }
        asy().then(
            (res) => {
                console.log('结果:' + res)
            },
            (res) => {
                console.log(res)
            }
        )

　　d、（个人感悟），根据promise对象这种特性，自己可以写一个异步方法。比如执行一个函数，他的回调函数不会执行。当点击某个事件触发执行 这个promise对象的 resolve 或 reject函数，就会执行对应的函数。这种用法在组件中使用比较方便。

　　e、把 promise 对象的 resolve 和 reject 两个方法  赋值  到外面作用域，则在外面也可以控制 promise 对象 状态的改变，执行相应的程序。

 var asy_resolve,asy_reject;  // 全局作用域设置两个变量，分别 指向 Promise 对象的 resolve 和 reject 函数。

 function asy () {
     var promise = new Promise(function (resolve, reject) {
         asy_resolve = resolve;   // 将 asy_resolve 指向 resolve 方法
         asy_reject = reject;     // 将 asy_reject 指向 reject 方法
     })
     return promise
 }

 asy().then((res) => {
         console.log('结果:' + res)
     }).catch((res) => {
         console.log(res)
     }
 )

 setTimeout(function(){
     asy_resolve('成功');   // 在创建 promise 对象外，执行 promise 对象状态改变的函数。
     // asy_reject('失败');
 },5000)

　 f、then函数执行后还是promise 对象，then函数执行完毕，接下来执行那个回调函数，取决于then函数的执行情况。

　　　　默认执行，成功的那个回调函数。下面的情况执行错误的那个回调函数

　　　　　1、then函数里面执行   return Promise.reject(error) 

(error) => {

return Promise.reject( error )

 }

　　　　  2、then函数里面执行  throw Error

() => {
    throw Error
}

 　g、注意： then函数里面，return 返回的值就是 传递到回调函数中的参数值      https://blog.csdn.net/a695993410/article/details/80954552

 var example = new Promise((fulfill, reject)=>{
     let i = 1;
     reject(i);
 })
 example
 .catch(()=>{console.log('我是第一个catch的回调函数'); return 1;})
 .then(() =>{console.log('我是第一个then的回调函数');    throw Error    })
 .catch(()=>{console.log('我是第二个catch的回调函数')})
 .then(() => {console.log('我是第二个then的回调函数')})

9.Generators

生成器（ generator）是能返回一个迭代器的函数。生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。

这里生活中有一个比较形象的例子。咱们到银行办理业务时候都得向大厅的机器取一张排队号。你拿到你的排队号，机器并不会自动为你再出下一张票。也就是说取票机“暂停”住了，直到下一个人再次唤起才会继续吐票。

OK。说说迭代器。当你调用一个generator时，它将返回一个迭代器对象。这个迭代器对象拥有一个叫做next的方法来帮助你重启generator函数并得到下一个值。next方法不仅返回值，它返回的对象具有两个属性：done和value。value是你获得的值，done用来表明你的generator是否已经停止提供值。继续用刚刚取票的例子，每张排队号就是这里的value，打印票的纸是否用完就这是这里的done。

// 生成器
    function *createIterator() {
        yield 1;
        yield 2;
        yield 3;
    }

    // 生成器能像正规函数那样被调用，但会返回一个迭代器
    let iterator = createIterator();

    console.log(iterator.next().value); //
    console.log(iterator.next().value); //
    console.log(iterator.next().value); //

那生成器和迭代器又有什么用处呢？

围绕着生成器的许多兴奋点都与异步编程直接相关。异步调用对于我们来说是很困难的事，我们的函数并不会等待异步调用完再执行，你可能会想到用回调函数，（当然还有其他方案比如Promise比如Async/await）。

生成器可以让我们的代码进行等待。就不用嵌套的回调函数。使用generator可以确保当异步调用在我们的generator函数运行一下行代码之前完成时暂停函数的执行。

那么问题来了，咱们也不能手动一直调用next()方法，你需要一个能够调用生成器并启动迭代器的方法。就像这样子的

function run(taskDef) { //taskDef即一个生成器函数

        // 创建迭代器，让它在别处可用
        let task = taskDef();

        // 启动任务
        let result = task.next();

        // 递归使用函数来保持对 next() 的调用
        function step() {

            // 如果还有更多要做的
            if (!result.done) {
                result = task.next();
                step();
            }
        }

        // 开始处理过程
        step();

    }

生成器与迭代器最有趣、最令人激动的方面，或许就是可创建外观清晰的异步操作代码。你不必到处使用回调函数，而是可以建立貌似同步的代码，但实际上却使用 yield 来等待异步操作结束。

10、class 类：https://www.jianshu.com/p/df2a7dfcc299  或  https://www.jianshu.com/p/cff17c5e7f86（推荐）

　　注意：es7中对class的实例属性和静态属性的写法，做了改变。https://blog.csdn.net/qq_30100043/article/details/53542966（实例属性不用写在类的constructor方法中）

　　a、创建 class 类，对象的属性放在  constructor(){} 函数中。每次执行 new 时，会优先执行 constructor 构造器中的代码。

class Person {
    // 这是Person的构造器
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}
var person = new Person('李四', 20) // new一个class的过程，就是调用 constructor方法，new时传递的参数给了constructor方法

　　b、实例属性与静态属性：constructor 方法中的属性是实例属性，一般实例化的时候把 属性值 传递给constructor；类的属性是静态属性。

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    static info = '这是一个静态属性'
}
var person = new Person('张三'， 18)
console.log(person.name)    // 张三
console.log(person.info)    // undefined
console.log(Person.info)    // 这是一个静态属性

　　c、实例方法与静态方法：

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    // 实例方法
    sayHello() {
        console.log('Hello, ' + this.name)
    }
    // 静态方法
    static eat() {
        console.log('eat')
    }
}
var person = new Person('张三', 20)
person.sayHello()   // Hello, 张三
person.eat()        // undefined
Person.eat()        // eat

　　d、继承：class通过extends关键字实现继承

// 父类
class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    sayHello() {
        console.log('Hello, ' + this.name)
    }
}
// 创建子类
class Chinese extends Person {}  // 创建某个类时，说明继承了哪个父类
class American extends Person {}

var zs = new Chinese('张三', 18)
var jack = new American('jack', 18)

　　e、super函数的使用：如果 创建子类时，父类和子类都有 constructor 构造器，那么子类的 constructor中必须优先调用一次super()。

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}
class Chinese extends Person {
    constructor(name, age, idcard) {
        super(name, age)           // super是一个函数，父类的构造器，子类中调用super，就是对父类构造器的引用。
        this.idcard = idcard
    }
}

注意：

1. 在class{ ... }区间内，只能写构造器、静态方法、静态属性、实例方法、实例属性（写其他的代码会报错的）。
2. class类本质上 是JavaScript的语法糖。calss后面的{...},是定义这个类的 实例属性/静态属性、实例方法/实例属性。里面的语法不是对象也不是函数，是class自己的语法。
3. class 的继承是在 创建子类时决定的。以前的构造函数，继承的方法就有多种方式。

11、map对象：https://www.runoob.com/w3cnote/es6-map-set.html 或 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map

　　a、Map 对象保存键值对，任何值 都可以作为一个键或一个值。

var myMap = new Map();
var keyString = "a string";
myMap.set(keyString, "和键'a string'关联的值");

　　b、Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。

　　c、Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。

　　d、Map 这种 结构，特定的二维数组 (子数组 只有两个值) 很容易转化为 Map对象。

var myMap = new Map([["key1", "value1"], ["key2", "value2"]]);

　　个人理解：Map 对象就是一个基于Objects对象的延伸，只是 读取方式  和 属性方法有一些差异。

11、Set对象：https://www.runoob.com/w3cnote/es6-map-set.html 或 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set

　　a、Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

let mySet = new Set();
mySet.add(1); // Set(1) {1}

　　b、Set 对象是值的集合，你可以按照插入的顺序迭代它的元素。

　　c、Set 这种 结构，数组  很容易转化为 Set 对象。

var mySet = new Set([1, 2, 3, 4, 4]);

　　个人理解：Set 对象就是一个基于数组对象的延伸，只是 读取方式  和 属性方法有一些差异。

总结

　　1、ES6的特性远不止于此，但对于我们日常的开发开说。这已经是够够的了。还有很多有意思的方法。比如findIndex...等等。包括用set来完成面试题常客数组去重问题。我和我的小伙伴们都惊呆了!

　　2、es6 的语法，基本在所有的浏览器中都已经实现了。ie浏览器Edge版本前的版本是不支持的，其它的浏览器一般安装时，都会是最新的。所以在没有本来babel的js中也可以直接使用了。https://blog.csdn.net/lpw_cn/article/details/84789183