ES6新特性（一）

1. let变量特性：

        a. 变量不能重复声明

        b. 作用域是块级作用域（大括号里的内容）

        c. 不存在变量提升，即不允许在变量声明之前使用变量

        d. 不影响作用域链

2. const常量特性：

        a. 声明时必须赋初始值

        b. 常量值不能修改，除了数组和对象

        c. 块级作用域，并不是全局的

        d. 一般常量名一般为全大写

3. 解构赋值：即通过特殊的语法解构解析出数组的元素值或者对象的属性值

const F4 = ['小沈阳', '刘能', '赵四', '宋小宝];
let [a, b, c, d] = F4;

const zhao = {
    name: '赵本山',
    age: '不详',
    xiaopin: function(){
        console.log("我可以演小品");
    }
}
let {name, age, xiaopin} = zhao;
console.log(name);
console.log(age);
xiaopin();

4. 模板字符串：使用``引起来的字符串。特性：

        a. 内容中直接出现换行符，这是单引号/双引号所没有的

        b. 内容中可以直接引用变量，引用方式为${变量名}

let str1 = `abc`;
let str2 = `${str1}def`

5. 对象的简化写法：原本在大括号里写的键值对可以直接写成变量名

let name = 'sgg';
let change = function(){
    console.log("xxx");
}
let school = {
    name, 
    change
}

6. 箭头函数：类似于java的lamda表达式。以下两个函数等效：

let fn = function(a, b){
    return a + b;
}

let fn = (a,b) => {
    return a + b;
}

7. 箭头函数的特性：

        a. this是静态的，始终指向函数声明时所在作用域下的this的值

let fn1 = function(){
    console.log(this.name);
}

let fn2 = () => function(){
    console.log(this.name);
}

window.name = 'sgg';
const school = {
    name: 'atgg'
} 

fn1.call(school);   // 输出atgg
fn2.call(school);   // 输出sgg

        b. 不能作为构造函数实例化对象

        c. 不能使用arguments参数

        d. 箭头函数的简写：当入参只有一个的时候，可以省略小括号，如果函数就一行，可以省略大括号和return，类似于java的lamda表达式。

8. 函数参数初始值

// c如果不传值，则为0处理，如果不设初始值，则为NaN
function add(a, b, c = 0){
    return a + b + c;  
}

9. 函数参数解构赋值，以下两段代码等效：

function connect(options){
    let host = options.host;
    let username = options.username;
    let password = options.password;
    let port = options.port;
    console.log(host);
}

// port有默认值3306
function connect({host, username, password, port = "3306"}){
    console.log(host);
}

10. 通过...args获取函数参数

ES5写法：

function date(){
    console.log(arguments);  //是一个对象
}

ES6写法：

function date(a, b, ...args){
    console.log(a);
    console.log(b);
    console.log(args);  //是一个数组 3,4,5,6
}

date(1,2,3,4,5,6);

注意...args参数必须为函数的最后一个参数。

11. 函数调用时，通过...将数组转化为一个个元素

let arr = ['a', 'b', 'c'];
function fn(){
    console.log(arguments);
}

fn(...arr);

应用：

// 1. 数组的克隆
const arr = ['a', 'b', 'c'];
const arrCopy = [...arr];

// 2. 数组的合并
const kuaizi = ['wtl', 'xy'];
const fengkuang = ['zy', 'lh'];
const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];

// 3. 将伪数组转化为真正的数组
let divs = document.querySelectorAll('div');  // 这是一个对象
let divArr = [...divs];  // 这是一个数组

12. 新的基本数据类型Symbol，类似于字符串，特性如下：

        a. Symbol的值是唯一的，用来解决命名冲突的问题

        b. Symbol值不能与其他数据类型进行运算

        c. Symbol定义的属性不能使用for...in进行循环遍历，使用Reflect.ownKeys获取对象的所有键名。

// 创建Symbol
let a = Symbol();
let b = Symbol('sgg');
let c = Symbol('sgg');
let d = Symbol.for('sgg');
let e = Symbol.for('sgg');

console.log(b === c);  // false
console.log(d === e);  // true
console.log(b === d);  // false

其他基本数据类型：undefined、null、number、string、object、boolean。

13. 使用for...of遍历，只要有Symbol.iterator属性就可以使用for...of遍历

const arr = ['a1', 'a2', 'a3', 'a4']
for (var a of arr) {
    console.log(a);  //输出a1, a2, a3, a4
}

for (var a in arr) {
    console.log(a);  //输出0, 1, 2, 3
}

在对象中自定义一个Symbol.iterator属性使其能够使用for...of循环的例子，参考尚硅谷Web前端ES6教程 P19

14. 生成器函数，用于实现异步调用

// 创建
function *gen(){
    console.log(111);
    yield 'aaa';
    console.log(222);
    yield 'bbb';
    console.log(333);
    yield 'ccc';
    console.log(444);
}

// 生成器函数返回的是一个迭代器对象
let iter = gen();

// 使用next方法执行，yield为分隔符
iter.next();  // 输出111
iter.next();  // 输出222
iter.next();  // 输出333
iter.next();  // 输出444


for(let v of gen()){
    console.log(v);  // 会打印yield后面的值
}

15. 生成器函数的返回结果的next方法传入的参数作为对应yield的返回值

function *gen(args){
    console.log(args);
    let one = yield 'aaa';
    console.log(one);
    let two = yield 'bbb';
    console.log(two);
    let three = yield 'ccc';
    console.log(three);
}

let iter = gen('AAA');
console.log(iter.next());  // AAA  aaa
console.log(iter.next('BBB'));  //  BBB bbb
console.log(iter.next('CCC'));  //  CCC ccc
console.log(iter.next('DDD'));  //  DDD undefined

16. 生成器案例：实现1s后打印111，2s后打印222，3s后打印333

function t1(){
    setTimeout(() => {
        console.log("111");
        iterator.next();
    }, 1000);
}

function t2(){
    setTimeout(() => {
        console.log("222");
        iterator.next();
    }, 2000);
}

function t3(){
    setTimeout(() => {
        console.log("333");
        iterator.next();
    }, 3000);
}

function * gen(){
    yield t1();
    yield t2();
    yield t3();
}

let iter = gen();
gen.next();

17. 生成器案例：依次获取用户数据、订单数据、商品数据，关键是利用next方法传入参数

function getUser(){
    setTimeout(() => {
        let data = '用户数据'
        iterator.next(data);
    }, 1000);
}

function getOrder(){
    setTimeout(() => {
        let data = '订单数据'
        iterator.next(data);
    }, 1000);
}

function getGood(){
    setTimeout(() => {
        let data = '商品数据'
        iterator.next(data);
    }, 1000);
}


function * gen(){
    let user = yield getUser();
    console.log(user);
    let order = yield getOrder();
    console.log(order);
    let good = yield getGood();
    console.log(good);
}

let iter = gen();
gen.next();   // 每过1s，依次打印 用户数据、订单数据、商品数据