ES6常用知识点梳理

let 和 const

 let 和 const 与 var 的区别：
	 1.增加块级作用域
		在es6之前，js只有一种作用域叫做函数作用域。
	2、没有预解析，不存在变量提升
	3、不能重复定义
	4、var声明的变量属于window, Let 和 const不是

const （const 声明的常量）和 let 的区别 
	1、初始化的时候必须赋值
	2、一旦赋值无法改变

**注：**使用的时候尽量不要使用 var ，变量用 let ，常量用 const

解构赋值

ES6允许按照一 定模式，对变量进行赋值，这被称为解构.
	数组模式
		let [a,b,c]=[1,2,3]
	对象模式
		let {a,b,c}={a:1,b:2, c:3}
	字符串模式
		let [a,b,c]='aaa'
	结构不成功
		undefined
	默认值
		let [a=0,b,c]=[1,2,3]

字符串

字符串模板
	` ` 可以支持换行
	${} 里面放变量

标签模板

字符串的便利: for... of

字符串方法：
	includes():返回布尔值，表示是否找到了参数字符串。
	startsWith():返回布尔值，表示参数字符串是否在原字符串的头部。
	endsWith():返回布尔值，表示参数字符串是否在原字符串的尾部。
	repeat方法返回一个新字符串，表示将原字符串重复n次。【0没有 ，1是本身，负数报错，小数取前面整数】
	padStart()用于头部补全【padStart(补位后总位数，补位的内容)  ，只写参数一默认空格补齐，参数一大于参数二加本身内容时自动重复参数二截取】
	padEnd()用于尾部补全【同上】
	trimStart()去除头部空格
	trimEnd()去除尾部空格

<script>
	// ` ` 可以支持换行
		/*let str= `<div>
			我足一个div
		</div>`;*/
	
	// 	${} 里面放变量
		/*var b='b';
		var str='a'+b+'c';*/
		/*let b='b';
		let str=' a${b}c";
		alert(str);*/
		
		/*let b=1;
		let str=' a${b+b}c ";
		alert(str)*/.
	
		function show(){
		return 'b' ;
		}
		Let str= “a${show()}c^;
		alert(str);
</script>

<script>
	//	trimStart()去除头部空格
		var str ='    hello     '
		console.log('|'+ str.trimStart() + '|')
	//trimEnd()去除尾部空格
		var str1 ='    hello     '
		console.log('|'+ str1.trimEnd() + '|')
</script>

数组

Array . from()
	方法用于将两类对象转为真正的数组:类似数组的对象和可遍历的对象
	类数组有两类arguments ,通过获取元素得到的类数组.本质特征只有一点， 即必须有Length属性,和下标

Array . of()
	用于将一组值， 转换为数组。
	
copyWithin()
	在当前数组内部，将指定位置的成员复制到其他位置(会覆盖原有成员)，然后返回当前数组。也就是说，使用这个方法，会修改当前数组
	
	Array. prototype . copyWithin(target, start = 0, end = this.length)
		target (必需) :从该位置开始替换数据。如果为负值，表示倒数。
		start (可选) :从该位置开始读取数据，默认为0。如果为负值，表示从末尾开始计算。
		end (可选) :到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

find() 和findIndex()
	find(回调函数)            返回的是一个符合条件的值没有 符合条件undefined
	findIndex(回调函数)       返回的是一个符合条件的下标没有符合 条件返回-1

fill()
	fill(替换的内容)                   全部替换
	fill(替换的内容,开始位置)
	fill(替换的内容,开始位置,结束位置)

includes()
	查看是否有这个数据，返回true，false
	
flat()
	数组的成员有时还是数组，用于将嵌套的数组"拉平”，变成- -维的数组。该方法返回一个新数组，对原数据没有影响

<script>
//flat()
	console.log([1,2,[3,4]].flat())
	console.log([1,2,[3,4,[5]]].flat(2))  // 不写参数 只展开一层 第二层显示 Array()
	console.log([1,2,[3,4,[5, [6]]]]. flat (Infinity))  // Infinity 不限
</script>

函数

函数参数默认值
	function(a=1, b=2){
	}
	
length
	指定了默认值以后，函数的Length属性，将返回没有指定默认值的参数个数。
	也就是说，指定了默认值后，Length属性将失真。

name属性
	函数的name属性，返回该函数的函数名。
	这个属性早就被浏览器广泛支持，但是直到ES6， 才将其写入了标准

箭头函数
(1) 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
(2) 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
(3) 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替。
(4)  不可以使用yield命令，因此箭头函数不能用作Generator 函数。
【如果这里面是一个参数括号可以不写,没有参数，或者多个参数必须加()
  如果这个函数体里面只有一句话，可以不用加{} return 省略 】

<script>
	function Person(name= '张三' , age=18){
		this . name=name ;
		this . age=age;
	}
	var p1=new Person();
	console.log(p1. name)
</script>

<script>
	/*
	function show(a,b, c){
	
	}
	show(1,2,3)
	alert(show. Length) //控制台输出  3
	*/
	
	/*
	function show(a,b){
	
	}
	show(1,2,3)
	alert(show. Length) //控制台输出  2
	*/
	
	/*
	function show(a,b, c){
	
	}
	show(1,2)
	alert(show. Length) //控制台输出  3
	*/
	
	function show(a,b, c=3){
	
	}
	show(1,2,3)
	alert(show. Length) //控制台输出  2
</script>

rest运算符 【…】

又叫 `...` 运算符，剩余参数运算符，扩展运算符

1、把非数组变成数组
2、把数组变成一堆数据
3、复制数组  【深拷贝】
4、合并数组
5、配合解构赋值
6、对象中使用
	let{x,y,...z}={x:1,y:2,a:3,b:4};
7、复制对象
	let o2={b:2};
	let{...03}=o2;
8、合并对象

//复制数组  【深拷贝】
<script>
	var arr=[1,2,3,4];
	var arr2=[.. .arr];
	arr2. push(5)
	console. log(arr2, arr)
	//控制台输出  arr2 12345
	//           arr 1234
</script>

//合并数组
<script>
	var arr=[1,2,3,4];
	var arr2=[5,6,7];
	consoLe.log([.. .arr,.. .arr2] )
</script>

//配合解构赋值
<script>
	Let [a,...arr]=[1,2,3,4,5];
	console.log(a, arr)
</script>

对象

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法

0bject . assign()对象合并
	重名的属性，后面的覆盖前面的
	object.assign()拷贝的属性是有限制的，只拷贝源对象的自身属性(不拷贝继承属性)，也不拷贝不可枚举的属性(enumerable:false)
	0bject. assign()可以用来处理数组，但是会把数组视为对象。

0bject . is()
	判断两个东西是否相等

<script>
	var json={
		fn(){
			alert(3);
		}
	}
	json.fn();
</script>

class

class的写法
	class类名{
	}
	
继承
	class 子类 extends父类 {
		constructor() {
			super() ;
		}
	}

实例属性的新写法
	class 类名 {
		属性=xxx;
	}

静态方法
	类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为"静态方法"。
	父类的静态方法，可以被子类继承。
	
静态属性.
	静态属性指的是Class本身的属性,而不是定义在实例对象上的属性
	目前，只有这种写法可行，因为ES6明确规定，Class 内部只有静态方法，没有静态属性。现在有一个提案提供了类的静态属性，写法是在实例属性的前面，加上static关键字。

新的数据类型——Symbol

ES6之前对象属性名都是字符串，这容易造成属性名的冲突，为了保证每个属性的名字都是独一无二ES6引入SymboL
Symbol是一种新的原始数据类型，表示独一无二的值。它是JavaScript 语言的第七种数据类型，前六种是: undefined、 null、布尔值(Boolean)、字符串(String) 、数值(Number)、对象(Object) 。
Symbol值通过SymboL函数生成。这就是说，对象的属性名现在可以有两种类型，-种是原来就有的字符串，另- -种就是新增的Symbol 类型	凡是属性名属于SymboL 类型，就都是独一-无二的，可以保证不会与其他属性名产生冲突。
SymboL函数可以接受一个字符串作为参数，表示对SymboL 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。
Symbol. description
Symbol作为属性名，遍历对象的时候，该属性不会出现在for...in. for.. . of循环中，也不会被0bject. keys()、0bject	. getOwnPropertyNames()、JSON. stringify()返回。

新的数据结构 set map

set它类似于数组，但是成员的值都是唯一 -的， 没有重复的值。

声明方式
	Lets=newSet();
	s. add(1)

	或者
	
	Let s = new Set([1, 2, 3, 4, 4]);

set相关方法
	add(): 向Set结构加入成员
	delete(value): 删除某个值，返回一个布尔值，表示删除是否成功。
	has(value): 返回一个布尔值，表示该值是否为Set的成员。
	clear():   清除所有成员，没有返回值

变成真正的数组
[...set]

长度
	set. size

去重
	[... new Set(array)]

遍历
	forEach
	for-of
		keys() 返回键名的遍历器
		values() 返回键值的遍历器.
		entries() 返回键值对的遍历器

<script>
	let set1=new Set([1,2,3,4,5,5])
	set1.forEach((v)=>{
		console.log(v)
	})
</script>

map键可以是任何数据类型的对象

声明方式
	const m = new Map();
	const 0 = {p: 'Hello World'};
	m.set(o，'content')

方法
	set()  添加
	get()  获取
	has()  返回一个布尔值，表示该值是否为map的成员
	delete ()  删除
	size
	cLear()  清除

遍历
	forEach
	for-of
		keys()返回键名的遍历器
		values()返回键值的遍历器
		entries()返回键值对的遍历器#

模块化

导出
	export        一个js文件就是一个模块
	
引入
	import
		defaule

var a=1;
var b=2;
//方法1
export {a as aaa,b as bbb} //as 可以把a从新取名aaa

//方法2
//export defaule {a ,b} // defaule抛出  后面可以用任意去接

< ! DOCTYPE htmL>
<htmL lang="en">
<head>
	<meta charset= "UTF-8">
	<title>Title</title>
</head>
<body>

</body>
</html>

<script type= "module">
	//import 'js 文件路径' --引入整个文件 全部加载
	
	//方法1
	// import * as mod from 'js 文件路径' ;   //*取全部 从新命名为 mod
	// console.log(mod.a, mod.b)
	
	import {aaa as a,bbb as b} from 'js 文件路径';  //as 可以把aaa从新取名a
	console.log(a, b)

	//方法2
	// import def from 'js 文件路径' ;   //def任意取名
	// console.log(def.a, def.b)
</script>

动态引入

...
<script type= "module">
	//引过来一个promise对象  异步使用 这是一个回到函数
	import('js 文件路径').then((res)=>{   
		console.log(res)
	})
</script>

es6模块化
1、必须放在服务器环境中
2、import ‘xXx’ 直接写路径，相当于引入文件，
3、关于路径可以写相对也可以写绝对
4、多次引入相同的模块，只相当于一次
5、引入模块的时候，会预加载提升到开头
6、模块化的写法必须是严格模式，es6所有都是严格模式

es6模块化好处
1.一个模块一个js文件
2、可以安需求加载，如果不需要可以不加载
3、模块小，便于维护、减少冗余
4、每个模块都有自己的作用域，变量都是私有变量

Promise [本身是同步]

在ES6以前，解决异步的方法回调函数。
promise就是为了解决异步请求
promise是一个对象，是一个容器，装的就是异步的操作(未来才会产生的事情)

<script>
	var p1=new Promise( (resolve , reject)=>{
		//resolve异步操 作成功时而要执行的
		//reject异步操作失败时需要执行的
		if(true){ //a是异步操作的结果
			resolve('成功')
		}else{
			reject('失败');
		}
	});
	p1.then((res)=>{
		//成功时需要执行的
		console.log(res)
	},(err)=>{
		//失败时需要执任的
		console.log(err);
	})
</script>

整个promise对象是有三种状态
		pending 			等待
		resolved 			成功后
		rejected 			失败后

promise的特点:
	状态不受外界的影响，
	状态的变化只有两种可能 ，过程不可逆
		pending--resolved  【等待→成功】
		pending--rejected  【等待→失败】
		
Promise.all([p1, p2, p3]).then((res)=>{
	//res是一个数组接受的是p1, p2, p3返回的数据
})

all的特点必须，所有异步操作全部执行完毕，才会执行then

then可以一直往下走	可以多个
catch错误执行的代码	只能有一个

generator

generator也是函数，普通函数- - 路到底，中间不会停，generator可以暂停

function *函数名(){
}

	yield
		暂停             分成n段需要n-1和yieLd，需要n个next
		能传中间参数      第一个next不能传参
		能返回中间结果

async

async是Generator函数的语法糖。（进行了二次封装）

把异步变为同步
async function 函数名() {
	Let a1 = await   操作;
	Let a2 = await   操作;
	return stockPrice;
}