ES6 Tutorial

资料：https://www.youtube.com/watch?v=NCwa_xi0Uuc&list=PLTjRvDozrdlw5En5v2xrBr_EqieHf7hGs&index=8&ab_channel=ProgrammingwithMosh

包含以下内容：

• 变量的作用域
• this关键字
• 箭头函数 arrow function
• 解构赋值 destructuring assignment
• 展开语法 spread syntax
• 类 class
• 模块化 modules

变量的作用域

function sayHello() {
    for (var i = 0; i < 5; i++) {
        console.log(i);
    }
    console.log(i);
}
sayHello();

上述代码正常运行，第5行输出i=5，说明使用var定义的变量i的作用域是sayHello整个函数。

function sayHello() {
    for (let i = 0; i < 5; i++) {
        console.log(i);
    }
    console.log(i);
}
sayHello();

上述代码在第5行会报错：Uncaught ReferenceError: i is not defined。说明在第2行使用let定义的变量i只在for循环这个block内生效。

const x = 1;
x = 2;

上述代码在第2行会报错：Uncaught TypeError: Assignment to constant variable.说明使用const定义的常量x，不能被再次赋值。const声明的常量的作用域和let声明的变量的作用域一样。

this关键字

JavaScript中的this关键词和c#、Java中的this关键词不同，返回当前对象的引用。

const person = {
    name: 'name',
    walk() {console.log(this)}
};
person.walk(); // {name: 'name', walk: f}

上述代码中的this返回{name: 'name', walk: f}，即person对象的引用。

const person = {
    name: 'name',
    walk() {console.log(this)}
};
const walk = person.walk;
console.log(walk);
walk();

第5行是对walk方法的引用，第6行打印结果是f walk() {console.log(this)}

第7行来调用walk方法，结果返回一个Window对象。

总结：this指的是什么？如果将函数作为对象中的方法调用时（case1），this返回的永远是对象的引用；如果将调用函数作为对象外的函数单独调用（case2），this返回的是浏览器中的全局Window对象。

如何避免case2？在JavaScript中 functions are objects

const person = {
    name: 'baiyin',
    walk() {console.log(this)}
};
const walk = person.walk.bind(person); 
walk();

本例中，person.walk.bind(person)创建了一个句person.walk函数具有相同主体的绑定函数walk，将walk函数的this对象与person对象关联。

array functions

类似于python中的匿名函数，Java中的lambda表达式，array function是一种简化函数的写法，主要和filter、map、reduce等函数结合使用。

const square = function(number) {
    return number * number;
}

const square = number => number * number

console.log(square(5));

参数的简化写法：

• 没有参数：()

• 单个参数：parameter

• 多个参数：(param1, param2)

函数体的简化写法：

• 如果函数体只有一条语句，可以省略大括号{}、return关键字和分号。

常见用法：

• 和filter函数结合使用

const jobs = [
    { id: 1, isActive: true },
    { id: 2, isActive: true },
    { id: 3, isActive: false}
]

const activeJobs = jobs.filter(function(job) { return job.isActive; });
// 使用箭头函数简化
const activeJobs = jobs.filter(job => job.isActive);

箭头函数不会重新绑定this

map函数

const colors = ['red', 'yellow', 'blue'];
const items = colors.map(function(color) {
    return '<li>' + color + '</li>';
})
console.log(items)

使用箭头函数优化：

const colors = ['red', 'yellow', 'blue'];
const items = colors.map(color => '<li>' + color + '</li>')
console.log(items)

使用模板优化字符串拼接：

const colors = ['red', 'yellow', 'blue'];
const items = colors.map(color => `<li>${color}</li>`)
console.log(items)

object destructuring

从对象中解析属性并赋值给新的变量：

const address = {
    country: 'China',
    city: 'Xi\'an',
    district: 'Yanta',
    street: 'Yuhua'
}
// extract properties one-by-one
const country = address.country;
const city = address.city;
const district = address.district;
const street = address.street;

// extract specific properties
const {country, city} = address;

// extract specific properties and assign to renamed variable
const {country, city, street: st} = address;

spread operator

• 组装数组：

const first = [1, 2, 3];
const second = [4, 5, 6];
const third = [7, 8, 9];
// old usage
const combined = first.concat(second).concat(third);
// spread operator
const combined = [...first, ...second, ...third];
// using spread clone
const clone = [...first];

• 组装对象：

const first = {name: 'bai'};
const second = {job: 'instructor'};
// combine object
const combined = {...first, ...second, location: 'China'};
// clone object
const clone = {...first}

class

• 创建类

class Person {
    constructor(name) {
        this.name = name;
    }

    walk() {
        console.log('walk');
    }
}

const person = new Person('bai');
person.walk();

• 继承

class Person {
    constructor(name) {
        this.name = name;
    }

    walk() {
        console.log(this.name + ' is walking.');
    }
}

class Teacher extends Person{
    constructor(name, degree) {
        super(name);
        this.degree = degree;
    }

    teach() {
        console.log(this.name + ' (' + this.degree + ') is teaching.');
    }
}

const teacher = new Teacher('bai', 'degree');
teacher.walk();
teacher.teach();

modules

上述代码的实现都在index.js中，需要进行模块化。一个文件作为一个模块，拆分如下：

// person.js
export class Person {
    constructor(name) {
        this.name = name;
    }

    walk() {
        console.log(this.name + ' is walking.');
    }
}
// teacher.js
import { Person } from "./person";

export class Teacher extends Person{
    constructor(name, degree) {
        super(name);
        this.degree = degree;
    }

    teach() {
        console.log(this.name + ' (' + this.degree + ') is teaching.');
    }
}
// index.js
import { Teacher } from "./teacher";

const teacher = new Teacher('bai', 'degree');
teacher.walk();
teacher.teach();

export分为named export和default export。

• named export
  • export class Person
  • import {Person} from "./person"
• Default export
  • export default class Person
  • import Person from "./person"