ES6新特性⑤

举报
十八岁讨厌编程 发表于 2022/08/08 23:21:35 2022/08/08
【摘要】 文章目录 数值扩展对象拓展模块化暴露方法汇总导入方法汇总浏览器中使用模块化的第二种方式模块化引入npm包 数值扩展 二进制和八进制 ES6 提供了二进制和八进制数值的新的写法,分别用...

数值扩展

  • 二进制和八进制

ES6 提供了二进制和八进制数值的新的写法,分别用前缀 0b 和 0o 表示。

  • Number.isFinite() 与 Number.isNaN()

Number.isFinite() 用来检查一个数值是否为有限的
Number.isNaN() 用来检查一个值是否为 NaN

  • Number.parseInt() 与 Number.parseFloat()

ES6 将全局方法 parseInt 和 parseFloat,移植到 Number 对象上面,使用不变。

  • Math.trunc

用于去除一个数的小数部分,返回整数部分。

  • Number.isInteger

Number.isInteger() 用来判断一个数值是否为整数

例如:

<script>
        //0. 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))

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

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

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

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

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

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

    </script>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

对象拓展

ES6 新增了一些 Object 对象的方法

  1. Object.is 比较两个值是否严格相等,与『===』行为基本一致(+0 与 NaN)
  2. Object.assign 对象的合并,将源对象的所有可枚举属性,复制到目标对象
  3. _proto_、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型

例如:

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

        //2. Object.assign 对象的合并
        // const config1 = {
        //     host: 'localhost',
        //     port: 3306,
        //     name: 'root',
        //     pass: 'root',
        //     test: 'test'
        // };
        // const config2 = {
        //     host: 'http://atguigu.com',
        //     port: 33060,
        //     name: 'atguigu.com',
        //     pass: 'iloveyou',
        //     test2: 'test2'
        // }
        // console.log(Object.assign(config1, config2));

        //3. Object.setPrototypeOf 设置原型对象  Object.getPrototypeof
        const school = {
            name: 'NEFU'
        }
        const cities = {
            xiaoqu: ['北京','上海','深圳']
        }
        Object.setPrototypeOf(school, cities);
        console.log(Object.getPrototypeOf(school));
        console.log(school);

    </script>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

模块化

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

模块化的优势有以下几点

  1. 防止命名冲突
  2. 代码复用
  3. 高维护性

ES6 模块化语法
模块功能主要由两个命令构成:export 和 import。

  • export 命令用于规定模块的对外接口
  • import 命令用于输入其他模块提供的功能

暴露方法汇总

①分别暴露

//位置./src/js/m1.js
//分别暴露
export let school = 'NEFU';

export function teach() {
    console.log("哈哈哈哈哈啊哈");
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
    <script type="module">
        //引入 m1.js 模块内容
        import * as m1 from "./src/js/m1.js";
        console.log(m1);
    </script>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

②统一暴露

//统一暴露
let school = 'NEFU';

function findJob(){
    console.log("哈哈哈!!");
}

//
export {school, findJob};

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
import * as m2 from "./m2.js";
m2.findJob();

  
 
  • 1
  • 2

③默认暴露

//默认暴露
export default {
    school: 'NEFU',
    change: function(){
        console.log("哈哈哈!!");
    }
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
import * as m3 from "./m3.js";
m3.default.change();

  
 
  • 1
  • 2

默认暴露返回的是一个default对象

导入方法汇总

①通用的导入方式

        //引入 m1.js 模块内容
        import * as m1 from "./src/js/m1.js";
        // //引入 m2.js 模块内容
        import * as m2 from "./src/js/m2.js";
        // //引入 m3.js 
        import * as m3 from "./src/js/m3.js";

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

②解构赋值形式

import {school, teach} from "./src/js/m1.js";
import {school as sc, findJob} from "./src/js/m2.js";
import {default as m3} from "./src/js/m3.js";

  
 
  • 1
  • 2
  • 3

如果重名可以用as重新命名
而如果使用的是默认暴露则一定要有as

③简便形式 (针对默认暴露)

import m3 from "./src/js/m3.js";

  
 
  • 1

也就是直接重命名,不需要用as(反正是必须的,所以可以省略)

浏览器中使用模块化的第二种方式

原先我们都是在script标签中直接进行引入。
而第二种方式:创建一个入口文件,然后再用一个单独的script标签引入

例如:

//入口文件
//地址:./src/js/app.js
//模块引入
import * as m1 from "./m1.js";
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

引入:

<script src="./src/js/app.js" type="module"></script>

  
 
  • 1

考虑到兼容性的问题,项目中一般使用babel来进行处理

模块化引入npm包

略,待补。

文章来源: blog.csdn.net,作者:十八岁讨厌编程,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/zyb18507175502/article/details/123942233

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。