当前位置： 首页 > news >正文

ES6（ECMASript 6 新特性---数值扩展，对象扩展，模块化）

news 来源：原创 2024/4/28 13:52:44

文章目录

    • 2.16. 数值扩展
    • 2.17. 对象扩展
    • 2.18. 模块化
      • 2.18.1. 模块化的好处
      • 2.18.2. 模块化规范产品
      • 2.18.3. ES6 模块化语法
      • 2.18.4 babel 对ES6 模块化代码转换

2.16. 数值扩展

Number.EPSILON

EPSILON是Number里面的一个属性，这个属性表示非常小的数

eg. 两个数比较大小，如果差值小于Number.EPSILON这个数，则认为这两个数相等

主要用在浮点数运算上面对精度设置，因为浮点数有误差。

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

在这里插入图片描述

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

let b = 0b1010;
let o = 0o777;
let d = 100;
let x = 0xff;
console.log(x);

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

Number.parseInt() 与 Number.parseFloat()

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

// Number.parseInt Number.parseFloat字符串转整数
console.log(Number.parseInt('5211314love'));
console.log(Number.parseFloat('3.1415926神奇'));

Math.trunc
用于去除一个数的小数部分，返回整数部分。

console.log(Math.trunc(3.5));

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

// Number.isInteger 判断一个数是否为整数
console.log(Number.isInteger(5));
console.log(Number.isInteger(2.5));

Math.sign
判断一个数到底为正数 负数 还是零

console.log(Math.sign(100));
console.log(Math.sign(0));
console.log(Math.sign(-20000));

2.17. 对象扩展

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

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

eg. 对象方法扩展.html

//1. Object.is 判断两值是否完全相等 
// console.log(Objectis(120, 120));// === 
// console.log(Objectis(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: 'atguigucom',
//     pass:'iloveyou',
//     test2: 'test2'
// }

// console.log(Objectassign(config1,config2));

//3. ObjectsetPrototypeOf 设置原对象  ObjectgetPrototypeof
const school = {
    name: '尚硅谷'
}
const cities = {
    xiaoqu: ['北京','上海','深圳']
}
Object.setPrototypeO(school, cities);
console.log(ObjectgetPrototypeO(school));
console.log(school);

2.18. 模块化

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

2.18.1. 模块化的好处

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

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

2.18.2. 模块化规范产品

ES6 之前的模块化规范有：

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

2.18.3. ES6 模块化语法

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

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

1 通用的导入方式

例. 创建一个文件夹 src，一个index.html，home.html，src里面创建一个文件夹 js，js里面文件m1.js，m2.js，m3.js，app.js

eg1: 引入 m1.js 模块内容，分别暴露

注意：< script type=“module”> type

index.html

<!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">
    // 引入 m1.js 模块内容
    // 把 m1.js 里面的所有暴露数据存到变量m1 里面 
    import * as m1 from "./js/m1.js";
    console.log(m1);
  </script>
</body>
</html>

m1.js

// 分别暴露
// 让web模块里面可以使用这里模块的变量和函数 使用export

export let school = '尚硅谷';

export function teach() {
  console.log("我可以教给你开发技能");
}

在这里插入图片描述

eg2: 统一暴露

m2.js

// 统一暴露
let school = '尚硅谷';

function findJob(){
  console.log('我们可以帮助你找到工作！！');
}

export{school, findJob}

index.html

<!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">
    // 引入 m1.js 模块内容
    // 把 m1.js 里面的所有暴露数据存到变量m1 里面 
    import * as m1 from "./js/m1.js";

    // 引入 m2.js 模块内容
    import * as m2 from "./js/m2.js";
    console.log(m2);
  </script>
</body>
</html>

在这里插入图片描述

eg3: 默认暴露

m3.js

// 默认暴露
export default {
  school: 'ATGUIGU',
  change: function(){
    console.log('我们可以改变你！！');
  }
}

index.html

<!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">
    // 1 通用的导入方式
    // 引入 m1.js 模块内容
    // 把 m1.js 里面的所有暴露数据存到变量m1 里面 
    import * as m1 from "./js/m1.js";

    // 引入 m2.js 模块内容
    import * as m2 from "./js/m2.js";

    // 引入 m3.js 
    import * as m3 from "./js/m3.js";

    console.log(m3);

    // 调用属性和方法
    m3.default.change();
  </script>
</body>
</html>

在这里插入图片描述

2 解构赋值形式

index.html

<!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">
    // 2 解构赋值形式
    // 同时都用school 就会重名报错 可以使用别名guigu
    import {school, teach} from "./js/m1.js";
    import {school as guigu, findJob} from "./js/m2.js";
    
    // console.log(guigu, findJob);
    import {default as m3} from "./js/m3.js";
    console.log(m3);


  </script>
</body>
</html>

3 简便形式
index.html

<!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">
    // 3 简便形式 针对默认暴露
    import m3 from "./js/m3.js";
    console.log(m3);
  </script>
</body>
</html>

在这里插入图片描述

之前都是在script标签里面去写语句，一直这么写代码块会变得很大，所以我们可以把代码单独放在一个文件里面去编写

app.js

// 入口文件

// 模块引入
import * as m1 from "./m1.js";
import * as m2 from "./m2.js";
import * as m3 from "./m2.js";

console.log(m1);
console.log(m2);
console.log(m3);

index.html

<!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 src="./js/app.js" type="module"></script>
</body>
</html>

在这里插入图片描述

2.18.4 babel 对ES6 模块化代码转换

ES6在项目中使用，一般不用之前的引入方法，主要是兼容性问题。项目中会采用Babel转换

https://www.babeljs.cn/

Babel：将比较新的语法转换成浏览器能够识别的 ES5语法

1 先安装（我的安装有问题）
在这里插入图片描述

2 安装完毕之后，对代码转化

home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 安装工具 npm i babel-cli babel-preset-env browserify(webpack) -D
        2. 编译 npx babel src/js -d dist/js --presets=babel-preset-env
        3. 打包 npx browserify dist/js/app.js -o dist/bundle.js
     -->
     <script src="dist/bundle.js"></script>
</body>
</html>

我的安装有问题，目前还未解决

按照步骤之后就会新生成一个文件，dist 代码就会有所改变

在这里插入图片描述

在这里插入图片描述

相关文章：

  • 大数据专业毕业后职业前景如何？
  • Spring Boot 内置工具类应有尽有 建议收藏
  • TCP/IP协议专栏——IP 详解——网络入门和工程维护必看
  • VAPS XT开发入门教程05：预览与状态机
  • 第01章 第01章 数据结构基础和算法简介
  • SpringCloud和SpringCloudAlibaba的区别
  • 【C语言基础】Chap. 2. 基本概念
  • Google protobuf使用技巧和经验总结
  • Kotlin协程：Flow基础原理
  • linux格式化输入输出
  • 一篇文章告诉你，为什么必须要学Excel?
  • Intellij IDEA--Undo Commit，Revert Commit，Drop Commit的区别
  • 三个工厂模式（通俗易懂）
  • 本地环境下启动openFaas创建的Java的云函数
  • Java 第三阶段增强分析需求，代码实现能力【正则表达式】
  • DOM的那些事
  • ECS应用管理最佳实践
  • es6
  • git 常用命令
  • java概述
  • Just for fun——迅速写完快速排序
  • LeetCode刷题——29. Divide Two Integers（Part 1靠自己）
  • PAT A1120
  • Redis字符串类型内部编码剖析
  • Redux 中间件分析
  • Spark RDD学习: aggregate函数
  • Vim Clutch | 面向脚踏板编程……
  • 聚类分析——Kmeans
  • 问题之ssh中Host key verification failed的解决
  • 自定义函数
  • ionic入门之数据绑定显示-1
  • #NOIP 2014#Day.2 T3 解方程
  • #单片机（TB6600驱动42步进电机）
  • %3cscript放入php,跟bWAPP学WEB安全(PHP代码)--XSS跨站脚本攻击
  • (delphi11最新学习资料) Object Pascal 学习笔记---第2章第五节(日期和时间)
  • （考研湖科大教书匠计算机网络）第一章概述-第五节1：计算机网络体系结构之分层思想和举例
  • (每日持续更新）jdk api之StringBufferInputStream基础、应用、实战
  • （四）Tiki-taka算法（TTA）求解无人机三维路径规划研究（MATLAB）
  • （四）七种元启发算法（DBO、LO、SWO、COA、LSO、KOA、GRO）求解无人机路径规划MATLAB
  • （一）WLAN定义和基本架构转
  • (转)自己动手搭建Nginx+memcache+xdebug+php运行环境绿色版 For windows版
  • *++p：p先自＋，然后*p，最终为3 ++*p：先*p，即arr[0]=1，然后再++，最终为2 *p++：值为arr[0],即1，该语句执行完毕后，p指向arr[1]
  • .[backups@airmail.cc].faust勒索病毒的最新威胁：如何恢复您的数据？
  • .dwp和.webpart的区别
  • .NET CORE 3.1 集成JWT鉴权和授权2
  • .NET Framework杂记
  • .net 程序发生了一个不可捕获的异常
  • .NET中GET与SET的用法
  • .sh文件怎么运行_创建优化的Go镜像文件以及踩过的坑
  • @WebServiceClient注解，wsdlLocation 可配置
  • [ HTML + CSS + Javascript ] 复盘尝试制作 2048 小游戏时遇到的问题
  • [ 环境搭建篇 ] 安装 java 环境并配置环境变量(附 JDK1.8 安装包)
  • [C#]winform制作仪表盘好用的表盘控件和使用方法
  • [CISCN2019 华东南赛区]Web11
  • [CUDA手搓]从零开始用C++ CUDA搭建一个卷积神经网络(LeNet)，了解神经网络各个层背后算法原理