es6 新语法

一、新的变量声明方式 let/const

{
    let _a = 20;
}

console.log(a);  // a is not defined
// ES5
console.log(a);   // undefined
var a = 20;

// ES6
console.log(a); // a is not defined
let a = 20;

二、 箭头函数的使用

• 箭头函数可以替换函数表达式，但是不能替换函数声明

// es5
var fn = function(a, b) {
    return a + b;
}

// es6 箭头函数写法，当函数直接被return时，可以省略函数体的括号
const fn = (a, b) => a + b;

// es5
var foo = function() {
    var a = 20；
    var b = 30;
    return a + b;
}

// es6
const foo = () => {
   const a = 20;
   const b = 30;
   return a + b;
}

• 箭头函数中，没有this指向

var person = {
    name: 'tom',
    getName: function() {
        return this.name;
    }
}

// 我们试图用ES6的写法来重构上面的对象
const person = {
    name: 'tom',
    getName: () => this.name
}

// 但是编译结果却是
var person = {
    name: 'tom',
    getName: function getName() {
        return undefined.name;
    }
};

三、模板字符串

• 使用 `` 将整个字符串包裹起来，而在其中使用 ${} 来包裹一个变量或者一个表达式

// es6
const a = 20;
const b = 30;
const string = `${a}+${b}=${a+b}`;

// es5
var a = 20;
var b = 30;
var string = a + "+" + b + "=" + (a + b);

四、 解析结构

• 数组以序列号一一对应，这是一个有序的对应关系。
• 而对象根据属性名一一对应，这是一个无序的对应关系。
• 根据这个特性，使用解析结构从对象中获取属性值更加具有可用性

// 首先有这么一个对象
const props = {
    className: 'tiger-button',
    loading: false,
    clicked: true,
    disabled: 'disabled'
}

// es5
var loading = props.loading;
var clicked = props.clicked;

// es6
const { loading, clicked } = props;

// 给一个默认值，当props对象中找不到loading时，loading就等于该默认值
const { loading = false, clicked } = props;

五、 函数默认参数

// es5
function add(x, y) {
    var x = x || 20;
    var y = y || 30;
    return x + y;
}
console.log(add()); // 50

// es6 
function add(x = 20, y = 30) {
    return x + y;
}

console.log(add());

六、 展开运算符

• 在ES6中用...来表示展开运算符，它可以将数组方法或者对象进行展开

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];
// 这样，arr2 就变成了[1, 2, 3, 10, 20, 30];

七、对象字面量 与 class

• 对象字面量：当属性与值的变量同名时，可以只写一个

const name = 'Jane';
const age = 20

// es6
const person = {
  name,
  age
}

// es5
var person = {
  name: name,
  age: age
};

• Class类

    <script>
        // 定义一个名为Person的类 人类
        class Person {
            static sList = []; // 静态成员
            // 构造器 - 一般定义类属性
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            // 原型方法
            eat() {
                console.log(this.name + '在吃饭');
            }

            // 成员方法-箭头函数
            sayHi = (content) => {
                console.log(`${this.name}说的内容是 ${content}`);
            }
        }

        // 实例化对象
        let p1 = new Person('小丽', 22);
        let p2 = new Person('小红', 21);

        console.log('姓名是 ', p1.name);
        p1.eat();
        console.dir(Person)
        console.dir(p1)
        console.dir(p2)

        p1.sayHi('今天学习javascript高级内容');
    </script>

八、es6继承 extends

• 只需要一个extends关键字，就可以实现继承了，不用像ES5那样去担心构造函数继承和原型继承，除此之外，我们还需要关注一个叫做super的方法。
• 在继承的构造函数中，我们必须如上面的例子那么调用一次super方法，它表示构造函数的继承，与ES5中利用call/apply继承构造函数是一样的功能

    <script>
        // 父
        class Person {
            constructor() {
                this.name = name;
                this.age = age;
            }
        }

        // 子 (extends Person 继承父类)
        class Student extends Person {
            constructor(name,age,number, score) {
                // super()调用父类构造函数
                super()
                this.number = number;
                this.score = score;
            }
        }
        // 调用子类
        let s1 = new Student('中国人',22,101,99);
        // 子类调用继承自父类的属性
        s1.name();
    </script>