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

訾博ZiBo

发布于 2025-01-06 17:02:08

9400

代码可运行

文章被收录于专栏：全栈开发工程师

运行总次数：0

代码可运行

一、数值扩展

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>

运行结果：

二、对象扩展

1、概述

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

Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）；
Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象；
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>

运行结果：

三、模块化

1、概述

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

2、模块化的好处

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

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

3、模块化规范产品

ES6 之前的模块化规范有：

CommonJS => NodeJS、Browserify；
AMD => requireJS；
CMD => seaJS；

4、ES6 模块化语法

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

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

5、简单使用

m.js（导出模块）：

export let school = "尚硅谷";

export function teach(){
	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();
		</script>
	</body>
</html>

运行结果：

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>

运行结果：

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>

运行结果：

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>

运行结果：

四、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

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除

npm

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度