ES6 数据拓展Number,对象方法,三种模块化应用,npm包导入和转换

Posted IT_Holmes

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6 数据拓展Number,对象方法,三种模块化应用,npm包导入和转换相关的知识,希望对你有一定的参考价值。

1.ES6 数据拓展

1.1 Number.EPSILON

这个Number.EPSILON,是衡量数据的关键。

可以打印一下看看它的数值。

<script>
    console.log(Number.EPSILON);
</script>

在这里插入图片描述
例如:

0.1 + 0.2 === 0.3,如果只是单纯的看等式,这个是正确的,但是计算机计算是有很微小的误差!如下:

<script>
    console.log("0.1加0.2是否等于0.3");
    console.log(0.1+0.2 === 0.3);//这里却出现了false
    console.log(0.1+0.2);//可以看到这里是0.30000000000000004
</script>

在这里插入图片描述
因此可以用Number.EPSILON,来衡量。 Number.EPSILON 是javascript表示的最小精度。 如果0.3减去0.1加0.2的值小于Number.EPSILON,就算他们是相等的。

实例:

<!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>
        console.log("0.1加0.2是否等于0.3");
        console.log(0.1+0.2 === 0.3);//这里却出现了false
        console.log(0.1+0.2);//可以看到这里是0.30000000000000004

        function equal(a,b){
            if(Math.abs(a-b)<Number.EPSILON)
                return true;
            else 
                return false;
        }
        console.log(equal(0.1+0.2,0.3));
    </script>
</body>
</html>

1.2 二进制,八进制,十进制,十六进制

用进制表示:二进制0b,八进制0o,十进制, 十六进制0x。

<script>
    let b = 0b1010; //二进制0b
    console.log(b);
    let o = 0o777; //八进制0o
    console.log(o); 
    let d = 100;  //十进制  
    console.log(d) 
    let x = 0xff; //十六进制0x
    console.log(x);
</script>

1.3 Number.isFinite

它的功能就是检测一个数值是否为有限数。

<script>
    console.log(Number.isFinite(100));
    console.log(Number.isFinite(100/0));
    console.log(Number.isFinite(Infinity));
</script>

1.4 Number.isNaN

检测一个数值是否是NaN的。

<script>
    console.log(Number.isNaN(123));
</script>

1.5 Number.parseInt 和 Number.parseFloat

将字符串转为整数。

<script>
    console.log(Number.parseInt('123253aaakkbl'));
    console.log(Number.parseFloat('3453.45sdfsc'));
</script>

在这里插入图片描述

1.6 Number.isInteger

判断一个数是否为整数。

<script>
    console.log(Number.isInteger(555));
    console.log(Number.isInteger(6.222));
</script>

1.7 Math.trunc

将数字的小数部分抹掉。

<script>
    console.log(Math.trunc(2.55555));
</script>

1.8 Math.sign

判断一个数到底为整数,还是负数,还是零。如果为整数返回1,负数返回-1,零返回0。

<script>
    console.log(Math.sign(100));
    console.log(Math.sign(-100));
    console.log(Math.sign(0));
</script>

2. 对象方法

2.1 Object.is(value1 ,value2)

判断两个值是否完全相等。

<script>
    console.log(Object.is(120,120));
    //object.is和===全等很像,但是又不完全像,如下面的NaN
    console.log(Object.is(NaN,NaN)); //返回true
    console.log(NaN === NaN); //返回false
</script>

2.2 Object.assign

它是对对象的合并。
注意事项:
这里是config2覆盖了config1,并且合并了config2中没有的键值对。

<script>
    const config1 = {
        host:'localhost',
        port:3306,
        name:'root',
        password:'root',
        content:'内容'
    }

    const config2 = {
        host:'www.localhost.com',
        port:8080,
        name:'sherlock',
        password:'holmes',
        content2:'内容2'
    }
    //config2覆盖掉config1
    let a = Object.assign(config1,config2);
    console.log(a);
</script>

2.3 Object.setPrototypeOf 和 Object.getPrototypeOf

Object.setPrototypeOf设置原型对象,Object.getPrototypeOf获取对象。

<script>
    const school = {
        name:'清华'
    }
    const cities = {
        city:['北京','亚洲','地球']
    }
    //设置原型对象cities
    Object.setPrototypeOf(school,cities);
    //通过getPrototypeOf来获取school对象数值。
    console.log(Object.getPrototypeOf(school));
    console.log(school);
</script>

3. ES6 模块化

3.1 模块化介绍

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

模块化好处:

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

3.2 ES6 模块化语法

3.2.1 第一种方式 暴露和引入

模块功能主要由两个命令构成:export(暴露) 和 import(引入)。

这里其实和我们遇到的java导入jar包相似。

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

这里的export(暴露)分为:

1.分别暴露
2. 统一暴露
3. 默认暴露。

同样,这里的import(引入)分为:

1. 通用导入方式。
2. 解析赋值形式,重名和默认暴露都要用as起别名。
3. 简便形式,它只能针对默认暴露。并且不用写default。

3.2.2 第二种方式 src属性和入口文件

使用src属性来,进行导入。

就像下面是的,直接使用src导入,但是type必须是module值。

就像下面的app.js类似一个入口文件。
在这里插入图片描述

在这里插入图片描述

4. ES6 babel的转换

babel是一个JavaScript的编译器,可以访问官方babel来了解一下它。

babel功能就是将ES6以上的版本语法,转换为浏览器能识别的语法(大部分是转换为ES5)。

过程:

1.npm init --yes //初始化
2.npm i babel-cli babel-preset-env browserify -D //-D就是依赖
3.npx babel //转化
4.npx browserify //打包

这里只是初步了解一下bebal,后续会补充关于bebal的详细内容。

5. npm 安装和导入

在使用npm包时,要先下载对应的包,然后导入对应的包,就像下面这样子。

基本格式就是 import $ from ‘包名’ ;
在这里插入图片描述

以上是关于ES6 数据拓展Number,对象方法,三种模块化应用,npm包导入和转换的主要内容,如果未能解决你的问题,请参考以下文章

《ES6标准入门》49~68Page 数值的拓展 数组的拓展

Es6数值拓展

ES6数值的拓展

向ES6看齐,用更好的JavaScript

ES6之 number 和 string

ES6字符串的拓展