ES6 学习总结6

琳琳在哪

已于 2022-06-29 09:47:31 修改

阅读量144

点赞数

分类专栏：前端文章标签： es6 javascript 前端

于 2022-04-13 21:54:24 首次发布

本文链接：https://blog.csdn.net/qq_63479468/article/details/124133885

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一、数值扩展

Number.EPSILON:是JavaScript的最小精度

ESPSILON属性的值接近于2.2204460492503130808472633361816E-16；

1.二进制和八进制

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

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

自动转化为十进制表示

2.Number.isFinite() 与 Number.isNaN() ：

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

Number.isNaN() 用来检查一个值是否为 NaN；

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

3.Number.parseInt() 与 Number.parseFloat()：

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

 //Number.parseInt Number.parseFloat字符串转整数
        console.log(Number.parseInt('521987456abcd'));
        console.log(Number.parseFloat('圆周率：3.1415926'));

一旦遇见不是数字，则不再进行转换，比如第二个例子

4.Math.trunc：

用于去除一个数的小数部分，返回整数部分；

//Math.trunc 将数字的小数部分抹掉
        console.log(Math.trunc(3.3356));
//Math.sign 判断一个整数到底为为正数 负数 还是0
        console.log(Math.sign(5));//正数返回1
        console.log(Math.sign(0));//0返回0
        console.log(Math.sign(-8));//负数返回-1

5.Number.isInteger：

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

        //Number.isInteger 检测一个数值是否为整数
        console.log(Number.isInteger(6));
        console.log(Number.isInteger(7.6));

二、对象扩展

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

1.Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）

Object.is 比较两个值是否严格相等，与 === 行为基本一致
        console.log(Object.is(120,120));//===
        //注意以下区别
        console.log(Object.is(NaN,NaN));
        console.log(NaN === NaN);
        //NaN与任何数值做 === 比较都是false，跟自己比也一样

2.Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象；

//Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象
        const config1 = {
            name:"TFBOYS",
            rember:"wjk,wy,yyqx",
            number:3
        }
        const config2 = {
            name:"TNT",
            rember:"mmq,dcx,syx,lyw,zzy,yhx,hjl",
            number:7
        }

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

如果前边有后边没有会添加，如果前后都有，后面的会覆盖前面的

3.proto、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型；

        //_proto_  setPrototypeOf  getPrototypeOf 可以直接设置成对象的原型
        const national = {
            name:"syx"
        }
        const rember = {
            age:18
        }
        Object.setPrototypeOf(national,rember);
        console.log(Object.getPrototypeOf(national));
        console.log(national);

不建议这么做

三、模块化

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

1.好处

防止命名冲突；代码复用；高维护性；

2.模块功能主要由两个命令构成：export 和 import

export 命令用于规定模块的对外接口（导出模块）；

//m.js导出模块
export let TNT = "时代少年团";

export function sing(){
    console.log("我们会唱歌！");
}

import 命令用于输入其他模块提供的功能（导入模块）；

//导入和使用模块
<!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>模块化</title>
</head>
<body>
    <script type="module">
        //引入m.js内容
        import * as m from "m.js";
        console.log(m);
        console.log(m.TNT);
        m.sing();
    </script>
</body>
</html>

属性，方法打点调用

3.暴露数据汇总

逐个导出

//m.js逐个
export let TNT = "时代少年团";

export function sing(){
    console.log("我们会唱歌！");
}

统一导出

//n.js统一
let TNT = "时代少年团";

function sing(){
    console.log(("我们会唱歌！"));
}
export {TNT,sing};

默认导出

//o.js默认
export default{
    TNT:"时代少年团",
    sing: function(){
        console.log("我们会唱歌！");
    }
}

引入使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>模块化</title>
    </head>
    <body>
        <script type="module">
           //引入m.js内容
            import * as m from "./m.js";
            console.log(m);
            console.log(m.TNT);
            m.sing();
            //引入n.js内容
            import * as n from "./n.js";
            console.log(n);
            console.log(n.TNT);
            n.sing();
            //引入o.js内容
            import * as o from "./o.js";
            console.log(o);
            //这屋里注意要加上default
            console.log(o.default.TNT);
            o.default.sing();
        </script>
    </body>
</html>

默认暴露调用时，记得加上default

// 解构赋值形式
import {school,teach} from "./js/m.js";
// 重名的可以使用别名
import {school as xuexiao,findJob} from "./js/n.js";
// 导入默认导出的模块，必须使用别名
import {default as one} from "./js/o.js";
// 直接可以使用
console.log(school);
teach();
运行结果：
使用模块化的另一种方式：
将js语法整合到一个文件app.js：
console.log(xuexiao);
console.log(one);
console.log(one.school);
one.change();
// 简便形式，只支持默认导出
import oh from "./js/o.js";
console.log(oh);
console.log(oh.school);
oh.change();

4.使用模块化的另一种方式

将js语法整合到一个文件app.js

<!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">
        import * as app from "./app.js";
    </script>
</body>
</html>

//app.js
//引入
import * as m from "./m.js";
console.log(m);
console.log(m.TNT);
m.sing();

琳琳在哪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 学习总结6

一、数值扩展Number.EPSILON:是JavaScript的最小精度ESPSILON属性的值接近于2.2204460492503130808472633361816E-16；1.二进制和八进制ES6提供了二进制和八进制数值的新写法，分别用0b和0o表示//二进制和八进制 let a = 0b1010; let b = 0o777; let c = 100; let d = 0xff; console.
复制链接

扫一扫