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

最新推荐文章于 2024-06-18 17:08:25 发布
最新推荐文章于 2024-06-18 17:08:25 发布
阅读量259 收藏
点赞数 1
分类专栏： ES6 文章标签： es6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51249285/article/details/126610042
版权

文章目录

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 代码就会有所改变

在这里插入图片描述

在这里插入图片描述

香甜的甲基橙
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ECMAScript（ES6+）
m0_61044901的博客
06-12 694
ECMAScript（ES6+）
ES6新特性：模块化（import 和 export）
流楚丶格念的博客
02-21 1920
文章目录说明 说明 模块化就是把代码进行拆分，方便重复利用。 类似java中的导包：要使用一个包，必须先导包。 而JS中没有包的概念，换来的是模块。 模块功能主要由两个命令构成： export 和 import 。 export 命令用于规定模块的对外接口， import 命令用于导入其他模块提供的功能。 比如我定义一个js文件:Util.js，里面有一个Util类 ,使用export将其暴露出去 class Util { static sum = (a, b) => a + b; } //导出
JavaScript ES6新特性（二）：模块化
qq_40837310的博客
01-23 603
简介 模块化指的是将一个很大的程序文件按照一定的规则进行拆分，然后根据需要进行引入组合。 好处： 防止命名冲突。 代码复用。 高维护性。 语法： 主要分为暴露语法和引入语法。 暴露语法： 在js代码块中： 有三种暴露方式 // 对外暴露 //每个自身暴露 export let personName = "Yehaocong"; export let fun = function(){ console.log("fun被调用了"); } //统一暴露 let a = 1; let b =
ES6(ECMAScript 6.0) 新特性
最新发布
2301_76144723的博客
06-18 1007
（1）解构就是取出数据，解构赋值是对赋值运算符的扩展（2）是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值（3）主要有两种形式： 数组解构和对象解构（1）模板字符串使用反引号 `` 将字符串包裹（2）可作为普通字符串（3）可用来定义多行字符串，即可以将换行字符串原生输出（4）字符串插入变量和表达式, 使用 ${}（5）字符串中可以调用函数（1）箭头函数提供更加简洁的函数书写方式。（2）基本语法是：(参数列表) => { 函数体 }
ES6新特性--模块化
u013185175的博客
03-29 708
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。(3).暴露方式3.把内容当作是一个对象default来使用。import 命令用于输入其他模块提供的功能。(4).简便形式(这里的简便形式是能够针对默认暴露）export 命令用于规定模块的对外接口。(3).使用解构赋值的形式获取默认暴露。5.模块化应用示例--暴露数据汇总。6.模块化应用示例--引入数据汇总。(2).使用解构赋值的形式来获取。(1).防止命名冲突。(1).通用的导入方式。4.模块化相关的语法。(2).暴露的方式2。
ES6新特性模块化
来啊 快活啊
03-18 801
使用export和import实现模块化。 原理、使用方式。 TODO
es6-umd-module-howto:用于从ES6 JavaScript创建通用模块应用程序的可扩展样板
05-17
es6-umd-module-howto 可扩展的样板，用于从ES6 JavaScript创建通用模块/应用程序。 使用这个最小的样板，我们展示了如何定义ES6类并将它们有选择地导出为一个名为my-module.js模块。 该模块由三个ES6类Base ， ...
es6-module-transpiler-dist-formatter:ES6 模块转译器扩展到输出 Dist Bundle 格式
07-11
由于此格式化程序是 [es6-module-transpiler] 的插件，您可以将它与任何现有的支持 [es6-module-transpiler] 作为底层引擎的构建工具一起使用，以转换 ES6 模块。 您只需要确保这些工具可以访问es6-module-...
ES6新特性之字符串的扩展实例分析
08-30
下面将详细阐述这些新特性，包括ES6中字符串函数的扩展、新增的常用函数以及模板字符串的使用。 首先，我们来看看ES5中的一些基本字符串函数： 1. `concat()`：这个函数用于合并两个或多个字符串，返回一个新的...
ES6新特性之函数的扩展实例详解
08-30
在ECMAScript 6（简称ES6）中，函数的使用方式得到了显著的增强，引入了多项新特性，包括函数参数默认值、rest参数、扩展运算符以及箭头函数。这些特性使得编写JavaScript函数更加灵活，同时也提高了代码的可读性...
es6-module-transpiler-globals-formatter:ES6 模块转换器扩展以将导出的内容输出为全局变量
06-25
ES6 模块转换器扩展以将导出的内容输出为全局变量。 安装 $ npm install --save-dev es6-module-transpiler-globals-formatter 用法 只需将formatter键设置为GlobalFormatter的实例。 不过，请记住设置要首先使用的...
ECMA新特性
lcymt的博客
02-08 173
ECMA新特性 名称 标准版本 发⾏时间 ECMAScript 2019（ES2019） 10 2019年6⽉ ECMAScript 2018（ES2018） 9 2018年6⽉ ECMAScript 2017（ES2017） 8 2017年6⽉ ECMAScript 2016（ES2016） 7 2016年6⽉ ECMAScript 2015（ES2015） 6 2015年6⽉ ECMAScript 5.1（ES5.1） 5.1 2011年6⽉ ECMAScri
es6新特性之模块化开发
Sumshine12.5
03-27 1532
以往我们是直接引入一些外部的js文件，有多少引多少，这样会造成一个js文件夹很多js文件，而且要一个一个的引入，影响浏览速度 在es6中支持了模块化开发，即你只需要引入一个入口的js文件，并不需要输入script标签引入 这一点有点像python 但是现在的浏览器是不支持es6的模块化的，我们能需要通过webpack这个工具进行打包已实现模块化开发 模块化基本语法 导出 export name导...
【Javascript】【模块化】通过ES6新特性实现模块化
天天向上 Up Up Up (*^▽^*)
05-29 309
快速学习ES6新特性-模块化
逍遥云恋
01-18 375
1.13、模块化 1.13.1.什么是模块化 模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。而JS中没有包的概念，换来的是 模块。 模块功能主要由两个命令构成： export 和import 。 export 命令用于规定模块的对外接口， mport 命令用于导入其他模块提供的功能。 1.13.2、export 比如我定义一个js文件:Util.js，...
ECMAScript新特性
weixin_45313351的博客
05-24 242
模板字符串 // 可支持换行 const msg = ` hey boy ` // 支持插值表达式 const name = 'zsl' const msg2 = `hey ${name} -- ${1 + 1} --- ${Math.random()}` console.log(msg2) // hey zsl -- 2 --- 0.7603014058103252 // 可以在定义模板字符串之前添加一个标签 //
ES6特性：模块化、包管理器简单使用
lalala_dxf的博客
05-07 1287
文章目录简介语法方面ES6和ES5的区别变量方面函数方面 自学文档 babel文档 简介 ES6是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等，ES6 的第一个版本，在 2015 年 6 月发布了正式名称就是《ECMAScript 2015 标准》（简称 ES2015）。 ES6在ES5的基础上拓展了很多新特性。 JavaScript包含三部分：ECMAScript、DOM、BOM，其中ECMAScript是JavaScri.
ECMAScript 2015（ES6）
PSG_li的博客
10-14 655
ECMAScript 6 也称为 ES6 和 ECMAScript 2015。 本文介绍 ES6 中的一些新特性。
(ES6之外)各ECMA版本新特性概览
weixin_34174322的博客
01-24 750
◈ ES5新特性 ES5的新特性主要在扩展Object、Array、Function等内建对象的功能上，另外引入了strict mode 和 JSON对象等 ♢ 对Object对象的扩展 Object.getPrototypeOf(o) Object.getOwnPropertyDescriptor(o,p) Object.getOwnPropertyNames(o) Object.create...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值