JavaScript ES6 多态 字面量增强 解构

JavaScript ES6

JavaScript ES6 多态

多态： 就是指的是不同的数据类型的实体提供统一的接口，或者使用单一的符号来表示多种不同的数据类型

也就是说多态就是实现的是不同的数据类型进行同一种操作，同时表现出不同的行为，这个就是多态的体现

但是需要注意的是继承是多态的前提

class Shape {
    constructor() {}
​
    getArea() {
        console.log("开始计算图形的面积啦~~~")
    }
}
​
// 矩形
class Rectangle extends Shape {
    constructor(width, height) {
        super()
        this._width = width
        this._height = height
    }
    // 重写父类方法
    getArea() {
        return this._width * this._height
    }
}
​
// 圆形
class Circle extends Shape {
    constructor(radius) {
        super()
        this._radius = radius
    }
    // 重写父类方法
    getArea() {
        return this._radius * this._radius * Math.PI
    }
}
​
​
const rectangle = new Rectangle(10, 20)
const circle = new Circle(5)
console.log(`矩形的面积为: ${ rectangle.getArea() }`)  // 矩形的面积为: 200
console.log(`圆形的面积为: ${ circle.getArea() }`)  // 圆形的面积为: 78.53981633974483
​
​
​
// 定义一个函数来实现获取图形的面积
/**
 * 用于实现计算我们的不同的图形的面积的函数，根据我们传入的 shape 的不同实现计算不同的图形操作
 * 根据我们的不同的类型参数实现不同的行为表现: 这个就是我们的多态
 * 但是实际上的哈 JS 中是无法实现这一个效果的，但是文档注释还是可以从一定程度上帮助我们完成
 * @param {Shape} shape
 * @return {undefined} null
 */
function getShapeArea(shape) {
    console.log(shape.getArea())
}
​
getShapeArea(rectangle)  // 200
getShapeArea(circle)  // 78.53981633974483
​
​
/**
 * 在严格意义上的开发模式中，必须实现继承
 * 必须含有父类的引用指向子类的对象: 所以说上面我们书写的文档注释添加的参数的数据类型是 shape
 * 从现在开始习惯书写文档注释，后续的学习 TypeScript 也是很好学习的，只是会多一个泛型编程的理解罢了！！！
 */

在我们的上面的案例中的注释，我谈到了需要书写我们的文档注释以及使用继承来实现 JS 中的多态

这个的话是具有原因的

首先的一点是： 如果书写了文档注释后，实际上编译器是会给我们的代码添加类型限制的（但是不是指定的类型代码也可以执行）

然后使用了继承后的话，实际上我们的子类也是属于我们的父类的，所以说这就从某种意义上实现了不同的数据类型

通过观察我们的编译器的话，编写文档注释后，编译器给我们的代码自动添加的类型限制

我个人而言的话，和我一起完成一个项目的成员的话，我的要求就是：如果写的是 JavaScript ，那么函数必须添加文档注释

写的是 TypeScript 的话，那就随意发挥（因为如果有了长期的 JS 的开发习惯的话，很难向 TS 转变）

JavaScript ES6 字面量增强

ES6 实现了对我们的 对象字面量 进行了增强，称之为 Enhanced object literals（增强对象字面量）

• 属性的简写：Property Shorthand

  • 当一个对象中的键和值的名称都是相同的话，是可以直接书写成一个的

  • const name = "76433"
    const age = 18
    ​
    /**
     * 不使用对象字面量增强来书写的格式
     * @type {{name: string, age: number}}
     */
    const obj = {
        name: name,
        age: age
    }
    ​
    /**
     * 使用了对象属性字面量增强的书写格式
     * @type {{name: string, age: number}}
     */
    const obj01 = {
        name,
        age
    }
    ​
    console.log(obj)  // { name: '76433', age: 18 }
    console.log(obj01)  // { name: '76433', age: 18 }
    ​
    /**
     * 函数中使用对象字面量增强
     * @param {array} args
     * @returns {{message: string, info: string}}
     */
    function foo(...args) {
        const message = "Hello World!"
        const info = "hello JavaScript"
    ​
        return {
            message,
            info
        }
    }
    ​
    const res = foo()
    console.log(res)  // { message: 'Hello World!', info: 'hello JavaScript' }
    ​
    

• 方法的简写：Method Shorthand

  • const name = "76433"
    const age = 18
    ​
    /**
     * 使用了子面量增强的语法
     * @type {{running(), name: string, age: number}}
     */
    const obj = {
        // 属性的简写
        name,
        age,
        // 方法的简写
        running() {
            console.log(this)
        }
    }
    ​
    /**
     * 不使用字面量增强的书写方式
     * @type {{running: obj01.running, name: string, age: number}}
     */
    const obj01 = {
        // 属性的简写
        name,
        age,
    ​
        running: function() {}
    }
    ​
    console.log(obj)  // { name: '76433', age: 18, running: [Function: running] }
    console.log(obj01)  // { name: '76433', age: 18, running: [Function: running] }
    ​
    obj.running()  // { name: '76433', age: 18, running: [Function: running] }
    

• 计算属性名：Computed Property Name

JavaScript ES6 解构 Destructuring

结构就是实现的是我们的ES6 新增的一种从数组或者对象中方便获取数据的方法

• 解构赋值 是一种特殊的语法，其可以实现的是将数组和对象拆包至一系列的变量

• 数组的解构

  • const arr = [1, 2, 3, 4, 5]
    // 通过解构来获取值
    const [x, y, z, ...arr01] = arr
    console.log(x, y, z, arr01)  // 1 2 3 [4, 5]
    ​
    // 添加默认值解构
    const [x1, y2, z2 = “default”, ...arr01] = arr
    

• 对象的解构

  • const obj = {
        name: "76433",
        age: 18
    }
    ​
    // 下面的解构含有了： 重命名，默认值指定
    const {name: destructuring_name = "juwenzhang", age} = obj
    console.log(name, age)  // 76433 18
    

• 注意的是：

  • 数组的解构具有严格的顺序问题
  • 但是对象的话就没有严格的顺序问题，其取值是实现的是根据键来进行的取值

  • /**
     * 使用解构接收函数参数
     * @param x
     * @param y
     * @param {Array} args
     */
    function foo({ x, y }, ...args) {
        console.log(x, y)
    }
    ​
    foo({ x: 1, y: 1 })  // 1 1
    foo({ x: "hello world", y: "hello JavaScript" })  // hello world hello JavaScript