es6（四）

码龄5年

关注

原创最新推荐文章于 2023-10-24 22:48:28 发布 245 阅读

JavaScript数据类型本篇介绍的JS的数据类型，以及基础应用，如数据类转换、数据类型判断，以及一些通用的数据类型检测方法。阅读详情

添加实例方法

    class Person {
        constructor(name,age) {
            this.name=name;
            this.age=age;
        }
        //定义方法
        say() {
            console.log("大家好，我叫："+this.name+"，今年："+this.age+"岁");
        }
        travel(){
            console.log("坐着飞机去巴厘岛");
        }
    }

添加静态方法

静态成员：静态属性、静态方法
静态属性：通过类本身来访问：Person.maxAge
静态方法：通过类本身来访问的一个方法：Person.born();

    class Animal {
        constructor(){

        }
        //这就是一个静态方法了
        static born(){
            console.log("小呆萌出生了")
        }
    }
    //访问静态方法
    Animal.born();

类的继承

    //父类
    class Person {
        constructor(name){
            this.name=name;
        }
    }
    //Student类继承自Person类
    class  Student  extends Person {
        //构造方法
        constructor(name,grade){
            //规定：必须调用父类构造方法，如果不调用就会报错
            super(name);    
            //调用父类构造方法，从而给子类的实例添加了name属性

            this.grade=grade;
        }
    }

[1,3,5].map(function(value,index){

})

[1,3,5].map((value,index)=>{

})

//以前变量和字符串拼接，现在用模板字符串

es6的新语法

个人建议：不要去试想着一下子全部把之前的代码习惯变成es6的方式
- 而是今年学会了模板字符串，把今天项目用到的所有字符串拼接都换成模板字符串
- 过了几天学会了箭头函数，把当天项目里面的所有用到的匿名函数都换成箭头函数

预习作业：通过MDN学习Object.defineProperty()的用法

module -->放到后面的模块化课程中讲解

基本用法

导出模块：

    //common.js
    export default { name:"abc" }

导入模块：

    //b.js
    import common from "common.js"

    console.log( common.name ) //"abc"

模块有多个导出

    //person.js
    export const jim = { country :"France" }
    export const tony = { color:"gray" }
    //默认的导出
    export default { name:"abc" }

    //index.js
    import person , { jim , tony } from "person.js"

    //person：{ name:"abc" }
    //jim：{ country :"France" }
    //tony：{ color:"gray" }

模块导入导出取别名

            js
    //person.js
    export const tony = { color:"gray" }
    export { tony as Tony }

    //index.js
    import { Tony } from "person.js"
    import { Tony as man} from "person.js"

    console.log(man)    //{ color:"gray" }