ES6 教程

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

1.变量声明let和const

相比var的特点：

没有变量提升

let 和 const有块级作用域

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

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>`

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() //200
    action(300) //300
```
箭头函数
箭头函数最直观的三个特点。

- 不需要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就没有括号

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)
        }
    }

5.解构赋值 --更方便的数据访问

　　　注意：解构赋值是以对象或数组的形式去赋值，只是形似对象或数组，等号左边并不是一个数据【对象是一种数据格式】，区别于对象。

　　　解构赋值参考：https://www.cnblogs.com/Shyno/p/12156854.html 或 https://juejin.cn/post/7096827697183064094

解构赋值的意义：数组和对象是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'

解构赋值的方式

基础解构

const { firstName, lastName } = {firstName:"Quintion", lastName: "Tang"}; // 解构语法
console.log(firstName); // Quintion
console.log(lastName); // Tang

嵌套对象解构

let node = {
    personalInfo: {
        basicInfo: {
            name: 'mike',
            age: 25
        }
    },
    level: 3
};
let { personalInfo: { basicInfo } } = node;
console.log(basicInfo.name);// mike

别名解构(即重命名)

let {name:myName,age} ={name:'小明',age:18}
//这里name:myName的意思是:取到name属性值,冒号后面的变量名 没有花括号,意思是把我取到的值交给冒号后面的变量名,即'myName'.相当于把name变量重命名为myName
console.log(name,myName,age)
//undefined,小明,18

默认值(先取再默认)

/*  数组  */
let [a=0, b=0,c=10] = [1, 2];
console.log(a,b,c) //1,2,10
 
//这里a,b,c在左边都先给了个默认值,但是这里是超量解构,a和b都成功取到值,但是c没取到,所以最终是默认值10,如果没有默认值就是undefined

/*  对象*/
let {name:sex='男'} ={name:'小明',age:18}
console.log(sex)  //小明

REST解构
如果想从一个对象中解构一个属性，剩下的属性结构为另一个变量，如下：

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
    age: 30,
};
const { age, ...username } = fullName; // 解构语法
console.log(username); // { firstName: 'Quintion', lastName: 'Tang' }
console.log(age); // 30

函数参数自动解构

function look([x,y]){
console.log(x,y)
}
look([1,2]) //1,2

先声明再赋值（即变量不在解构表达式声明）

// 数组
let a;
let b;
[a,b]=[1,2]
console.log(a,b) //1,2

对象中要注意，必须使用（）强制表达式运算。为什么要用(),请看 https://www.cnblogs.com/wfblog/p/8928708.html

// 对象
let x;
{x}={x:1,y:1} //报错 主要还是大括号的原因,js在行首遇到{}会把它当做代码块执行,所以会报错.
({x}={x:1,y:1}) //这样可以解决问题,但是尽量别引入(),问题会变得复杂

先声明的是一个引用类型，其属性的解构赋值

let persion = {
    name: 'Matt,
    age: 27
}

let persionCopy = {}

({     // 注意：变量不在解构表达式声明的，解构表达式必须要用括号括起来
    name: persionCopy.name, 
    age: persionCopy.age
} = persion);

　解构赋值原理：

数组解构：ES6中只要某种数据有Iterator接口（也就是可以循环迭代），都可以进行数组的解构赋值。

let [x,y] = new Set([1,2]);

没有 Iterator接口的对象，如果给他添加上 Iterator接口，同样可以使用数组结构 https://juejin.cn/post/7346512120639340607

Object.prototype[Symbol.iterator] = function(){
    // 使用 Object.values(this) 方法获取对象的所有值，并返回这些值的迭代器对象
    return Object.values(this)[Symbol.iterator]()  // 返回一个数组的迭代器对象
}

var [a, b] = {a: 1, b: 2}  // 普通对象有迭代器对象，就可以使用数组解构
console.log(a,b);

对象解构：对象的解构的内部机制是先找到同名属性，然后再赋予相应的变量。

个人总结：

数组的解构是按次序排列的，变量取值由位置决定的（数组解构是 位置匹配）；
而对象的属性是没有顺序的，变量必须与属性同名才能取到正确的值（对象解构是 属性匹配）。

6.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 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 }

有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项，可以用下面的解构赋值方法。

解构赋值中，获取剩余数据。【函数中剩余参数用法，就是出自这里吧】

   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"
}

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 {};

原生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对象是一个构造函数，用来生成promise实例。 promise对象代表一个异步操作，有三种状态。需要自己通过 resolve 和 reject 手动设置状态。
resolve 和 reject 分别是两个函数方法，resolve函数的作用是将Promise对象的状态从“未完成”变为“成功”状态，（结果使then函数执行前一个回调函数，即对应resolve状态的函数）；
reject函数的作用则刚好相反，是将Promise对象的状态从“未完成”状态改变为“失败”状态 (reject 对应执行后一个then回调函数) 。
注意：reject函数的参数最好是一个错误对象即 reject(new Error('error')) ,不然eslint会报错，但不影响运行。
```
var promise = new Promise( function( resolve, reject) {
     //some code 
    if(//异步操作成功){ 
        resolve(value); 
    }else{ 
        reject(error); 
    }
});
```
promise对象的then函数有两个参数（都是回调函数），对应 resolve 和 reject 的状态。

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)
            }
        )

View Code

把 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)

View Code

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); // 1
    console.log(iterator.next().value); // 2
    console.log(iterator.next().value); // 3
```
那生成器和迭代器又有什么用处呢？
围绕着生成器的许多兴奋点都与异步编程直接相关。异步调用对于我们来说是很困难的事，我们的函数并不会等待异步调用完再执行，你可能会想到用回调函数，（当然还有其他方案比如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方法中）

创建 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方法

实例属性与静态属性：

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)    // 这是一个静态属性

实例方法与静态方法：

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

继承：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)

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
    }
}

注意：

在class{ ... }区间内，只能写构造器、静态方法、静态属性、实例方法、实例属性（写其他的代码会报错的）。
class类本质上是JavaScript的语法糖。calss后面的{...},是定义这个类的实例属性/静态属性、实例方法/实例属性。里面的语法不是对象也不是函数，是class自己的语法。
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

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

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

Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。
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

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
```
let mySet = new Set();
mySet.add(1); // Set(1) {1}
```

Set 对象是值的集合，你可以按照插入的顺序迭代它的元素。
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

posted @ 2018-05-04 22:25 吴飞ff 阅读(385) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

实践出真知

不会总结的前端不是好前端

ES6 教程

1.变量声明let和const

2.模板字符串

3.函数

4.拓展的对象功能

5.解构赋值 --更方便的数据访问

基础解构

嵌套对象解构

别名解构(即重命名)

默认值(先取再默认)

REST解构
如果想从一个对象中解构一个属性，剩下的属性结构为另一个变量，如下：

函数参数自动解构

先声明再赋值（即变量不在解构表达式声明）

解构赋值原理：

个人总结：

6.Spread Operator 展开运算符

7.import 和 export

8. Promise （承诺）

9.Generators

10、class 类：

11、map对象：

11、`Set`对象：

总结

公告

实践出真知

不会总结的前端不是好前端

ES6 教程

1.变量声明let和const

2.模板字符串

3.函数

4.拓展的对象功能

5.解构赋值 --更方便的数据访问

基础解构

嵌套对象解构

别名解构(即重命名)

默认值(先取再默认)

REST解构如果想从一个对象中解构一个属性，剩下的属性结构为另一个变量，如下：

函数参数自动解构

先声明再赋值（即变量不在解构表达式声明）

解构赋值原理：

个人总结：

6.Spread Operator 展开运算符

7.import 和 export

8. Promise （承诺）

9.Generators

10、class 类：

11、map对象：

11、Set对象：

总结

公告

REST解构
如果想从一个对象中解构一个属性，剩下的属性结构为另一个变量，如下：

　解构赋值原理：

11、`Set`对象：