ES6常用语法学习

let/const/var

const:定义一个常量，不可改变

const a =1; 
let b=2;
var c=4;

• let和var都可以声明为一个变量
• let只在声明的代码块中有作用
• var的作用范围比let的作用范围大

数组、对象的匹配赋值

<script>
// const、let 、var
    let [a,b,c] =[1,2,3];
    console.log("a="+a);
    console.log("b="+b);
    console.log("c="+c);
// ---解构赋值(匹配赋值)	----
let [d,e,f]=[1,3,5];
console.log("d="+d);
console.log("e="+e);
console.log("f="+f);
let {g,h}={g:"1",h:"2"};
console.log("g="+g);
console.log("h="+h)
</script>

浏览器控制台输出

模板字符串

<script>
/*
模板字符串
反引号(`)
*/
let a="中国";
let b="我是"+a+"人";
let c=`我是${a}人`
console.log(c)
</script>

控制台输出：我是中国人

函数

• 参数默认值

<script>
// 函数
// 1.参数默认值
function test(a,b=2){
	console.log(a+b);
}
// a=1,b的默认值是2
test(1);//输出3
//a=1,b的默认值是2,传入参数设置b=3
test(2,3);//输出5
</script>

• 惰性求值

// 惰性求值
let b=1;
function test2(a=b+1){
	//a的值等于传入参数b的值加1
	console.log(a);
}
//b初始值为1,a=1+1=2
test2();
b=3;
//b此时值等于3，a=3+1=4
test2();
</script>

箭头函数

<script>
function context(){
	this.a=1;
	return{
		test1:()=>{
			//此函数this指代的是当前对象,return之前，this声明了变量a,所以输出1
			console.log(this.a);
		},
		test2:function(){
			//此函数this指向当前function,当前function内没有变量a,所以输出undefined
			console.log(this.a);
		}
	}
}
context().test1();//输出1
context().test2();//输出undefined
</script>

rest参数

在参数不确定的情况下可使用

<script>
// rest参数
/* 
 根据条件设置不同的参数值 
 1.调用方法的时候传进去
 2.声明函数参数的时候用表达式，调用前给表达式内的变量赋值
 */
function test3(...params){
	// 控制台输出[1,2,3]
	console.log(params);//这就是一个数组
}
test3(1,2,3)
</script>

扩展预算符

三点运算符，将一个数组转为用逗号分割的参数序列

<script>
// 扩展运算符
console.log(...[1,2,3]);
function add(a,b){
	return a+b;
}
console.log(add(...[1,2]));
// 求数组中最大值
console.log(Math.max(...[1,2,3]));
// 复制数组
let arr1=[1,2,3];
let arr2=[...arr1];
console.log("arr2",arr2);
// 合并数组
let arr3=[1,2,3],arr4=[4,5,6],arr5=[7,8,9];
console.log(...arr3,...arr4,...arr5);
</script>

控制台输出

属性方法简写

看vue项目有的时候，我们声明data中的属性，以及export
export { imgView} 等同于 export {imgView:imgView}

<script>
// 属性方法简写
let pro="1";
// 属性名为变量名，属性值为变量的值
let obj ={pro};
console.log(obj);
// 对象里面的方法（函数）
let obj2={
	say:function(){
		console.log("说话");
	},
	run(){
		console.log("跑步");
	}
}
obj2.run();
obj2.say();
</script>

控制台输出

Object.assign

复制对象

<script>
// 复制对象
let obj1={a:1,b:2};
let obj2=Object.assign({},obj1);
console.log(obj2);
let obj3={...obj1};
console.log(obj3);
</script>

控制台输出

Promise

<script>
// Promise
function test(flag){
	console.log(flag);
	return new Promise((resolve,reject)=>{
		setTimeout(()=>{
			if(flag==1){
				// resolve：处理成功
				resolve("success");
			} else{
				// reject：处理失败
				reject("fail");
			}
		},2000);
	});
}
// then 会返回两个函数，成功回调，失败回调，或是在catch里处理失败也是可以的
test(1).then(data=>{
	console.log(data);//输出1和success
});
test(2).then(data=>{
	console.log(data);//输出2和fail
}).catch(data=>{
	console.log(data);
});
test(2).then(data=>{
	//返回2
	console.log(data);
},(data)=>{
	//失败回调 输出fail
	console.log(data);
});
</script>

Promise.all

<script>
// Promise.all() 接收一个数组为参数
var p1=new Promise(resolve=>{
	setTimeout(()=>{
		// resolve成功返回
		resolve({id:'0001',test:'p1'});
	});
});
var p2=new Promise(resolve=>{
	setTimeout(()=>{
		// resolve成功返回
		resolve({id:'0002',test:'p2'});
	});
});
var p3=new Promise(resolve=>{
	setTimeout(()=>{
		// resolve成功返回
		resolve({id:'0003',test:'p3'});
	});
});
let arr = [p1,p2,p3];
Promise.all(arr).then(data=>{
	console.log(data);
	// 计时结束
	console.timeEnd();
});
</script>

<script>
		console.error("Promise");
		var p1=new Promise(resolve=>{
			setTimeout(()=>{
				resolve({id:'001',test:'p1'});
			},2000);
		});
		var p2=new Promise(resolve=>{
			setTimeout(()=>{
				resolve({id:'002',test:'p2'});
			},2000);
		});
		var p3=new Promise(resolve=>{
			setTimeout(()=>{
				resolve({id:'003',test:'p3'});
			},2000);
		});
		Promise.all([p1,p2,p3]).then(data=>{
			console.log(data);
			console.timeEnd();
		});
		</script>

控制台输出

async/await

async/await