es6新特性_基本语法

嘎嘎_膈

已于 2023-05-09 23:04:12 修改

阅读量126

点赞数

文章标签： es6 javascript 前端

于 2023-05-08 22:18:14 首次发布

本文链接：https://blog.csdn.net/wanananhh/article/details/130568689

版权

1. ES_Test01.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //1.let声明变量
        let a;
        let b = 10, c = "hello", d = [];
        //1.1 变量不能重复声明
        let e = 1;
        //let e=2;
        //1.2 块级作用域，while,for,{},if，...中的都为块级作用域
        {
            let gir = "女";
        }
        //console.log(gir);//报错
        //1.3 不存在变量提升
        //console.log(boy);
        let boy = "男";
        //1.4 不影响作用域链
        {
            let school = "教室";
            function sc() {
                console.log(school);
            }
            sc();
        }

        //2.const声明常量
        const SCHOOL = "XXX学校";
        //2.1 一定需要赋初值
        //const A; //报错
        //2.2 定义常量需要大写                
        //const SCHOOL_SC="XXX学校";
        //2.3 常量值不可修改
        //SCHOOL="YYY学校";
        //console.log(SCHOOL);
        //2.4 块级作用域
        {
            const HOST = 385;
        }
        //console.log(HOST);
        //2.5 const修改数组或者对象元素的值，不算对常量的修改，不会报错，因为数组和对象中的常量为地址值
        const TEAM = ['UZi', 'MLXG'];
        TEAM.push('Ming');
        TEAM[0] = 'UZI';
        console.log(TEAM.toString());

        //3.ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值=》结构赋值
        //3.1 数组的结构赋值
        const APP = ['微信', '抖音'];
        let [WeChat, Trill] = APP;
        console.log(WeChat + "=>" + Trill);
        //3.2 对象的结构赋值
        const NEUSOFT = {
            name: '微博',
            year: 2000,
            funName: function () {
                console.log("我是函数");
            }
        }
        let { name, year, funName } = NEUSOFT;    //对象结构赋值的名字和对象的名字需要匹配，数组不需要
        console.log(name);
        console.log(year);
        funName();  //结构赋值经常用，弃用NEUSOFT.funName()调用方式

        //4.ES6中引入 [` `] 声明字符串----模板字符串
        //4.1 变量声明
        let str = `hello word`;
        console.log(str);
        //4.2 内容中可以直接出现换行符，而''和""不可以
        let strurli = `<ul>
                        <li>沈腾</li>            
                        <li>玛丽</li>
                        <li>魏翔</li>
                        <li>艾伦</li>        
                        <li>常远</li>
                    </ul>`;
        console.log(strurli);
        //4.3 支持变量拼接方式
        let lovest = '魏翔';
        let out = `${lovest}是开心麻花的演员`;
        console.log(out);

        //5.ES6里里面允许在大括号里面，直接写入变量和函数，作为对象的属性
        let namestr = "变量名";
        let chage = function () {
            console.log("我是chage函数");
        }
        let obj = {
            namestr,
            chage,
            fun() {
                console.log("我是ES6中的特殊书写方式");
            }
        }
        console.log(`名字为${obj.namestr}`);
        obj.chage();
        obj.fun();

        //6.ES6允许使用箭头函数
        //6.1 基本使用
        let fun = (a, b) => {
            return a + b;
        }
        let result = fun(1, 1);
        console.log(result);
        //6.2 this是静态的，this始终指向函数声明所在作用域下的this的值=》window；普通函数的this为当前对象
        window.name1 = "hello";
        let objname = {
            name1: "word"
        }
        console.log(this.name1);
        let func = () => {
            console.log(this.name1);
        }
        func();
        func.call(objname); //可以改变this的值，方法名.call()方法
        //6.3 箭头函数不能用作构造函数实例化对象
        // let Person=(name,age)=>{
        //     this.name1=name;
        //     this.age=age;
        // }
        // let p=new Person("小王",23);
        // console.log(p);
        //6.4 箭头函数中不能使用argumnents变量
        // let fn=()=>{
        //     console.log(arguments);
        // }
        // fn(1,2,3);
        //6.5 箭头函数的简写
        //6.5.1 省略小括号
        let add = n => {
            return n + n;
        }
        console.log(add(1));
        //6.5.2 省略花括号，当代码体只有一条语句的时候,return也必须省略
        let del = n => n - 1;
        console.log(del(2));
        //注意：箭头函数不适合与this有关的回调，事件回调，不适合做对象的方法但不是不能
        let objfun = {
            name: 'helloword',
            funnane: function () {
                return this.name; //为当前对象的name属性值
            },
            getArrow: () => {
                return this.name; //为window的name属性值
            }
        }

        //7.ES6允许给函数参数赋值初始值
        //7.1 形参初始值，具有默认值的参数，一般位置要靠后，有值传过来就用传递而来值，没有值传递过来就用默认值
        let adddel = function (a, b, c = 10) {
            console.log(a + b + c);
        }
        adddel(1, 2, 3);
        //7.2 参数默认值与结构赋值结合使用
        let addupdate = function ({ host = '127.0.0.1', root, password, port }) {
            console.log(`主机名:${host}\n端口号:${port}\n用户名:${root}\n密码:${password}`);
        }
        addupdate({
            host: 'localhost',
            root: 'root',
            password: '12345678',
            port: 3306
        })

        //8.ES6引入rest参数，用来代替ES5中的arguments
        function es5() {
            console.log(arguments); //对一个arguments对象的参数序列
        }
        es5(1, 2, 3, 4);
        //...args必须放参数的最后 function es6(a,b,c,...args){}
        function es6(...args) {
            console.log(args);  //args的返回值是一个数组，可以用数组相关的api
        }
        es6(5, 6, 7, 8);

        //9.扩展运算符[...],作用为将[数组]转换为逗号分隔的[参数序列]又叫伪数组
        const tfboys = ['易烊千玺', '王俊凯', '王源'];
        function springFestivalGala() {
            console.log(arguments); //参数序列，伪数组:'易烊千玺','王俊凯','王源'
        }
        springFestivalGala(...tfboys); //springFestivalGala('易烊千玺','王俊凯','王源')

        //10.扩展运算符的应用场景
        //10.1 数组的合并，es5时候使用concat()函数实现
        const kuaizi = ['王太利', '肖央'];
        const fenghuang = ['曾毅', '玲花'];
        const zuixuanxiaoopingguo = [...kuaizi, ...fenghuang];
        console.log(zuixuanxiaoopingguo);
        //10.2 数组的克隆
        const sanzhihua = ['E', 'G', 'M'];
        const sanyecao = [...sanzhihua];
        console.log(sanyecao);
        //10.3 将伪数组转换为真数组
        function tyboys(...args) {
            console.log(arguments);
            const args_new = [...arguments];
            console.log(args_new);
        }
        tyboys(1, 2, 3, 4, 5, 6);

        //11.Symbol是新的原始数组类型，表示独一无二的值，它是JavaScript的第七种数据类型，类似于string字符串的数组类型
        //Symbol得值是唯一的，用来解决命名冲突的问题；
        //Symbol值不能进行数据计算,不能进行比较
        //Symbol定义的属性不能用for...in遍历，但可以使用Reflect.ownKeys来获取对象的所有键名
        //11.1 创建Symbol
        let s1 = Symbol();
        console.log(s1);
        let s2 = Symbol('哈哈'); //传入参数有点类似于注释的作用，不是定义的值
        console.log(s2);
        let s3 = Symbol('哈哈');
        console.log(s3 == s2);
        let s4 = Symbol.for('哈哈哈'); //通过此方式创建，根据注释值可以得到唯一的s4;
        console.log(s4);
        let s5 = Symbol.for('哈哈哈'); //通过此方式创建，根据注释值可以得到唯一的s5;
        console.log(s5);
        let s6 = Symbol.for('哈哈哈哈'); //通过此方式创建，根据注释值可以得到唯一的s5;
        console.log(s6);
        console.log(s4 == s5);
        console.log(s4 == s6);

        //注：javascript七种数据类型：USONB 
        // undefine
        // string symbol
        // object
        // number null
        // boolean

        //12.Symbol基本使用
        //12.1 向对象添加Symbol类型的方法或属性 up down "独一无二"
        let game = {
            up: '上',
            down: '下',
            name: '斗地主'
        }
        let methods = {
            up: Symbol(),
            down: Symbol()
        }
        game[methods.up] = function () {
            console.log("我可以改变形状");
        }
        game[methods.down] = function () {
            console.log("我可以快速上升");
        }
        console.log(game);
        let youxi = {
            name: '狼人杀',
            [Symbol('say')]: function () {
                console.log("我可以说话");
            },
            [Symbol('zibao')]: function () {
                console.log("我可以自保");
            }
        }
        console.log(youxi);

        //13.迭代器 for...of遍历：原生具备iterator接口的数据可用for...of遍历【Array,Araguments,Set,Map,String,TypedArray,NodeList】
        const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
        for (let v of xiyou) {    //for...of中间的v保存的是键值
            console.log(v);
        }
        console.log(xiyou); //原型中有Symbol的iterator接口
        for (let v in xiyou) {    //for...in中间的v保存的是下标
            console.log(v);
        }

        //14.生成器：其实就是特殊的函数，是ES6提供的一种异步编程解决方案；异步编程 纯回调函数 node fs ajax mongdb
        //14.1
        function* gen() {
            console.log("hello generator");
        }
        let iterator = gen(); //即时调用也不会执行除非使用iterator.next()(原型中有next就是具备iteraotr接口)才会执行函数输出hello generator
        console.log(iterator);
        iterator.next();
        console.log("-------------------");
        //14.2
        function* gen1() { //yeild会将代码分为四段
            console.log('AA');
            yield '111';
            console.log('BB');
            yield '222';
            console.log('CC');
            yield '333';
            console.log('DD');
        }
        let iterator1 = gen1(); //只要调用iterator1.next()指针就会向下走
        iterator1.next(); //会执行console.log('111');
        console.log(iterator1.next()); //会先输出console.log('222'); 在执行输出 {value: '222', done: false}
        iterator1.next(); //console.log('333');
        console.log(iterator1.next()); //会先输出console.log('444'); 在执行输出 value: undefined, done: true}
        iterator1.next(); //不输出，因为指针已经出去了
        console.log(iterator1.next()); //因为指针已经出去了 {value: undefined, done: true}
        iterator1.next(); //不输出，因为指针已经出去了
        console.log("-------------------");
        //14.3
        function* gen2() { //yeild会将代码分为四段
            console.log('111');
            yield 'aaa';
            console.log('222');
            yield 'bbb';
            console.log('333');
            yield 'ccc';
            console.log('444');
        }
        for (let v of gen2()) {
            console.log(v); //会执行console.log('111'); 会执行输出 yield '111'=》后面的111
        }

        //15.生成器函数的参数传递
        //15.1
        function* gen3(args) {
            console.log(args);
            let one = yield 111;
            console.log(one);
            let two = yield 222;
            console.log(two);
            let there = yield 333;
            console.log(there);
        }
        let iterator2 = gen3("AAA");
        console.log(iterator2.next());//先输出AAA，在输出{value: '111', done: false}
        //next()方法在调用是可以传递实参，实参就是“yield '111'”整个语句的返回结果
        //第二次调用next语句,调用参数的结果，将作为第一次“yield '111'”整个语句的返回结果，用let one接收
        console.log(iterator2.next('BBB'));
        //第三次调用next语句,调用参数的结果，将作为第二次“yield '222'”整个语句的返回结果，用let two接收
        console.log(iterator2.next('CCC'));
        //第四次调用next语句,调用参数的结果，将作为第三次“yield '333'”整个语句的返回结果，用let there接收
        console.log(iterator2.next('DDD'));

        //16.Promise异步编程解决方案，文件读取，网络请求ajax，数据库读取：先读取用户名，在根据用户名读取用户信息，在根据用户信息读取XXX，层层套场景，...异步操作
        //16.1 见1-Promise基本使用

        //17.Set(集合)，唯一的数据，实现了iterator接口，可以使用扩展运算符，和for...of遍历
        //17.1 Set集合声明,Set里面存放的是伪数组格式
        // Arguments(6) [1, 2, 3, 4, 5, 6,]和{'好事', '坏事', '没事', '大事', '小事'}都为伪数组格式可以转化为数据[...XXX]
        let set1 = new Set();
        let set2 = new Set(['好事', '坏事', '没事', '大事', '小事']);
        console.log(set1);
        console.log(set2);
        //17.2 size
        console.log(set1.size);
        console.log(set2.size);
        //17.3 add
        set1.add('净事');
        console.log(set1);
        //17.4 delete
        set2.delete('净事');
        console.log(set2);
        //17.5 has
        console.log(set2.has('没事'));
        //17.6 clear()
        set1.clear();
        console.log(set1);
        //17.7 for...of
        for (let v of set2) {
            console.log(v);
        }

        //18.Map
        //18.1 Map声明
        let map = new Map();
        console.log(map);
        //18.2 set
        map.set('name', '天气预报');
        map.set('change', function () {
            console.log('Map真强大');
        })
        let key = {
            school: '北京大学'
        }
        map.set(key, ['北京', '天津', '上海']);
        console.log(map);
        //18.3 size
        console.log(map.size);
        //18.4 delete
        map.delete('name');
        console.log(map.size);
        //18.5 get
        console.log(map.get('change'));
        console.log(map.get(key));
        //18.6 clear()
        // map.clear();        
        // console.log(map.size);
        //18.7 遍历
        for (let v of map) {
            console.log(v);
        }

        //19.class类
        //19.1 es5时
        // function Phone(brand,price){
        //     this.brand=brand;
        //     this.price=price;
        // }
        // //添加方法
        // Phone.prototype.call=function(){   //此种方式可以通过实例.方法名或属性名调用
        //     console.log("打电话");
        // }
        // let Huawei=new Phone('华为',5999);
        // console.log(Huawei);
        // Huawei.call();
        //19.2 es6时class
        class Phone {
            constructor(brand, price) { //只要通过new关键字创建对象都会执行
                this.brand = brand;
                this.price = price;
            }
            // 方法必须写成该语法，不可写成ES5的对象完整形式=》call:function(){}
            call() {
                console.log("我可以打电话");
            }
        }
        let onePlus = new Phone('1+', 1999);
        console.log(onePlus);
        onePlus.call();
        //19.3 es5时静态成员
        function Amnil() {

        }
        Amnil.name = '狗'; //属于类的静态属性，不属于实例
        Amnil.change = function () { //属于类的静态方法，不属于实例
            console.log("汪汪汪");
        }
        //let amnil=new Amnil();
        //console.log(amnil.name); //不可以通过实例.方法名或属性名调用,但是可以通过Amnil.name或Amnil.change()调用
        //amnil.change();
        console.log(Amnil.name);
        Amnil.change();
        //19.4 es6时静态成员
        class Cat {
            static name = '猫';
            static change() {
                console.log("喵喵喵");
            }
        }
        // let cat=new Cat(); //使用static声明的属性不属于实例对象
        // console.log(cat.name); //undefine
        // cat.chage(); //报错
        console.log(Cat.name); //类.属性名调用
        Cat.change(); //类.方法名调用

        //20.es6时class类继承
        class Ipad {
            constructor(brand, price) {
                this.brand = brand;
                this.price = price;
            }
            call() {
                console.log("我是Ipad");
            }
        }
        class SmartIpad extends Ipad {
            constructor(brand, price, color, size) {
                super(brand, price);
                this.color = color;
                this.size = size;
            }
            photo() {
                console.log("拍照");
            }
            playGame() {
                console.log("玩游戏");
            }
        }
        const xiaomi = new SmartIpad('小米', 1799, '白色', '4.7inch');
        console.log(xiaomi);
        xiaomi.call();

        //21.es6子类对父类方法的重写
        class Ipad1 {
            call() {
                console.log("我是Ipad1");
            }
        }
        class SmartIpad1 extends Ipad1 {
            call() {
                console.log("我是SmartIpad1");
            }
        }
        const xiaomi1 = new SmartIpad1();
        xiaomi1.call(); //只能调用子类重写的方法，不可以通过super关键字调用父类

        //22.es6-class中getter和setter设置
        class Ipad2 {
            get call() {
                console.log("我是Ipad2=>get");
            }
            set price(newVal) {
                console.log(`Ipad2的价格为${newVal}`);
            }
        }
        let xiaomi2 = new Ipad2();
        xiaomi2.call; //不能写成xiaomi2.call()
        xiaomi2.price = 10; //不能写成xiaomi2.price(10)

        //23.es6数值扩展
        //23.1 Number.EPLON 表示最小的精度,视为相等，小数点后16位，相当于50.2=50
        function equal(a, b) {
            return Math.abs(a - b) < Number.EPSILON;
        }
        console.log(equal(0.1 + 0.2, 0.3));
        //23.2 二进制和八进制
        let two = 0b1010;
        let one = 0o777;
        let three = 100;
        let four = 0xff;
        console.log(two);
        console.log(one);
        console.log(three);
        console.log(four);
        //23.3 检测一个数值是否为有限数
        console.log(Number.isFinite(100 / 3));
        //23.4 检测一个数值是否为NaN
        console.log(Number.isNaN(123 + NaN));
        //24.5字符串转换为整数
        let strs = '12345';
        let number = Number.parseInt(strs);
        console.log(typeof number);
        //24.5 判断一个数是否为整数
        console.log(Number.isInteger(123.3));
        //24.6 将数字的小数部分去掉
        console.log(Math.trunc(12.3));
        //24.7 判断一个数到底是正数、负数、零,正数返回1，负数返回-1，零返回0
        console.log(Math.sign(22));

        //25.es6的对象方法扩展
        //25.1 Object.is 判断两个值是否完全相等
        console.log(Object.is(120, 120));
        console.log(Object.is(NaN, NaN)); //true
        console.log(NaN === NaN); //false
        //25.2 Object.assign 对象的合并
        const config1 = {
            host: 'localhost',
            port: 3306,
            name: 'root',
            pass: 'root',
            des: '同名被覆盖'
        }
        const config2 = {
            host: '127.0.0.1',
            port: 33060,
            name: 'root',
            pass: '123456',
            undes: '同名覆盖'
        }
        console.log(Object.assign(config1, config2)); //第一个将第二个覆盖
        //25.3 Object.setPrototypeOf设置原型对象  Object.getPrototypeof获取原型对象
        const proty = {
            name: '原型'
        }
        const city = {
            regin: '复兴'
        }
        Object.setPrototypeOf(proty, city);//全局对象的原型
        console.log(proty);
        console.log(Object.getPrototypeOf(proty));

    </script>
</body>

</html>

1.1 迭代器练习.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const arr=[
            {
                name:'hello',
                age:[12,13,14]
            },
            {
                name:'word',
                age:[12,15,13]
            },
            {
                name:'helloword',
                age:[12,13,15,14,16]
            },
        ]
        for(let v of arr){
            console.log(v.name);
            for(let age of v.age){
                console.log(age);
            }
            console.log("*********");
        }
    </script>
</body>
</html>

1.2 箭头函数练习.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //从数组中返回偶数元素
        const ARR=[12,12,34,45,65,23,44,54,77];
        const result=ARR.filter(item=>item%2==0);
        console.log(result);
    </script>
</body>
</html>

1.3 生成器函数练习1.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //异步编程  1s后控制台输出111,2s后控制台输出222，3s后控制台输出333
        function one() {
            setTimeout(() => {
                console.log("111");
            }, 1000);
        }
        function two() {
            setTimeout(() => {
                console.log("222");
            }, 2000);
        }
        function there() {
            setTimeout(() => {
                console.log("333");
            }, 3000);
        }
        function* gen(){
            yield one();
            yield two();
            yield there();
        }
        let iteroter=gen();
        iteroter.next();
        iteroter.next();
        iteroter.next();

    </script>
</body>

</html>

1.4 生成器函数练习2.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function getUsers() {
            setTimeout(() => {
                let data = '用户数据';
                iteroter.next(data); //第二次调用next
            }, 1000);
        } 
        function getOrders() {
            setTimeout(() => {
                let data = '订单数据';                
                iteroter.next(data); //第三次调用next
            }, 1000);
        } 
        function getGoods() {
            setTimeout(() => {
                let data = '商品数据';                
                iteroter.next(data); //第四次调用next
            }, 1000);
        }
        function* gen(){ //三个yield会将代码块中的代码分为四段代码，函数代码分隔符
            //1段
            let Users=yield getUsers(); //1段2段
            console.log(Users);
            //2段
            let Orders=yield getOrders(); //2段3段
            console.log(Orders);
            //3段
            let Goods=yield getGoods(); //3段4段
            console.log(Goods);
            //4段
        }
        let iteroter=gen();
        iteroter.next();  //会执行1段代码并且返回1段yield后面的值 ,console.log(iteroter.next());的返回值为{value: undefined, done: false} 因为函数中没返回值,但是可以通过.next(传参方式实现)

    </script>

</body>

</html>

---------------------------------------------------------------------------------------------------------------------------------

2. ES_Test02_模板化暴露.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module">
        //1.es6模块化语法 export(用于规定模块的对外接口)和import(用于输入其他模块提供的功能)
        //1.1 暴露方式一 export 属性/方法
        import * as e1 from './m1.js';
        console.log(e1.school);
        e1.teach();
        console.log(e1);
        //1.2 暴露方式二 export { };
        import * as e2 from './m2.js';
        console.log(e2.school);
        e2.teacher();
        console.log(e2);
        //1.3 默认暴露 export default{ }
        import * as e3 from './m3.js';
        console.log(e3.default.school);
        e3.default.teach();
        console.log(e3);        

    </script>
</body>
</html>

3. ES_Test03_模板化导入.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="module">
        /*
        //1.es6模块化语法 import导入方式
        //1.1 通用导入方式1 
        import * as e1 from './m1.js';
        console.log(e1.school);
        e1.teach();
        console.log(e1);
        //1.2 通用导入方式1;
        import * as e2 from './m2.js';
        console.log(e2.school);
        e2.teacher();
        console.log(e2);
        //1.3 通用导入方式1
        import * as e3 from './m3.js';
        console.log(e3.default.school);
        e3.default.teach();
        console.log(e3); 
        */

        //1.4 结构赋值方式
        import { school, teach } from './m1.js';
        console.log(school2);
        teacher();

        import { school as school2, teacher } from './m2.js'; //若引入的模块和其他地方引入同名可以采用起别名方式
        console.log(school2);
        teacher();

        import { default as m3 } from './m3.js'; //必须起别名
        console.log(m3.school);
        m3.teach();
        console.log(m3);

        /*
        //1.5 简便方式，只能针对默认暴露
        import m3 from './m3.js';
        console.log(m3.school);
        m3.teach();
        console.log(m3);
        */

    </script>
</body>

</html>

m1.js

export let school = "复兴小学";

export function teach() {

console.log("复兴小学的老师");

}

m2.js

let school = "复兴中学";

function teacher() {

console.log("复兴中学的老师");

}

export { school, teacher };

m3.js

export default {

school: '阿荣旗第一中学',

teach: function () {

console.log("阿荣旗第一中学的老师")

}

}

4. Set集合实践.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr=[1,2,3,4,5,4,3,2,1];
        //1.数组去重
        let result=[...new Set(arr)]; //将伪（类）数组转换为数组。去重数组
        console.log(result);
        //2.交集

        //3.并集
        arr2=[4,5,6,5,6];
        let result2=[...new Set([...arr,...arr2])];
        console.log(result2);
        //4.差集
    </script>
</body>
</html>