ES6

Posted 2020-11-25 cl94

ES6:
	①let
		特点：1 只能作用域当前作用域中；
			  2 使用let或者const声明的变量，不能再被重新声明；
			  3 let不存在变量提升
				  	比如：
				  		console.log(dad);
				  		var dad = 1;
				  		不会报错，因为上面的代码会被变量提升为：
				  		var dad;
				  		console.log(dad);
				  		dad = 1;
	②const
		特点：1 声明时必须赋值
			  2 特性与let类似
			  3 不可变。但常量为引用类型时，不能保证不变
	③扩展运算符
		const arr1 = [1,2];
		const arr2 = [3];
		console.log([...arr1,...arr2]); // [1,3,4];
	④解构赋值
		解释：是一个语法，使得可以将值从数组或属性从对象提取到不同的变量中
		1 数组的解构赋值
			const arr = [1,2,3,4];
			let [a,b,c,d] = arr;
			复杂点的
			const arr = [1,[2,3]];
			let [,[,x]] = arr;
			与扩展运算符相结合的:
			const arr1 = [1,2,3];
			const [a,...b] = arr1;
			console,log(b); // [2,3]	  
			交换变量:
			let a = 2,b=3;
			[a,b] = [b,a];
		2 字符串解构赋值
			const arr = ‘i am a teacher‘;
			const [a,b,c,...oth] = arr;
		3 对象的解构赋值
			const obj = {
				saber:‘xx‘,
				archar:‘yy‘,
			}
			const {saber,archar} = obj;
			常用用法：接收函数的返回值解构赋值与函数形参接收实参的解构赋值
	⑤模板字符串
		let demo = "c";
		let html = `
			<li>${demo}</li>
		`;
	⑥箭头函数
		const add1 = (a, b) => a + b;
		const add2 = arr => void arr.push(‘b‘);

		等比于：  
			const add1 = function(a,b){
				return a + b;
			}
			const add2 = function(arr){
				arr.push(‘b‘);
			}
		两者区别：
			箭头函数没有argument对象;
			箭头函数的this指向当前环境所处的this;
			例子：
				const add1 = function({name}){
					this.name = name;
					setTimeout(() => {
						this.age = 123;
						console.log(this); // [object Object]: {age: 123, name: "tom"}
					})
				}
				new add1({name:‘tom‘}); 
	⑦对象的简洁表示法
		let name = ‘tom‘;
		const user = {
			name,
			say(){
				console.log(‘i am ‘+this.name);
			}
		}
	⑧对象的属性名表达式
		let name = ‘huam‘;
		const user = {
			[name] : ‘xx‘
		}
	⑨Promise
		解释：Promise对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值
		要点：promise改善了传统回调造成的代码难维护，控制反转等问题，它是异步的
			传统回调：
				function f(cb){
					setTimeout(function(){
						cb && cb();
					},1000)
				}

				f(function(){
					console.log(1)
					f(function(){
						console.log(2)
						f(function(){
							console.log(3)
							f(function(){
								console.log(4)
								f(function(){
									console.log(5)
									f(function(){
										console.log(6)
									});
								});
							});
						});
					});
				})
			promise回调：
				function f(){
					return new Promise((resolve,reject) => {
						setTimeout(function(){
							console.log(0);
							// 一旦决议不可逆，且不再执行下面的
							// 决议：succ
							resolve();
							// 决议：err
							reject();
						},1000);
					});
				}
				// 回调链
				f()
					.then(data=>{
						console.log(1);
						return f();
					},err => {
						console.log(‘err1‘);
						return f();
					})

					.then(data=>{
						console.log(2);
					},err => {
						console.log(‘err‘);
					})

			Promise.rece() 竞速
				function getData1(){
					return new Promise((resolve,reject) => {
						setTimeout(() => {
							console.log(‘第一条数据加载成功‘);
							reject(‘err‘);
						},1000)
					})
				}
				function getData2(){
					return new Promise((resolve,reject) => {
						setTimeout(() => {
							console.log(‘第二条数据加载成功‘);
							resolve(1);
						})
					})
				}
				function getData3(){
					return new Promise((resolve,reject) => {
						setTimeout(() => {
							console.log(‘第三条数据加载成功‘);
							resolve();
						},1000)
					})
				}
				let p = Promise.race([getData1(),getData2(),getData3()]);
				p.then(data => {
					console.log(data); 
				},err => {
					console.log(e);
				}) 
				/*
				第二条数据加载成功
				demo.html:35 1
				demo.html:8 第一条数据加载成功
				demo.html:27 第三条数据加载成功
				*/

			Promise.all() 把多个promise实例包装成一个新的promise实例
				function getData1(){
					return new Promise((resolve,reject) => {
						setTimeout(() => {
							console.log(‘第一条数据加载成功‘);
							resolve(‘‘);
						},1000)
					})
				}
				function getData2(){
					return new Promise((resolve,reject) => {
						setTimeout(() => {
							console.log(‘第二条数据加载成功‘);
							resolve(1);
						},1000)
					})
				}
				function getData3(){
					return new Promise((resolve,reject) => {
						setTimeout(() => {
							console.log(‘第三条数据加载成功‘);
							resolve();
						},1000)
					})
				}
				let p = Promise.all([getData1(),getData2(),getData3()]);
				p.then(data => {
					// 请求成功的返回值组成的数组
					console.log(data); 
				},err => {
					// 万一失败，进入这里
					console.log(err);
				}) 
			// p1,p2完全是等价的
				let p1 = new Promise(resolve => {
					resolve(‘succ‘);
				})
				let p2 = Promise.resolve(‘succ‘);

				p1.then(res => {
					console.log(res);
				})
				p2.then(res => {
					console.log(res);
				})

			// 同步任务 变成 异步任务
			// -- 异步任务一定是在同步任务之后执行的
				function createAsyncTask(syncTask){
					return Promise.resolve(syncTask).then(syncTask => syncTask());
				}
				createAsyncTask(()=>{
					console.log(‘异步来了‘)
					return 1;
				}).then(res => {
					console.log(res);
				})
	①0
		//类与对象，ES6的类是ES5类的语法糖
			class Car{
				// 静态属性
				static area = ‘美国‘;
				// 构造函数
				constructor(wheel,color){
					// new.target -- 指向new关键字后面的类
					if(new.target !== Car){
						throw Error(‘必须使用new关键字调用Car！‘);
					}
					// this -- 当前对象
					this.wheel = wheel;
					this.color = color;
					this.speed = 0;
					console.log(‘c‘)
				}

				// 加速
				speedUp() {
					this.speed += 1;
				}
				// 静态属性
				static getArea(){
					// this -- 当前类
					alert(this.area);
				}

				// setter 设置器
				set color(v){
					console.log(‘设置color值:‘+v);
					this.v = v;
				}
				// getter 获取器
				get color(){
					console.log(‘获取color值‘);
					// 获取color值
					return ‘颜色‘+this.v;
				}
			}
			const car = new Car(3,‘#ff0‘); 
			Car.getArea();
			car.color;