ECMAScript6

最新推荐文章于 2022-06-02 11:23:14 发布

Always_Love

最新推荐文章于 2022-06-02 11:23:14 发布

阅读量209

点赞数

分类专栏： ES6 JS 入门

本文链接：https://blog.csdn.net/Always_Love/article/details/104963253

版权

入门同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

ES6

1 篇文章 0 订阅

订阅专栏

本文深入解析ECMAScript 6（ES6）的关键特性和应用，包括let与const变量声明、解构赋值、函数扩展、数组与对象的增强、Promise异步编程、async/await函数、Generator函数、类与继承、模块导入导出等，旨在帮助读者掌握ES6的高级功能。

摘要由CSDN通过智能技术生成

ECMAScript6简称ES6，和ECMAScript5简称ES5一样，代表了不同的标准。
es6的语法接近于后端语法，而另一种脚本语言TypeScript更接近后端。

一、let和const
let ：
1、let声明的变量只在 let 命令所在的代码块内有效。
2、let不能重复声明。
3、不存在变量提升。

const ：声明一个只读的常量，一旦声明，常量的值就不能改变。意味着，一旦声明必须初始化，否则会报错。

二、解构赋值
解构赋值是对赋值运算符的扩展。

对数组模型的解构：
1、基本
let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

2、可忽略
let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

3、不完全解构
let [a = 1, b] = []; // a = 1, b = undefined

4、剩余运算符
let [a, …b] = [1, 2, 3];
//a = 1
//b = [2, 3]

5、字符串等
在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据。
let [a, b, c, d, e] = ‘hello’;
// a = ‘h’
// b = ‘e’
// c = ‘l’
// d = ‘l’
// e = ‘o’

6、解构默认值
let [a = 2] = [undefined]; // a = 2

7、当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。
let [a = 3, b = a] = []; // a = 3, b = 3
let [a = 3, b = a] = [1]; // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

a 与 b 匹配结果为 undefined ，触发默认值：a = 3; b = a =3
a 正常解构赋值，匹配结果：a = 1，b 匹配结果 undefined ，触发默认值：b = a =1
a 与 b 正常解构赋值，匹配结果：a = 1，b = 2

对象模型的解构：
1、基本
let { foo, bar } = { foo: ‘aaa’, bar: ‘bbb’ };
// foo = ‘aaa’
// bar = ‘bbb’

let { baz : foo } = { baz : ‘ddd’ };
// foo = ‘ddd’

2、可嵌套可忽略
let obj = {p: [‘hello’, {y: ‘world’}] };
let {p: [x, { y }] } = obj;
// x = ‘hello’
// y = ‘world’
let obj = {p: [‘hello’, {y: ‘world’}] };
let {p: [x, { }] } = obj;
// x = ‘hello’

3、不完全解构
let obj = {p: [{y: ‘world’}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = ‘world’

4、剩余运算符
let {a, b, …rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

5、解构默认值
let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

三、函数扩展
函数默认值的问题

function method(a, b) {
             console.log(a, b);
             }

             method(1, 2);

给函数的形参带入了默认值的问题

function method(a="a", b=2) {
console.log(a, b);
}
method();

函数传参合解构赋值连用

function method({a,b=2}) {
                console.log(a, b);
            }

            method({});
            method({a: 1, b: 3});

扩展符合函数的使用

function method([a,...b]){
                console.log(a,b);
            }
            method([1,2,3,4,5,6]);

箭头函数：

let method=(val)=>val;
            console.log(method(1));

如果箭头函数返回对象返回值上添加（）

let fun=()=>({name:1,age:20});
            console.log(fun());

            let fun1=()=>[1,2,3];
            console.log(fun1());

            let a=["a","b","c","d"];
            //map 映射
          
            let b=a.map((val,index)=>val+index);
            console.log(b);

在使用性箭头函数的时候一定要注意内部的this 指针问题，因为箭头函数保持上下文this一致，内部this 和外部this一致。

四、数组的扩展
扩展运算符 … （拆开数组）

console.log(...[1,2,3,4,5]);
         //扩展运算符和函数的使用
         function fun(array,...item){
         array.push(...item);
         }
         let array=[];

         fun(array,...[1,2,3,4,5]);
         console.log(array);

扩展运算符替换apply args 数组型

function f1(a,b,c){
         console.log(a,b,c);
         }
         let m=[1,2,3];
         //f1.apply(null,m);
         f1(...m);

扩展运算符复制数组（修改其中一个数组另一个数组也会发生变化）

let a=[1,2,3];
         let b=a;
         b[0]="a";
         console.log(b,a);
         //修改其中一个数组  另一个数组也会发生变化

扩展运算符复制数组（修改其中一个另一个不会发生变化）

let a=[1,2,3];
         let b= [...a];
         b[0]="a";
         console.log(a, b);

扩展运算符合并数组

let a=[1,2];
         let b=[3,4];
         let c= [...a,...b];
         console.log(c);

数组的扩展方法 Array.from(); 将类数组对象转化为正真的数组

let a={
         0:"a",
         1:"b",
         length:2
         }
         console.log(Array.from(a));

数组的扩展方法 Array.of() 将一组值转化为数组

console.log(Array.of(1, 2, 3, 4, 5));

find() 找出数组里面满足条件的第一个成员直接返回 findIndex 找出符合条件的第一个值的索引如果没有则返回-1 扩展的数组方法

let a=[1,2,3,4,5];
         console.log(a.find((n)=>{
         return n%2==0;
         }));

         console.log(a.findIndex((value,index,arr)=>{
         return value%6==0;
         }));

五、对象的扩展
es6 允许直接在对象内部声明属性和方法

let obj={
         name:"",
         sleep(){
         console.log("我在睡觉");
         }
         };
         obj.sleep();

es6 允许通过字面量定义对象的属性

let _sex="Sex";
         let a="age";
         let b="Now";
         let obj={
         name:"毛豆",
         [_sex]:"男",
         [a+b]:20
         };
         console.log(obj);
         console.log(obj['name']);
         console.log(obj[_sex]);
         console.log(obj[a+b]);

es6 扩展的：
super 指向当前对象的原型对象
this 指向当前对象
super 指向当前对象的原型对象，只能写在对象的方法内部，不能直接写在属相上和方法的返回值上

let proto={
         sleep(){
         console.log("睡觉");
         }
         }
         let person={
         name:"张三",
         logproto(){
         super.sleep();
         }
         }
         //error
         //person.prototype=proto;
         //设置原型对象
         Object.setPrototypeOf(person,proto);
         person.logproto()

Object.assign() 合并对象一定是可枚举属性

{
         let ob1={
         name:"张三"
         };
         let ob2={
         name:"李四",
         age:20
         };
         console.log(Object.assign({}, ob1, ob2));
         }

Object.assign 可以复制对象
注意对象属性上的引用

let obj={a:1,b:2,c:{m:2}};
         let b=Object.assign({},obj);
         obj.a=10;
         obj.c.m=30;
         console.log(b,obj);

下面的方法获取取决于对象属性的可枚举性 true false该属性会被忽略
Object.keys 获取对象的所有的键
Object.values 获取的对象的所有键值
Object.entries 获取对象的键值返回是一个数组

let obj = {
            name: "1",
            sex: "2"
        };
        let ob = {
            eat()
        {
            console.log("吃饭");
        }
    }
    console.log(Object.keys(obj));
    console.log(Object.values(obj));
    console.log(Object.entries(obj));

    //__proto__ 获取当前对象的原型对象
    console.log(obj.__proto__);
    //设置对象的原型对象
    Object.setPrototypeOf(obj, ob);
    console.log(obj.__proto__);
    //获取对象的原型对象的
    console.log(Object.getPrototypeOf(obj));


    //Object.is()  严格判断两个对象相等   类似===
    let a = {};
    let b = {};
    let c = a;
    console.log(Object.is(1, 1));//true
    console.log(Object.is(null, null)); //true
    console.log(Object.is("1", 1));//false
    console.log(Object.is([], []));//false
    console.log(Object.is({}, {}));//false
    console.log(Object.is(a, c));
    //true

六、Set Map 数据结构
1、set
Set 里面存储的是指并且值是唯一的没有重复的
Set 本身是一个构造函数
使用的时候 new
Set 的构造函数constructor 是自己的本身
Size 属性返回的是Set对象里面的成员变量
add 方法将值添加到Set里面
delete 方法删除某个值返回true false
has 方法检测是否有某个值返回true false
clear 方法清除所有的成员没有返回值的

console.log(Set.prototype.constructor); //构造函数

         //实例化Set
         let set=new Set();
         set.add(1);
         set.add(2);
         set.add(3);
         set.add(4);
         set.add(4);//这个添加的相同的值不会再出现 使用的是set的特性

         console.log(set.delete(2));//true
         console.log(set.has(1));//true
         set.clear();
         console.log(set);
         console.log(set.size);//返回的是长度
         //数组的去重
         let arr=[1,2,3,2,4,5,4,4,6];
         let set1=new Set(arr);
         console.log(set1);
         //遍历set 对象
         for(let val of set1)
         {
         console.log(val);
         }

         //将set集合转换为数组
         //console.log(Array.from(set1));
         //将set集合拆为数组
         let [...array]=[...set1];
         console.log(array);
         //set 和对象的变向使用
         let obj=new Set();
         obj.add("name");
         console.log(obj);
         console.log(obj.has("name"));


         //针对set对象遍历的方法
         console.log(Set.prototype);
         //keys   返回set对象所有的键
         let a=[1,2,3,4];
         /!* let o={
         name:"张三"
         }  object 对象不能直接存储  set*!/
         let s=new Set(a);
         //在Set对象里面输出的keys 和values 值一样
         console.log(s.keys());
         console.log(s.values());
         console.log(...s.entries());
         //foreach  遍历set对象
         s.forEach((value,key)=>{
         console.log(value, key);
         });

set 对象里面存储数组不能直接存储键：值对象
WeakSet 类似Set 也是唯一的它里面可以存储数组和对象
WeakSet 成员必须是一个对象

 let a1 = [1, 1, 2, 2, 3];
  //一维数组赋值直接报错   原因是一维数组的成员不是一个对象

写的代码可以执行页面刷新weakset 数组可能为空
weakset 里面的值可能会随时消失

 let a2=[[1,2],[3,4],[5,6]];
         let ws=new WeakSet(a2);
         console.log(ws);

has delete add 方法

let obj = {
            name: "张三"
        };
        let ws = new WeakSet();
        ws.add(obj);
        console.log(ws);
        console.log(ws.has(obj));

        //WeakSet  存储的是对象   对象会不定时消失   好处是不会造成内存的泄露

2、map
Map 数据结构存储的是键值对
Map 构造函数
size 返回map的长度的
set 设置Map结构中的值的
get 获取Map结构中的值
has 检测键是否存在返回true/false
delete 删除键返回true/false
clear 全部清除

//let arr=[1,2,3,4];  不能直接写数组
let obj={
            name:"张三",
            sex:"男"
        };

Map() 构造函数不传参

let map=new Map();
        map.set("array",[1,2,3,4,5]);
        map.set("object",{name:"张三",age:20});
        //Map  结构中设置相同的键值的时候会覆盖
        //map.set("array",[[1,2],[3,4]]);
        console.log(map.get("array"));
        console.log(map.get("object"));

        console.log(map.size);
        console.log(map.has("object"));
        console.log(map.delete("array"));
        map.clear();
        console.log(map);

map 结构的遍历方法：
keys 方法返回map中的所有的键可以拆为数组
values 方法返回map中的所有的值可以拆为数组
entries 方法返回map中的所有的键值对可以拆为数组

let map=new Map();
        map.set("h1",1);
        map.set("h2","a");
        map.set("h3","b");
        map.set("h4",true);
        map.set("h5",null);
        console.log(map);
        console.log(...map.keys());
        console.log(...map.values());
        console.log(...map.entries());
        map.forEach((value,key)=>{
            console.log(value, key);
        });

        for(let key of map.keys())
        {
            console.log(key);
            console.log(map.get(key));
        }
        for(let val of map.entries())
        {
            console.log(val);
            console.log(map.get(val[0]));
        }

可以直接放二维数组在里面以为不行需要键和值

let map=new Map([[1,2],[2,3]]);
        console.log(map);

对象型写法

let map=new Map([["maodou",{name:1,sex:2}]]);
        console.log(map);

Map 转换为对象

let map=new Map();
        map.set("a1","a");
        map.set("a2","b");
        map.set("a3","c");
        map.set("a4","d");

        //let obj=Object.create({});
        let obj={};
        for(let key of map.keys())
        {
            obj[key]=map.get(key);
        }
        console.log(JSON.stringify(obj));

七、Promise
Promise 异步编程
在原生js写过函数的回调函数事件异步编程
Promise 是一个容器里面放的是未来或者异步的即将发生的东西
Promise 对象的三大状态不收外界影响在内部的异步编程的结果会影响
Promise 对象的使用也是一个构造函数 new

let promise = new Promise(function (resolve, reject) {
            //resolve  成功   在异步操作成功的时候调用
            //reject 失败     在异步操作失败的时候调用
            let status = false;
            let data = "abc";
            if (status) {
                resolve(data);
            }
            else {
                let error = new Error("异步操作失败！");
                reject(error);
            }
        });

        //promise对象的使用
        //then()   两个回调函数   第一个是resolve时候调用  第二个是reject时候调用
        promise.then(function (result) {
            //success
            console.log(result);
        }, function (error) {
            //error
            console.log(error);
        });


        //模拟异步编程
        let sendajax = function (ms) {
            return new Promise(function (resolve, reject) {
                try {
                    setTimeout(resolve, ms, "参数");
                }
                catch (e) {
                    reject(e)
                }
                finally {
                    console.log("处理完成");
                }
            });
        }
        sendajax(1000).then(function (result) {
            console.log(result);
        }, function (err) {
            console.log(err);
        });

        //异步加载图片
        let loadImage = function (src) {
            //实例化图片对象
            return new Promise(function (resolve, reject) {
                let img = new Image();
                img.onload = function () {
                    resolve(img);
                }
                img.onerror = function () {
                    reject("加载失败！");
                }
                img.src = src;
            });
        }
        loadImage("https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3173584241,3533290860&fm=26&gp=0.jpg").then(function (img) {
            console.log(img);
        }, function (error) {
            console.log(error);
        });

        //promise 写ajax
        let promiseAjax = new Promise(function (resolve, reject) {
            $.ajax({
                method: "get",
                data: {id: "101051107"},
                url: "https://api.help.bj.cn/apis/weather/",
                success: function (res) {
                    resolve(res);
                },
                error: function (error) {
                    reject(error)
                }
            });
        });
        promiseAjax.then(function (res) {
            console.log(res);
        }, function (error) {
            console.log(error);
        })

        //把then方法函数参数 分开写
        let promise2 = new Promise(function (resolve, reject) {
            if (false) {
                resolve("成功");
            }
            else {
                reject("失败");
            }
        });
        promise2.then(function (res) {
            //success
            console.log(res);
        }).catch(function (err) {
            console.log(err);
        });

then 方法存在原型对象上面 then方法返回的是一个promise对象和之前的不一致还可以继续点then

myPromise.prototype.then = function (onResolved, onRejected) {
            let _this = this;
            if (_this.status == 'resolved') {
                return new myPromise(function (resolved, rejected) {
                    let res = onResolved(_this.data)
                    if (res instanceof myPromise) {  //判断res 是不是 myPromise的实例
                        res.then(resolved, rejected)
                    } else {
                        resolved(res);
                    }
                })
            }
            if (_this.status == 'rejected') {
                return new myPromise(function (resolved, rejected) {
                    let res = onResolved(_this.data)
                    if (res instanceof myPromise) {  //判断res 是不是 myPromise的实例
                        res.then(resolved, rejected)
                    } else {
                        resolved(res);
                    }
                })
            }
            if (_this.status == 'pending') {
                return new myPromise(function (resolved, rejected) {
                    _this.resolvedArr.push((function (onResolved) {
                        return function () {
                            var res = onResolved(_this.data)
                            if (res instanceof myPromise) {
                                res.then(resolved, rejected)
                            } else {
                                resolved(res)
                            }
                        }
                    })(onResolved))
                    _this.rejectedArr.push((function (onRejected) {
                        return function () {
                            var res = onRejected(_this.data)
                            if (res instanceof myPromise) {
                                res.then(resolved, rejected)
                            } else {
                                resolved(res)
                            }
                        }
                    })(onRejected))
                })
            }
        }

连续点then

 let promiseinfo=new Promise(function (resolve,reject){
            let data={
                type:"json",
                json:[
                    {name:"张三"},
                    {name:"李四"},
                    {name:"王五"}
                ]
            };
            resolve(data);
        });
        promiseinfo.then(function (res){
            return res.json;
        }).then(function(res){
            console.log(res);
        }).finally(function (){
            console.log("不管什么状态都会执行");
        });

        //all方法  将多个promise 整合为一个对象  接收一个数组
        let p1=new Promise(function (resolve,reject){
            resolve("a");
        });
        let p2=new Promise(function (resolve,reject){
            resolve("b");
        });
        p1.then(function (res){
            console.log(res);
        });
        p2.then(function (res){
            console.log(res);
        });

        Promise.all([p1,p2]).then(function (res){
            console.log(res);
        });

        //Promise.resolve()   将现有的对象转换为promise对象
        let pro=Promise.resolve([1,2,3]);
        pro.then(function (res){
            console.log(res);
        });

模拟ajax请求：

let method = function () {
        //模拟ajax 请求
        return new Promise(function (resolve, reject) {
            //到底成功环视失败取决什么东西   主要是代码的执行
            //请求数据一般都有模拟的时间
            //1秒之后请求成功
            //成功还是失败取决返回的success  error
            let s = false;//模拟ajax  成功
            setTimeout(function () {
                if (s) {
                    resolve("成功")
                }
                else {
                    reject("失败");
                }

            }, 1000);
            $.ajax({
                success: function () {
                    resolve("成功")
                },
                error: function () {
                    reject("失败")
                }
            });
        });
    }
    method().then(function (res) {
        console.log(res);
    }).catch(function (error) {
        console.log(error);
    });

八、async 函数
async 异步函数让异步编程更简单
语法：
构建async函数
内部等待执行多个promise对象执行
将多个promise对象进行包装
返回的是一个promise对象
await 等待

//内置器
function getData(str) {
         return str;
         }

         async function method() {
         let p1 = await getData("毛豆");
         let p2 = await getData("张三");
         return {
         promise1:p1,
         promise2:p2
         };
         }

         //异步函数的执行方式和函数一致
         method().then(function (res){
         console.log(res);
         }).catch(function (error){
         console.log(error);
         });

async 函数里面等待多个promise对象执行

let promethod = function (ms) {
         return new Promise(function (resolve, reject) {
         setTimeout(resolve, ms, "成功");
         });
         }
         async function method() {
         console.log("开始");
         let p1 = await promethod(1000);
         console.log("执行完一个");
         let p2 = await promethod(1500);
         console.log("执行完二个");
         return {
         pro1: p1,
         pro2: p2
         }
         }

         method().then(function (res) {
         console.log(res);
         }).catch(function (err) {
         console.log(err);
         });

async 里面的await连用

function addNum(num) {
         return new Promise(function (resolve, reject) {
         if (true) {
         resolve(num * 100);
         }
         });
         }

         async function method() {
         let p1 = await new Promise(function (resolve, reject) {
         if (false) {
         resolve(100);
         }
         else{
         reject("程序失败");
         }
         });
         let p2 = await addNum(p1);
         return p2;
         }
         method().then(function (res){
         console.log(res);
         }).catch(function (err){
         console.log(err);
         }).finally(function (){
         console.log("在这里写后续");
         });

抛异常

async function method() {
            try {
                let p1 = await new Promise();
                let p2 = await new Promise();
                return p2;
            }
            catch (e) {
                throw e;
            } finally {

            }
        }

async es7 新增语法

async function method() {
            try {
                let aw1=await new Promise(function (resolve,reject){
                    //promise  内部返回reject
                    if(false)
                    {
                        setTimeout(resolve,1000,"数据")
                    }
                    else{
                        reject("失败");
                    }
                });
                let aw2=await (function (params){
                    return new Promise(function (resolve,reject){
                        setTimeout(function (){
                            resolve("获取"+params);
                        },1000)
                    });
                })(aw1);
                return aw2;
            }
            catch (e) {
               throw new Error(e);
            }
            finally{
                console.log("抓到异常最后的处理代码");
            }
        }
        method().then(function (res){
            console.log(res);
        }).catch(function (err){
            console.log(err);
        }).finally(function (){
            console.log("最终执行的");
        });

九、Generator 函数
Generator 提供异步编程的解决方案
Generator 异步函数的写法
标注 *

function * method(){
         yield "数据1";
         yield "数据2";
         yield "数据3"
         }
         let generatorfun=method();//执行该函数的时候   函数并不执行   只是返回了该函数的状态
         console.log(generatorfun);
         //执行  调用便利器方法next  移动方法内部的指针
         //next  返回一个对象  value  指yield表达式的值   done  false 指遍历还没有结束
         console.log(generatorfun.next());
         console.log(generatorfun.next());
         console.log(generatorfun.next());
         console.log(generatorfun.next());//{value: undefined, done: true}  遍历结束了

Generator 函数返回的一个遍历器就可以遍历

function *method(){
         yield 1;
         yield 2;
         yield 3;
         yield 4;
         }
         for(let num of method())
         {
         console.log(num);
         }

如果Generator 函数内部yield表达式内部有yield 先执行内部的yield

function* method(x, y)
         {
         yield x + (yield x + y);
         }
         let meth = method(2, 3);
         console.log(meth.next().value);//value 5 done false
         console.log(meth.next());//  value  NAN  done  false
         console.log(meth.next());

遍历器内部的原理

function method(obj) {
            let startIndex = 0;
            let object=Array.from(obj);
            return {
                next: function () {
                    if (startIndex < object.length) {
                        return {value: object[startIndex++], done: false}
                    }
                    else {
                        return {value: undefined, done: true};
                    }
                }
            }
        }

        let array=[1,2,3,4,5];
        let obj=[{
            name:"张三",
            sex:"女",
            age:20
        },{
            name:"张三",
            sex:"女",
            age:20
        },{
            name:"张三",
            sex:"女",
            age:20
        }];
        let meth=method(obj);
        console.log(meth.next());
        console.log(meth.next());
        console.log(meth.next());
        console.log(meth.next());

十、Class
Class 类的语法
class 类的关键字
以前的写法：

function method() {
     this.name = "1";
     this.sleep = function () {

     }
     }
     method.prototype = {
     constructor: method,
     eat: function () {

     }
     }

类的写法
类的写法和原型对象更加清楚更像面向对象编程
使用类 new
类的构造函数实在类的实例化的时候执行的
在类里面封装方法直接写就可以
class 类里面写的代码在类对象的_proto_ 原型上面
类里面执行方法直接对象点（对象点的方法为非静态方法）

class person{
     //类的构造函数
     constructor(){
     console.log("我是构造函数");
     }
     toString(){
     console.log("tostring");
     }
     }

     let per=new person();
     per.toString();

     console.log(per.__proto__===person.prototype);//true
     console.log(per.constructor==person.prototype.constructor);//true
     //给类上添加方法  Object.assign()
     Object.assign(person.prototype,{
     toValue:function (){
     console.log("输出值");
     }
     })
     console.log(per);

类里面封装属性在构造里面写this.*** 或者直接在class 里面直接写属性是一样的。
类里面的this 指针指向当前的类对象。
类的传参问题：
A class may only have one constructor 记住前端的类智能有一个构造函数

 class person {
     //这里是声明类的成员变量
     width = 100;
     height = 200;

     constructor(x, y) {
     console.log("我是有参构造");
     this.add = x + y;
     }

     toValue() {
     console.log(this.add);
     }
     }
     //传递参数为构造函数的形参
     let per = new person(2, 4);
     per.toValue();
     console.log(per);

类里面的getter setter 访问器
拦截属性的存取行为的

class person {
     name = null;
     age = null;
     sex = null;

     constructor(name, age, sex) {
     this.name = name;
     this.age = age;
     this.sex = sex;
     }

     //getter  setter 访问器
     get _tel() {
     //拦截获取属性的行为   tel
     console.log("获取");
     return this.tel;
     }

     set _tel(tel) {
     //拦截设置属性的行为   tel
     console.log("设置");
     this.tel = tel;
     }
     }

     //class  类里面的  get  set 访问器  作用是在设置属性的时候  用访问器拦截该属性的行为

     let per = new person("毛豆", 20, "男");
     per._tel = 110;
     console.log(per);

字面量声明类的方法
属性表达式写法

let method="SendData";
     class person{
     constructor(){

     }
     [method](){

     }
     }

     let per=new person();
     console.log(per);
     *

类的表达式
下面的类名称可以省略 me

let person =class  me {
     constructor() {

     }
     }
     console.log(new person()    );

类里面不存在提升

new person();
     class person{

     }

先有类在实例
类的静态方法是在方法前面添加static 关键字
类的静态属性 static

let method="getWork";
     class Person{
     //静态属性
     static job="学习";
     //声明非静态成员变量
     name=null
     sex=null
     age=null
     //构造函数   有参或者无参
     constructor(name,age,sex){
     this.name=name;
     this.age=age;
     this.sex=sex;
     }
     //下面是静态方法
     static goHome(){
     console.log("静态方法");
     }
     //下面是非静态方法
     toString(){

     }
     toValue(){

     }
     //下面是get set 访问器
     get _tel(){
     //用该方法获取 拦截tel属性获取行为
     return this._tel;
     }
     set _tel(t){
     //用该方法设置 拦截tel属性设置行为
     this.tel=t;
     }
     //属性表达式
     [method](){

     }

     }

     //实例化对象
     let per=new Person("毛豆",20,"男");
     console.log(per);
     //class的非静态成员变量和非静态方法  是由类对象点的
     per.toValue();
     per.name
     //静态方法是 类名称点
     Person.goHome();
     //静态方法的特点是不会被实例继承
     //静态的属性 类名称点
     console.log(Person.job);

     //记住 非静态的 全部类对象点   静态的类名称点

类里面的私有方法和私有属性 es6 并没有提供只是认为变通的
私有的方法自己可以区别

class Person {
     //公有方法
     toValue() {

     }

     //私有方法
     _todata() {

     }
     }
     function toData() {
     cosnole.log(this);
     }
     class PersonOne {
     constructor() {
     toData.call(this)
     }

     //公有方法
     toValue() {

     }
     }

私有属性 es6 提供的方案是在属性前面添加#

class Person {
        //私有属性
    #count = 0

        constructor() {
            this.#count++;
        }

        toValue() {
            console.log(this.#count
        )
            ;
        }
    }
    let per = new Person();
    per.toValue();

十一、class继承
之前js 通过修改原型链实现继承，es6里面通过extends 实现继承，相比之前更清晰、方便。
父

class Person{
        name="";
        sex="";
        age="";
        static clothes="校服";
        constructor(name,sex,age){
            this.name=name;
            this.sex=sex;
            this.age=age;
        }
        toString(){
            console.log(this.name+"是学生");
        }
    }

子
子类继承父类之后继承父类的所有的属性和方法

class Student extends Person{
        constructor(name,sex,age){
            //super 函数使用方式
            super(name,sex,age);//super 指向父类的构造
            //super  返回的是子类的实例
            //Person.prototype.constructor.call(this);

            //super  当做对象使用 指向的是父类的原型对象   在静态方法当中指向父类

            //super当对象使用
            super.toString();
        }
        //静态方法
        static getClothes(){
            //  这里的super  指向的是父类
            console.log(super.clothes);
        }
        toJob(){

        }
    }

实例化学生

let stu=new Student("张三","男",28);
    console.log(stu);
    Student.getClothes();
    //
    console.log(Student.clothes);

    console.log(stu.__proto__);//子类的__proto__属性，表示构造函数的继承，总是指向父类。
    console.log(Student.prototype.__proto__);//指向的是父类的原型对象

十二、module
script 加载模块代码的时候写 type module
例如：

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="module" src=""></script>
</head>

ES6 自动采用严格模式
静态页面这样写不识别
引入模块
export default 暴露方式

import User from './javascript/UserInfo.js';
    import One from './javascript/one.js';
    //下面这种方式  export  暴露方式
    import {sendData,json} from './javascript/getData.js';
    console.log(User.username);
    console.log(User.userpwd);
    console.log(sendData);
    console.log(json);
    console.log(One);
    import {Person} from './javascript/class.js'
    console.log(Person);