JavaScript ES6 复习(第 2 部分)

数组映射

map() 方法通过对父数组中存在的每个元素调用特定函数来创建数组。

const colors = ["red", "blue", "green"];
const mappedArray = colors.map((color) => "Primary Color - ${color}");

其中，mappedArray = [‘Primary Color - red’, ‘Primary Color - blue’, ‘Primary Color - green’]

我们使用箭头函数通过模板字符串将每种颜色映射到新数组中。上述代码也可以不使用模板字符串和箭头函数来编写。

const mappedArray = colors.map(function (color) {
    return "Primary Color - " + color;
});

我们传递给这两个函数的颜色参数是数组的特定单个项。我们可以给它赋予任何变量名称。例如，用 i 代替颜色

对象解构

访问对象中值的传统方式

const address = {
    street: '1 ABC'
    city: 'DEF',
    country: 'GHI'
}

const street = address.street
const city = address.city
const country = address.country

街道、城市、国家/地区将具有“1 ABC”、“DEF”、“GHI”等值

但使用 ES6 解构对象的方法

const { street, city, country } = address;

在这两种情况下，我们都从地址对象中提取了新变量中的街道、城市和国家属性

const { street: st } = address;

这里我们从地址中提取街道属性并将其存储在 st 变量中。

因此，st 还包含从地址对象的街道属性中提取的“1 ABC”值

扩展运算符

扩展运算符允许扩展数组。当我们需要连接一个数组、几个新值，然后连接另一个数组时，它非常有用。

const first = [1, 2, 3];
const second = [4, 5, 6];

const combined = first.concat(second);
const spreadCombined = [...first, ...second];

// best use case
const inBetween = [0, ...first, 10, 20, ...second, 30, 40];

扩展运算符也可以用于对象

const one = { B: "Bhutan" };
const two = { D: "India" };

const combined = { A: "USA", ...one, C: "Canada", ...two, E: "Australia" };

类

我们可以使用类，而不是创建多个对象

const person1 = {
    name: "ABC"
    walk() {
        console.log('Walk')
    }
}


const person2 = {
    name: "DEF"
    walk() {
        console.log('Walk')
    }
}

拥有一个具有共同属性的类比声明多个对象要好。

我们可以用以下方式在 JavaScript 中实现一个类：

class Person {
    constructor(name) {
        this.name = name;
    }
    walk() {
        console.log("Walk");
    }
}

//creating persons
const person1 = new Person("ABC");
person1.walk();
const person2 = new Person("DEF");
person2.walk();

继承

假设我们创建一个 Teacher 类，其中所有教师都应该能够行走。因此，我们使用 extends 关键字从 Person 类继承所有方法。

现在，在 Teacher 类使用 extend 类继承 Person 类的属性后，我们可以通过创建该类的 Teacher 实例来使用 Person 类的所有方法。

class Person {
    constructor(name) {
        this.name = name;
    }
    walk() {
        console.log("Walk");
    }
}

class Teacher extends Person {
    teach() {
        console.log("Teach");
    }
}

const teacher1 = new Teacher("ABC ");
teacher1.teach();
teacher1.walk();

现在，如果我们创建 Teacher 类的构造函数，我们也需要使用 super 关键字。

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

    teach() {
        console.log("Teach");
    }
}

使用 super 关键字，Teacher 类中的名称是从 Person 类继承的。

模块

模块用于从另一个 JavaScript 文件导入类或函数。

需要将 export 关键字添加到要在新 JavaScript 文件中导入的类或函数中。

src/Person.js

export class Person {
    constructor(name) {
        this.name = name;
    }
    walk() {
        console.log("Walk");
    }
}

export function display(number) {
    console.log(number);
}

使用模块在新的 JavaScript 文件中导入 Person 类和显示函数

src/teacher.js

import { Person } from "./person.js";
import { display } from "./person.js";

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

    teach() {
        console.log("Teach");
    }
}

const teacher1 = new Teacher("ABC ");
teacher1.teach();
teacher1.walk();

display("hello");

用法：

import {函数/类名} from 'path to that js file'

注意：export 关键字需要加在函数或类之前

默认和命名导出

如果我们在类或函数之前在 export 关键字旁边添加 default 关键字，则称为默认导出

默认导出的导入方式如下：

import ... from 'path to js file'

命名导出的导入方式如下：

import { ... } from 'path to js file'

在上面的例子中，如果我们将 default 添加到

export class Person → export default class person

那么，在新文件中导入它时：

import Person , {promote} from './person.js'

---

相关文章：

• JavaScript ES6 复习 第(1)部分-
• JavaScript ES6 复习 第(2)部分-