ES学习4

最新推荐文章于 2024-07-21 23:55:11 发布

aneyal

最新推荐文章于 2024-07-21 23:55:11 发布

阅读量299

点赞数 1

分类专栏：前端学习文章标签： ES 学习前端 javascript

本文链接：https://blog.csdn.net/aneyal/article/details/124127488

版权

前端学习专栏收录该内容

47 篇文章 2 订阅

订阅专栏

数值扩展

Number.EPSTLON

Number.EPSTLON是规定的最小精度，如果两数之差小于Number.EPSTLON，则可以认为这两个数相等

常用于浮点数计算

二进制和八进制

使用0b表示二进制，0o表示八进制，0x表示十六进制

Number.isFinite()

该方法检测一个数是否为有限数

Number.isNaN()

Number.isFinite()检查一个数值是否为NaN

Math.trunc()

Math.trunc()将数值的小数部分抹掉

Math.Sign()

Math.Sign()判断一个数是整数、负数还是0

对象方法扩展

Object.is()

判断两个值是否完全相等

其与===的区别是：

判断两个NaN是否相等时，Object.is()的结果是true，===的结果是false

Object.assign()

用于对象的合并，对于相同的属性，后面的对象的属性值会覆盖前一个对象的属性值

Object.setPrototypeof()

用于设置原型对象

Object.getPrototypeof()

用于获取原型对象

模块化

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

好处：防止命名冲突、便于代码复用、具有高维护性

语法

主要由export和import实现

export：用于规定模块的对外接口

import：用于输入其他模块提供的功能

		<script type="module">
			// 引入模块module.js
			import * as m1 from "./module.js";
			// 解构赋值形式
			// import{fn as fn0,a} from "./module.js";
			// fn0();
			// 注意，解构赋值形式引入默认暴露时，要给default赋别名
			// import {default as m1} from "./module.js";
			// m1.fn2();
			// 简便形式，只针对默认暴露
			// import m1 from "./module.js";
			// m1.fn2();
			// 调用module中的函数
			m1.fn();
			m1.fn1();
			m1.default.fn2();
		</script>

mudule.js里：

//分别暴露
export let a=1;
export function fn(){
	console.log('module');
}
//统一暴露
let b=0;
function fn1(){
    console.log('module1');
}
export{b,fn1};
//默认暴露
export default{
    school:'SCU';
    fn2:function(){
         console.log('module2');
    }
}

babel

有些浏览器不支持模块化，所以使用babel进行代码转换，将代码转换为浏览器支持的代码。

jQuery

ES6引入jQuery包可以使用:import $ from 文件路径

ES7新特性

Array.prototype.includes

用来检测数组中是否含有某元素，返回布尔类型

指数操作符

**，幂运算

ES8新特性

async函数和await表达式

async函数

async函数返回对象是promise对象，其结果由async函数执行的返回值决定

		<script>
			// 定义async函数
			async function fn(){
				// 如果return的值不是promise对象，则函数返回的promise对象都是成功的
				// 抛出错误，返回的结果是一个失败的promise对象
				// 如果return的是一个promise对象，则函数返回的promise对象成功与否取决于return的promise对象
				return 1;
				
			}
		</script>

await表达式

await表达式必须写在async函数中，await右边的表达式一般是promise对象，而且await返回的是这个对象成功的值，如果这个promise对象失败了，就会抛出异常，需要通过try...catch捕获处理

		<script>
			// 定义一个promise对象
			const p=new Promise((resolve,reject)=>{
				resolve('成功值');
			})
			async function fn(){
				// await表达式
				let result =await p;
				console.log(result);
			}
			// 输出 成功值
			fn();
		</script>

async函数和await表达式结合使用

		<script>
			function getdata(data){
				return new Promise((resolve,reject)=>{
					resolve('get '+data);
			})
			}
			async function read(){
				let a=await getdata('first');
				console.log(a);
				let b=await getdata('next');
				console.log(b);
				let c=await getdata('last');
				console.log(c);
			}
			read();
		</script>

对象方法扩展

Object.values()

返回一个给定对象的所有可枚举属性值组成的数组

Object.entries()

返回一个给定对象的自身可遍历属性[key,value]组成的数组

Object.getOwnPropertyDescriptors()

获取对象属性的描述对象

ES9新特性

rest参数和扩展运算符

在ES9中提供了像数组一样的rest参数

扩展运算符可以将对象拆分成由键值对组成的序列

正则扩展

命名捕获分组

		<script>
			let s='my name is lili and i am 18 yesrs old';
			// 提取名字和年龄
			// 不使用命名捕获分组
			// const reg= /my name is (.*) and i am (.*) yesrs old/;
			// const result=reg.exec(s);
			// // 输出lili
			// console.log(result[1]);
			// 命名捕获分组，更方便提取捕获的数据
			const reg1= /my name is (?<name>.*) and i am (?<age>.*) yesrs old/;
			const result=reg1.exec(s);
			// 输出lili
			console.log(result.groups.name);
		</script>

反向断言

<script>
			// 定义字符串
			let s='7wugsdd6yq是87679好的'
			// 获取好的前面和是后面的数字
			// 正向断言，根据后面的内容来判断前面的内容是否合法
			const reg=/\d+(?=好的)/;
			result=reg.exec(s);
			// 输出87679
			console.log(result[0]);
			// 反向断言，根据前面的内容来判断后面的内容是否合法
			const reg1=/(?<=是)\d+/;
			result1=reg1.exec(s);
			// 输出87679
			console.log(result1[0]);
		</script>

dotAll模式

dot是.的意思，元字符，表示除换行符以外的任意单个字符

实际应用中可以用.*通配替代换行符

对象扩展方法

Object.fromEntries

创建数组，其参数是二维数组或map类型

		<script>
            //参数为二维数组
			const o=Object.fromEntries([
				['name','lili'],
				['age',18]
			])；
            // 参数为map
			const m=new Map();
			m.set('grade',6);
			const o1=Object.fromEntries(m);
			console.log(o1);
		</script>