ES6笔记

---

用于加深自己对ES6的理解并且能够让自己更好的吸收和之后回顾，写的不咋好，望理解。

---

一、ES6 引入新的申明字符串的方式：

1. 内容中可以直接出现换行符

let str = `<ul>
                <li> 1 </li>
                <li> 2 </li>
            </ul>`

2.变量拼接

let str1 = 'hello'
let str2 = `${str1} world`

二、箭头函数

1.申明一个函数

//let fn = function(){  }
let fn = (a+b) => {
	return a + b
}
//调用函数
let result = fn(1,2);
//1.this指针是静态的，始终指向开始时的第一个值
//2.this不能作为构造函数
//3.不能使用arguments变量

//箭头函数适合与this无关的回调，定时器，数组的方法回调
//箭头函数不舍与this有关的回调，事件回调，对象方法

三、扩展运算符

const a = [1,2,3]
//申明一个函数
function fn(){
	console.log(arguments);
}
fn(...a); // fn(1,2,3)

1.扩展运算符的应用

//(1)数组合并
const a = [1,2,3]
const b = [6,7]
//const c = a.concat(b) 
const c  = [...a, ...b]

//(2)数组的克隆
const aa = [1,2,3]
const bb = [...aa]   //如果里面有引用类型的话，也是一个浅拷贝

//(3)将伪数组转为真正的数组
const divs = document.querySelectorAll('div')
const divArr = [...divs]

四、迭代器和生成器

1.生成器实例-1

//1秒后控制台输出111，2秒后后输出222,3秒后输出333
//回调地狱
/*
setTimeout(() => {
	console.log(111);
	setTimeout(() => {
		console.log(222);
		setTimeout(() => {
			console.log(333)
		},300)
	},2000)
),1000)
*/
function one(){
	setTimeout(() => {
		console.log(111);
		iterator.next();
	},1000)
}
function two(){
	setTimeout(() => {
		console.log(222);
		iterator.next();
	},2000)
}
function three(){
	setTimeout(() => {
		console.log(333);
		iterator.next();
	},3000)
}
function * gen(){
	yield one();
	yield two();
	yield three();
}
//调用生成器函数
let iterator = gen();
iterator.next();

2.生成器实例-2

//模拟获取 用户数据 订单数据 商品数据
function getUsers(){
	setTimeout(() => {
		let data = '用户数据';
		//调用next方法，并且将数据传入
		// 111
		iterator.next(data);
	})
}
function getOrders(){
	setTimeout(() => {
		let data = '订单数据';
		// 222
		iterator.next(data);
	})
}
function getGoods(){
	setTimeout(() => {
		let data = '商品数据';
		// 333
		iterator.next(data);
	})
}
//异步的
function * gen(){
	// 111
	let users = yield getUsers();
	console.log(users);
	// 222
	let orders = yield getOrders();
	console.log(orders);
	// 333
	let goods = yield getGoods();
	console.log(goods);
}
//调用生成器函数
let iterator = gen();
iterator.next();
/*
真实场景得不到结果
同步的
getUsers();
getOrders();
getGoods();
*/

五、Promise

1.使用Promise封装

//1. 引入fs模块
const fs = require('fs');
//2. 调用方法读取文件
/*
！！！！！多个异步任务，代码会不断的缩进！！！！！！
fs.readFile('./resouces/xx.md',(err,data) => {
	//如果失败
	if(err) throw err;
	//没有失败
	console.log(data.toString());
})
*/
//3. 使用Promise 封装
//使用Promise。就不会持续往里面缩进
const p = new Promise((resolve,reject) => {
	fs.readfILE("./resouces/xx.md",(err,data) => {
		//如果失败
		if(err) reject(err);
		//如果成功
		resolve(data);
	});
}); 
p.then((value) => {
	return new Promise((resolve,reject) => {
		fs.readFile("./resouces/aa.md",(err,data) => {
			resolve([value,data])
		})
	}).then((value) => {
		console.log(value)
	})

六、集合

1.Set

//set集合会去重
let s = new Set(['大事儿','小事儿','坏事儿','小事儿','好事儿'])；
//元素个数
console.log(s2.size);
//添加新的元素
s2.add('喜事儿')
//删除元素
s2.delete('坏事儿')
//检测
console.log(s2.has('糟心事'))
//清空
s2.clear();

2.集合实践

let arr = [1,2,2,3];
//1.数组去重
let result1 = [...new Set(arr)];
//2.交集
let arr2 = [3,4,5,6,5];
let result2 =  [...new Set(arr)].filter(item => {
	let s2 = new Set(arr2);
	if(s2.has(item)){
		return true;
	}else {
		return false;
	}
})
let result2 =  [...new Set(arr)].filter(item => new Set(arr2).has(item));
//3.并集
let union = [...new Set([...arr,...arr2])];
//4.差集
let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)))

3.Map

let m = new Map();
//添加元素
m.set('name','abc');
m.set('change',() => {
	console.log("abc");
})
let key = {
	school: 'school
}
m.set(ket,['北京','上海']);
//size
console.log(m.size);
//删除
m.delete('name');
//获取
console.log(m.get('change'));
console.log(m.get(key));
//清空
m.clear();
//遍历
for(let v of m){
	console.log(v);
}

七、类

1.Class介绍

class Phone{
	//构造方法
	constructor(brand,price){
		this.brand = brand;
		this.price = price;
	}
	//方法必须使用该语法，不能使用ES5的对象完整形式
	call(){
		console.log("我可以打电话");
	}
}
let onePlus = new Phone("1+",1999)
console.log(onePlus)

八、数值扩展

//0. Number.EPSILON 是JavaScript 表示的最小精度
//EPSILON  属性的值接近于2.2204460492503130808472633361816E-16
function qeual(a,b){
	if(Math.abs(a-b) < Number.EPSILON){
		return true;
	}else{
		return false;
	}
}
console.log(0.1+0.2 === 0.3)//false
console.log(equal(0.1+0.2,0.3))//true

//1. 二进制和八进制
let b = 0b1010; //二进制
let o = 0o777;	//八进制
let x = 0xff;  //十六进制

//2.Number.isFinite 检测一个数值是否为有限数
console.log(Number.isFinite(100))  	  //true
console.log(Number.isFinite(100/0))	  //false
console.log(Number.isFinite(Infinity)) //Infinity 无穷  fasle

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

//4.Number.parseInt Number.parseFloat字符串转整形
console.log(Number.parseInt('5211314love')) //5211314
console.log(Number.parseFloat('3.1415926哈哈')) //3.1415926

//5.Number.isInteger 判断一个数是否为整数
console.log(Number.isInteger(5)) //true
console.log(Number.isInteger(2.45)) //false

//6.Math.trunc 将数字的小数部门抹掉
console.log(Math.trunc(3.5)); //3

//7.Math.sign 判断一个数到底为正数 负数 还是零
console.log(Math.sign(100)); //1
console.log(Math.sign(0)); //0
console.log(Math.sign(-200)); //-1

九、ES7新特性 includes、**

//includes indexOf
const mingzhu = ['西游记','红楼梦','三国演义','水浒传']
console.log(mingzhu.includes('西游记'));//true
console.log(mingzhu.includes('金瓶梅'));//false

// **  
console.log(2 ** 10); //2的10次方 1024
console.log(Math.pow(2,10)); 

十、ES8新特性 async和await、对象方法扩展

//async 函数
async function fn(){
	//返回的不是一个promise类型的对象，则返回的结果就是成功的promise
	//return 'abc';
	//抛出错误，返回的结果是一个失败的Promise
	//throw new Error('出错了！')
	return new Promise((resolve,reject) => {
		resolve("成功的数据");
		//reject("失败的错误");
	})
}
const result = fn();
result.then(value => {
	console.log(value);
},reason => {
	console.warn(reson)
})

//创建promise对象
const p = new Promise((resolve,reject)=> {
	//resolve("成功的值");
	reject("失败了！")
})
//await 要放在 async 函数中.
async function main(){
	try {
		let result = await p;
		console.log(result);
	} catch (e) {
		console.log(e);
	}
}
//调用函数
main();

//对象方法扩展
//声明对象
const school = {
	name:"aaa"
	cities:['北京','上海','深圳']
	xueke: ['前端','JAVA','大数据','运维']
}
//获取对象所有的键
Object.key(school);
//获取对象所有的值
Object.values(school);
//entries
Object.entries(school);
//创建Map
const m = new Map(Object.entries(school));
m.get('cities'); //['北京','上海','深圳']

十一、ES9新特性

1.对象扩展运算符

function connect({host, port, ...user}){
	console.log(host);
	console.log(port);
	console.log(user);
}
connect({
	host: '127.0.0.1',
	port: 3306,
	username: 'root',
	password: 'root',
	type: 'master'
})

十二、ES10新特性

1.Object.fromEntries

//二维数组转化为一个对象
const result = Object.fromEntries([
	['name','abc'],
	['xueke','java','大数据','前端','云计算']
]);

//Map
const m = new Map();
m.set('name','zzz')
const result = Object.fromEntries(m);

//Object.entries ES8 对象转化为二维数组
const arr = Object.entries({
	name: 'abc'
})

2.trimStart 与 trimEnd

（1）trimStart 负责清除左侧空白
（2）trimEnd 负责清除右侧空白

3.flat 与 flatMap

//flat 平
//将多维数组转化为低维数组
const arr = [1,2,3,4,[5,6]];
arr.flat();
const arr1 = [1,2,3,4,[5,6,[7,8,9]]];
//参数为深度 是一个数字
arr.flat(2)

//flatMap
const arr = [1,2,3,4]
//二维数组
const result = arr.map(item => [item * 10])
//如果要转为一维数组
const result = arr.flatmap(item => [item * 10])

十三、ES11新特性

1.动态import

btnclick(){
	import(./hello.js).then(module => {
		module.hello();
	});
}

2.BigInt类型

//大整形
let n = 521n;
console.log(n,typeof(n));

//函数
let n = 123;
console.log(BigInt(n));
console.log(BigInt(1.2)); //不能用浮点数进行转换成BigInt

3.绝对全局对象globalThis

浏览器的全局对象指的是windows对象