一、新的变量声明方式 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;
}
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
};
<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>
