es6 新语法

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

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());

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

const name = ‘Jane‘;
const age = 20

// es6
const person = {
  name,
  age
}

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

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