ES6新特性

ES6 Tutorial

包含以下内容：

• 变量的作用域
• 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

(method) Function.bind(this: Function, thisArg: any, …argArray: any[]): any

For a given function, creates a bound function that has the same body as the original function. The this object of the bound function is associated with the specified object, and has the specified initial parameters.

对于给定函数，创建与原始函数具有相同主体的绑定函数。绑定函数的this对象与指定的对象相关联，并且具有指定的初始参数。

@param thisArg — An object to which the this keyword can refer inside the new function.

@param argArray — A list of arguments to be passed to the new function.

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"

参考

• 资料：https://www.youtube.com/watch?v=NCwa_xi0Uuc&list=PLTjRvDozrdlw5En5v2xrBr_EqieHf7hGs&index=8&ab_channel=ProgrammingwithMosh
• 练习题：https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#es6