ES6新特性⑤

导读:本篇文章讲解 ES6新特性⑤,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

也许你感觉自己的努力总是徒劳无功,但不必怀疑,你每天都离顶点更进一步。今天的你离顶点还遥遥无期。但你通过今天的努力,积蓄了明天勇攀高峰的力量。加油!

数值扩展

  • 二进制和八进制

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>

对象拓展

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. 高维护性

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

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

暴露方法汇总

①分别暴露

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

export function teach() {
    console.log("哈哈哈哈哈啊哈");
}
    <script type="module">
        //引入 m1.js 模块内容
        import * as m1 from "./src/js/m1.js";
        console.log(m1);
    </script>

②统一暴露

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

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

//
export {school, findJob};
import * as m2 from "./m2.js";
m2.findJob();

③默认暴露

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

默认暴露返回的是一个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";

②解构赋值形式

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";

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

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

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

也就是直接重命名,不需要用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";

引入:

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

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

模块化引入npm包

略,待补。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/122227.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!