ES6

五、ES6

1、ES6声明变量

（在es6之前，js没有块极作用域，区分作用域是以function来区分的）
（在es6之前，使用var声明变量，所以for循环，if语句等等中声明的变量都是全局变量）

• （1）es6使用let 和const声明变量，使用时，以 { } 区分作用域
• （2）let 和 const 不能重复声明（在同一个作用域下），否则会报错
• （3）没有预编译，不存在声明提升
• （4）在for循环中使用，括号是父级作用域，花括号是子级作用域（即for循环有两个块极作用域）

2、常量const

• （1）const定义时必须有赋值，不能定义后才赋值，否则会报错
• （2）const使用后不可以重新赋值，当它是对象的时候，它的属性可以被修改

3、对象的简洁表达方式

• （1）属性名跟属性值相同时，可以省略
• （2）对象中的方法 :function 可以省略

    // es5的写法
    var username = 'zhansna';
    var age = 20;

    var person = {
        username: username,
        age: age,
        speak:function() {
            console.log('he speak english')
        }
    }
    console.log(person);

    // es6的写法
    let name = '白猫';
    let age2 = 2;
    const cat = {
        name,  //键名跟键值相同时，可以省略
        age2,
        speak() { //对象中的方法 `:function` 可以省略
            console.log('mao mao');
        }
    }
    console.log('cat',cat);
    cat.speak();

4、箭头函数

（常用于函数表达式）

• （1）对比es6之前：把function省略，多出个箭头=>

• （2）使用了箭头函数后，this指向不会改变，内层this跟外层this一样指向

  • 例如getList中的this指向cityView，axios使用箭头函数后，this指向也跟着指向ctyVIew

• eg1：函数表达式

     // 箭头函数
    const add2 = (a,b) => {
        return a+b;
    }

• eg2：在forEach中使用

    let arr = [1,23,4];
    arr.forEach(item=>{
        console.log(item);
    });

• eg3：简洁写法
  • 1、当参数只有一个时可以省略括号
  • 2、当函数体只有一行时，可以一行写完

    // 更简单的写法
    // 求平方
    var s = function(a) {
        return a*a;
    }
    // 等同于上面的写法
    let s2 = a=>a*a;

5、解构赋值

• （1）对象解构，对象键值是无序的，不需要一一对应，知道属性名就行

    const cat = {
        name: '白猫',
        age: 2,
        color: '黑色'
    }
    // 对象解构
    let { age } = cat;
    console.log(age);

• （2）数组解构，数组是有序的，需要一一对应

    let arr = [111, 222, 333];
    let [a, b, c] = arr;
    console.log(a);

• （3）函数中的对象解构
  • 下面的函数中相当于做了下面的操作
    let {username,password} = data;
    总结: 解构其实就是将对象的某个或者某些属性提取出来,方便使用

    // 函数中的对象解构
    let data = {
        username: 'zhangsan',
        password: '123'
    }
    let test = ({ username, password }) => {
        console.log(username);
        console.log(password);
    }
    test(data);

6、扩展运算符：... 相当于复制

• （1）复制对象
  es5时，使用对象的for循环进行复制

    var obj = {
        name: 'zs',
        age: 2,
        color: 'red'
    }
    // 对象的for循环,复制对象
    var obj2 = {};
    for (var p in obj) {
        // p是obj的属性
        console.log(p, '---', obj[p]);
        obj2[p] = obj[p];
    }
    console.log(obj2);

es6：使用扩展运算符（...）复制对象，同时还可以修改或增加属性

    // 扩展运算符
    let cat = {
        name: '白猫',
        age: 2
    }
    // 复制对象,同时可以修改或增加属性
    let cat2 = {
        // 扩展运算符...,作用是将cat的所有属性和值都放进cat2
        ...cat,
        // 添加新的属性,或者修改原有的属性
        color: 'white',
        age: 10
    }
    console.log('cat2', cat2);

• （2）复制数组以及数组合并
  es6：使用扩展运算符（...）复制数组

    var arr = [1,2,3];
    var arr2 = [...arr];
    console.log('arr2',arr2);

使用**扩展运算符（...）合并数组

    let list1 = ['a','b','c'];
    let list2 = ['d','e','f'];
    
    // js5的数组合并方法
    let list3 = list1.concat(list2);
    console.log('list3',list3);

    // es6数组合并
    let list4 = [...list1,...list2];
    console.log('list4',list4);