AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Day22 ES6

2022-10-21 96
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： ECMAScript 6.0
Set
<!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>

    <script>

        //声明一个 set
        let s = new Set();
        let s2 = new Set(['大事儿', '小事儿', '好事儿', '坏事儿', '小事儿']);

        //元素个数
        // console.log(s2.size);

        //添加新的元素
        // s2.add('喜事儿');

        //删除元素
        // s2.delete('坏事儿');

        //检测
        // console.log(s2.has('糟心事'));

        //清空
        // s2.clear();

        // console.log(s2);

        for (let v of s2) {
            console.log(v);
        }


        let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
        // 数组去重
        // let result = [...new Set(arr)];
        // console.log(result); 

        // 交集
        let arr2 = [4, 5, 6, 5, 6];
        // let result = [...new Set(arr)].filter(item => {
        //   let s2 = new Set(arr2);// 4 5 6
        //   if(s2.has(item)){
        //     return true;
        //   }else{
        //     return false;
        //   }
        // });

        // let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
        // console.log(result);


        // 并集
        // let union = [...new Set([...arr, ...arr2])];
        // console.log(union);


        // 差集
        let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
        console.log(diff);

    </script>

</head>

<body>

</body>

</html>
Map
<!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>

    <script>

        //声明 Map
        let m = new Map();

        //添加元素
        m.set('name', 'a');
        m.set('change', function () {
            console.log("a!!");
        });

        let key = {
            school: 'b'
        };
        m.set(key, ['北京', '上海', '深圳']);

        //size
        // console.log(m.size);

        //删除
        // m.delete('name');

        //获取
        // console.log(m.get('change'));
        // console.log(m.get(key));

        //清空
        // m.clear();

        //遍历
        for (let v of m) {
            console.log(v);
        }

        // console.log(m);

    </script>

</head>

<body>

</body>

</html>
class类
<!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>

    <script>

        //手机
        function Phone(brand, price) {
            this.brand = brand;
            this.price = price;
        }

        //添加方法
        Phone.prototype.call = function () {
            console.log("我可以打电话!!");
        }

        //实例化对象
        let Huawei = new Phone('华为', 5999);
        Huawei.call();
        console.log(Huawei);



        //class
        class Shouji {

            //构造方法 名字不能修改
            constructor(brand, price) {
                this.brand = brand;
                this.price = price;
            }

            //方法必须使用该语法, 不能使用 ES5 的对象完整形式
            call() {
                console.log("我可以打电话!!");
            }
        }

        let onePlus = new Shouji("1+", 1999);
        console.log(onePlus);


        // 类的静态成员
        // function Phone(){
        // }

        // Phone.name = '手机';

        // Phone.change = function(){

        //   console.log("我可以改变世界");

        // }

        // Phone.prototype.size = '5.5inch';

        // let nokia = new Phone();

        // console.log(nokia.name);

        // // nokia.change();

        // console.log(nokia.size);

        class Phone {
            //静态属性
            static name = '手机';
            static change() {
                console.log("我可以改变世界");
            }
        }

        let nokia = new Phone();
        console.log(nokia.name);
        console.log(Phone.name);



        // 类的继承
        function Phone(brand, price) {
            this.brand = brand;
            this.price = price;
        }
        Phone.prototype.call = function () {
            console.log("我可以打电话");
        }

        //智能手机
        function SmartPhone(brand, price, color, size) {
            Phone.call(this, brand, price);
            this.color = color;
            this.size = size;
        }

        //设置子级构造函数的原型
        SmartPhone.prototype = new Phone;
        SmartPhone.prototype.constructor = SmartPhone;

        //声明子类的方法
        SmartPhone.prototype.photo = function () {
            console.log("我可以拍照")
        }
        SmartPhone.prototype.playGame = function () {
            console.log("我可以玩游戏");
        }

        const chuizi = new SmartPhone('锤子', 2499, '黑色', '5.5inch');
        console.log(chuizi);



        // Class类继承
        class Phone {

            //构造方法
            constructor(brand, price) {
                this.brand = brand;
                this.price = price;
            }

            //父类的成员属性
            call() {
                console.log("我可以打电话!!");
            }
        }

        class SmartPhone extends Phone {

            //构造方法
            constructor(brand, price, color, size) {
                super(brand, price);// Phone.call(this, brand, price)
                this.color = color;
                this.size = size;
            }

            photo() {
                console.log("拍照");
            }

            playGame() {
                console.log("玩游戏");
            }

            call() {
                console.log('我可以进行视频通话');
            }
        }
        const xiaomi = new SmartPhone('小米', 799, '黑色', '4.7inch');

        // console.log(xiaomi);
        xiaomi.call();
        xiaomi.photo();
        xiaomi.playGame();



        // class里的get和set
        // get 和 set  
        class Phone {
            get price() {
                console.log("价格属性被读取了");
                return 'iloveyou';
            }

            set price(newVal) {
                console.log('价格属性被修改了');
            }
        }

        //实例化对象
        let s = new Phone();

        // console.log(s.price);
        s.price = 'free';

    </script>

</head>

<body>

</body>

</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>

    <script>

        // Number.EPSILON 是 JavaScript 表示的最小精度
        // EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16

        // function equal(a, b){
        //   if(Math.abs(a-b) < Number.EPSILON){
        //     return true;
        //   }else{
        //     return false;
        //   }
        // }

        // console.log(0.1 + 0.2 === 0.3);
        // console.log(equal(0.1 + 0.2, 0.3))



        // 二进制和八进制
        // let b = 0b1010;
        // let o = 0o777;
        // let d = 100;
        // let x = 0xff;
        // console.log(x);


        // Number.isFinite  检测一个数值是否为有限数
        // console.log(Number.isFinite(100));
        // console.log(Number.isFinite(100/0));
        // console.log(Number.isFinite(Infinity));


        // Number.isNaN 检测一个数值是否为 NaN 
        // console.log(Number.isNaN(123)); 


        // Number.parseInt Number.parseFloat字符串转整数
        // console.log(Number.parseInt('5211314love'));
        // console.log(Number.parseFloat('3.1415926神奇'));



        // Number.isInteger 判断一个数是否为整数
        // console.log(Number.isInteger(5));
        // console.log(Number.isInteger(2.5));



        // Math.trunc 将数字的小数部分抹掉  
        // console.log(Math.trunc(3.5));



        // Math.sign 判断一个数到底为正数 负数 还是零
        console.log(Math.sign(100));
        console.log(Math.sign(0));
        console.log(Math.sign(-20000));

    </script>

</head>

<body>

</body>

</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>

    <script>

        // Object.is 判断两个值是否完全相等 
        // console.log(Object.is(120, 120));// === 
        // console.log(Object.is(NaN, NaN));// === 
        // console.log(NaN === NaN);// === 



        // Object.assign 对象的合并
        // const config1 = {
        //   host: 'localhost',
        //   port: 3306,
        //   name: 'root',
        //   pass: 'root',
        //   test: 'test'
        // };

        // const config2 = {
        //   host: 'http://banq.com',
        //   port: 33060,
        //   name: 'banq.com',
        //   pass: 'iloveyou',
        //   test2: 'test2'
        // }

        // console.log(Object.assign(config1, config2));



        // Object.setPrototypeOf 设置原型对象  Object.getPrototypeof
        const school = {
            name: 'a'
        }

        const cities = {
            xiaoqu: ['北京', '上海', '深圳']
        }

        Object.setPrototypeOf(school, cities);
        console.log(Object.getPrototypeOf(school));
        console.log(school);

    </script>

</head>

<body>

</body>

</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>

    <script>

        /*
            模块化是指将一个大的程序文件，拆分成许多小的文件，
            然后将小文件组合起来。

            模块化的好处 
                防止命名冲突 
                代码复用 
                高维护性 

            模块化规范产品 
                ES6 之前的模块化规范有： 
                    CommonJS  =>  NodeJS、Browserify 
                    AMD  =>  requireJS 
                    CMD  =>  seaJS 

            ES6 模块化语法
                模块功能主要由两个命令构成：export 和 import。 
                export 命令用于规定模块的对外接口 
                import 命令用于输入其他模块提供的功能 
        */

    </script>

</head>

<body>

</body>

</html>
文章标签：
JavaScript
半晴Miko
目录
相关文章
你都不懂
|
1月前
|
存储 JavaScript 前端开发
什么是Es6，有什么特点
什么是Es6，有什么特点
你都不懂
40 1
游客burgmwkv
|
前端开发 JavaScript API
ES
ES
游客burgmwkv
73 0
ES
.昭阳.
|
JavaScript 前端开发 索引
ES9,ES10
ES9,ES10
.昭阳.
75 0
.昭阳.
|
前端开发 索引
ES7,ES8
ES7,ES8
.昭阳.
66 0
~black-
|
前端开发 容器
ES6 Day04
ES6 Day04
~black-
80 0
~black-
ES6 Day02
ES6 Day02
~black-
64 0
小王师傅66
|
JavaScript 前端开发 Java
【ES6】初识
【ES6】初识
小王师傅66
71 0
龙哥手记
|
JSON JavaScript 前端开发
ES5和ES6的介绍
《前端基础》
龙哥手记
441 0
vobc4pj3rw4ou
|
前端开发 JavaScript 网络架构
除了ES6，ES还有那些必须要懂得知识？
Includes 方法用来检测数组中是否包含某个元素，返回布尔类型值。
vobc4pj3rw4ou
109 0
除了ES6，ES还有那些必须要懂得知识？
Iric
ES2016
ES2016
Iric
184 0