【ES6+】008-ES6新特性：数值扩展、对象扩展、模块化、Babel代码转换、ES6模块化引入NPM包

布满荆棘的人生 2023-10-05 16:13 9阅读 0赞

**目录**

一、数值扩展

1、Number.EPSILON

2、二进制和八进制

3、Number.isFinite() 与 Number.isNaN()

4、Number.parseInt() 与 Number.parseFloat()

5、Math.trunc

6、Number.isInteger

7、代码实现和相关说明

代码实现：

运行结果：

二、对象扩展

1、概述

2、代码实现及相关说明

代码实现：

运行结果：

三、模块化

1、概述

2、模块化的好处

3、模块化规范产品

4、ES6 模块化语法

5、简单使用

m.js（导出模块）：

模块化.html（导入和使用模块）：

运行结果：

6、ES6暴露数据语法汇总

m.js（逐个导出模块）：

n.js（统一导出模块）：

o.js（默认导出模块）：

模块化.html（引入和使用模块）：

运行结果：

7、ES6导入模块语法汇总

模块化.html：

运行结果：

8、使用模块化的另一种方式

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

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

运行结果：

四、Babel对ES6模块化代码转换

1、概述

2、步骤

3、转换前后对比

转换前：

转换后：

五、ES6模块化引入NPM包

1、演示

--------------------

# 一、数值扩展 #

## 1、Number.EPSILON ##

Number.EPSILON 是 JavaScript 表示的最小精度；

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

## 2、二进制和八进制 ##

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

## 3、Number.isFinite() 与 Number.isNaN() ##

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

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

## 4、Number.parseInt() 与 Number.parseFloat() ##

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

## 5、Math.trunc ##

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

## 6、Number.isInteger ##

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

## 7、代码实现和相关说明 ##

### 代码实现： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>数值扩展</title>
    	</head>
    	<body>
    		<script>
    			// 数值扩展
    			// 0. Number.EPSILON 是 JavaScript 表示的最小精度
    			// EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
    			// function equal(a, b){
    			//     return Math.abs(a-b) < Number.EPSILON;
    			// }
    			console.log("0、Number.EPSILON 是 JavaScript 表示的最小精度");
    			// 箭头函数简化写法
    			equal = (a, b) => Math.abs(a-b) < Number.EPSILON;
    			console.log(0.1 + 0.2);
    			console.log(0.1 + 0.2 === 0.3); // false
    			console.log(equal(0.1 + 0.2, 0.3)); // true
    
    			// 1. 二进制和八进制
    			console.log("1、二进制和八进制");
    			let b = 0b1010;
    			let o = 0o777;
    			let d = 100;
    			let x = 0xff;
    			console.log(x);
    
    			// 2. Number.isFinite  检测一个数值是否为有限数
    			console.log("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("3. Number.isNaN 检测一个数值是否为 NaN");
    			console.log(Number.isNaN(123)); 
    
    			// 4. Number.parseInt Number.parseFloat字符串转整数
    			console.log("4. Number.parseInt Number.parseFloat字符串转整数");
    			console.log(Number.parseInt('5211314love'));
    			console.log(Number.parseFloat('3.1415926神奇'));
    
    			// 5. Number.isInteger 判断一个数是否为整数
    			console.log("5. Number.isInteger 判断一个数是否为整数");
    			console.log(Number.isInteger(5));
    			console.log(Number.isInteger(2.5));
    
    			// 6. Math.trunc 将数字的小数部分抹掉  
    			console.log("6. Math.trunc 将数字的小数部分抹掉 ");
    			console.log(Math.trunc(3.5));
    
    			// 7. Math.sign 判断一个数到底为正数 负数 还是零
    			console.log("7. Math.sign 判断一个数到底为正数 负数 还是零");
    			console.log(Math.sign(100));
    			console.log(Math.sign(0));
    			console.log(Math.sign(-20000));
    		</script>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

# 二、对象扩展 #

## 1、概述 ##

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

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

## 2、代码实现及相关说明 ##

### 代码实现： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>对象扩展</title>
    	</head>
    	<body>
    		<script>
    			// 对象扩展
    			// 1. Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）；
    			console.log(Object.is(120,120)); // ===
    			// 注意下面的区别
    			console.log(Object.is(NaN,NaN));
    			console.log(NaN === NaN);
    			// NaN与任何数值做===比较都是false，跟他自己也如此！
    			// 2. Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象；
    			const config1 = {
    				host : "localhost",
    				port : 3306,
    				name : "root",
    				pass : "root",
    				test : "test" // 唯一存在
    			}
    			
    			const config2 = {
    				host : "http://zibo.com",
    				port : 300300600,
    				name : "root4444",
    				pass : "root4444",
    				test2 : "test2" 
    			}
    			// 如果前边有后边没有会添加，如果前后都有，后面的会覆盖前面的
    			console.log(Object.assign(config1,config2));
    			// 3. __proto__、setPrototypeOf、 getPrototypeOf 可以直接设置对象的原型；
    			const school = {
    				name : "尚硅谷"
    			}
    			const cities = {
    				xiaoqu : ['北京','上海','深圳']
    			}
    			// 并不建议这么做
    			Object.setPrototypeOf(school,cities);
    			console.log(Object.getPrototypeOf(school));
    			console.log(school);
    		</script>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

# 三、模块化 #

## 1、概述 ##

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

## 2、模块化的好处 ##

模块化的优势有以下几点：

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

## 3、模块化规范产品 ##

ES6 之前的模块化规范有：

1.  CommonJS => NodeJS、Browserify；
2.  AMD => requireJS；
3.  CMD => seaJS；

## 4、ES6 模块化语法 ##

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

*  export 命令用于规定模块的对外接口（导出模块）；
 *  import 命令用于输入其他模块提供的功能（导入模块）；

## 5、简单使用 ##

### m.js（导出模块）： ###

export let school = "尚硅谷";
    
    export function teach(){
    	console.log("我们可以教你开发技术！");
    }

### 模块化.html（导入和使用模块）： ###

### 运行结果： ###

###  ###

![20201220204823589.png][]

## 6、ES6暴露数据语法汇总 ##

### m.js（逐个导出模块）： ###

// 分别暴露（导出）
    export let school = "尚硅谷";
    
    export function teach(){
    	console.log("我们可以教你开发技术！");
    }

### n.js（统一导出模块）： ###

// 统一暴露（导出）
    let school = "尚硅谷";
    
    function findJob(){
    	console.log("我们可以帮你找到好工作！");
    }
    export {school,findJob}

### o.js（默认导出模块）： ###

// 默认暴露（导出）
    export default{
    	school : "尚硅谷",
    	change : function(){
    		console.log("我们可以帮你改变人生！");
    	}
    }

### 模块化.html（引入和使用模块）： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>模块化</title>
    	</head>
    	<body>
    		<script type="module">
    			// 引入m.js模块内容
    			import * as m from "./js/m.js";
    			console.log(m);
    			console.log(m.school);
    			m.teach();
    			// 引入n.js模块内容
    			import * as n from "./js/n.js";
    			console.log(n);
    			console.log(n.school);
    			n.findJob();
    			// 引入o.js模块内容
    			import * as o from "./js/o.js";
    			console.log(o);
    			// 注意这里调用方法的时候需要加上default
    			console.log(o.default.school);
    			o.default.change();
    		</script>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

## 7、ES6导入模块语法汇总 ##

### 模块化.html： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>模块化</title>
    	</head>
    	<body>
    		<script type="module">
    			// 通用方式
    			// 引入m.js模块内容
    			import * as m from "./js/m.js";
    			console.log(m);
    			console.log(m.school);
    			m.teach();
    			// 引入n.js模块内容
    			import * as n from "./js/n.js";
    			console.log(n);
    			console.log(n.school);
    			n.findJob();
    			// 引入o.js模块内容
    			import * as o from "./js/o.js";
    			console.log(o);
    			// 注意这里调用方法的时候需要加上default
    			console.log(o.default.school);
    			o.default.change();
    			// 解构赋值形式
    			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();
    			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();
    		</script>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

## 8、使用模块化的另一种方式 ##

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

// 通用方式
    // 引入m.js模块内容
    import * as m from "./m.js";
    console.log(m);
    console.log(m.school);
    m.teach();

### 使用模块化的另一种方式.html： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>使用模块化的另一种方式</title>
    	</head>
    	<body>
    		<script src="./js/app.js" type="module"></script>
    	</body>
    </html>

### 运行结果： ###

![20201220205233605.png][]

# 四、Babel对ES6模块化代码转换 #

## 1、概述 ##

Babel 是一个 JavaScript 编译器；

Babel 能够将新的ES规范语法转换成ES5的语法；

因为不是所有的浏览器都支持最新的ES规范，所以，一般项目中都需要使用Babel进行转换；

步骤：使用Babel转换JS代码——打包成一个文件——使用时引入即可；

## 2、步骤 ##

第一步：安装工具babel-cli（命令行工具） babel-preset-env（ES转换工具） browserify（打包工具，项目中使用的是webpack）；

第二步：初始化项

npm init -y

第三步：安装

npm i babel-cli babel-preset-env browserify

第四步：使用babel转换

npx babel js（js目录） -d dist/js（转化后的js目录） --presets=babel-preset-env

第五步：打包

npx browserify dist/js/app.js -o dist/bundle.js

第六步：在使用时引入bundle.js

## 3、转换前后对比 ##

### 转换前： ###

//分别暴露
    export let school = '尚硅谷';
    
    export function teach() {
        console.log("我们可以教给你开发技能");
    }

### 转换后： ###

"use strict";
    
    Object.defineProperty(exports, "__esModule", {
        value: true
    });
    exports.teach = teach;
    //分别暴露
    var school = exports.school = '尚硅谷';
    
    function teach() {
        console.log("我们可以教给你开发技能");
    }

# 五、ES6模块化引入NPM包 #

## 1、演示 ##

第一步：安装jquery

npm i jquery

第二步：在app.js使用jquery

//入口文件
    //修改背景颜色为粉色
    import $ from 'jquery';// 相当于const $ = require("jquery");
    $('body').css('background','pink');

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201220204426105.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201220204543395.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[20201220204823589.png]: https://img-blog.csdnimg.cn/20201220204823589.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201220204953558.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201220205051759.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[20201220205233605.png]: https://img-blog.csdnimg.cn/20201220205233605.png