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

    文章目录

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    在这里插入图片描述

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

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

    • 1
    • 2
    • 3
    • 4
    • 5

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

    • 1
    • 2
    • 3
    • 4
    // Number.isNaN 检测一个数值是否为 NaN 
console.log(Number.isNaN(123)); 

    • 1
    • 2

    Number.parseInt() 与 Number.parseFloat()

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

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

    • 1
    • 2
    • 3

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

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

    • 1

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

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

    • 1
    • 2
    • 3

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

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

    • 1
    • 2
    • 3

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    m1.js

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

export let school = '尚硅谷';

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在这里插入图片描述

    eg2: 统一暴露

    m2.js

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

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

export{school, findJob}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    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>Documenttitle>
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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    在这里插入图片描述

    eg3: 默认暴露

    m3.js

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    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>Documenttitle>
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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    在这里插入图片描述

    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>Documenttitle>
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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    之前都是在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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    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>Documenttitle>
head>
<body>

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    在这里插入图片描述

    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>Documenttitle>
head>
<body>
    
     <script src="dist/bundle.js">script>
body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

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

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

    在这里插入图片描述

    在这里插入图片描述

  • 相关阅读:
    初级测试到中级测试就差这几个找bug小技巧
    vue项目，程序控制台不报错，但是也没有达到预期
    软件工程：墨菲定律，潜在问题管理的艺术
    java-php-net-python-简历网站计算机毕业设计程序
    基于scrapy+flask的疫情数据可视化
    【JVM】对象内存布局
    pandas之连续数据转离散阶梯分布
    3.Linux文件管理命令-----ls显示文件名
    Dubbo学习-03-zookeeper和Dubbo Admin安装
    [附源码]计算机毕业设计springboot医疗器械公司公告管理系统
  • 原文地址：https://blog.csdn.net/weixin_51249285/article/details/126610042