文章目录

数值扩展

  • 二进制和八进制

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包

略，待补。