ES6 - (let, const, deconstruction and arrows assignment function)

and let const

 let是声明变量的关键字,let只能声明一次,不存在变量提升。
 const是声明常量的关键字,必须赋初值,而且不能改变。
 两者都是在该代码块才能访问和使用。

Temporary dead zone:

	//了解即可
	var PI = "a";
	if(true){
	  console.log(PI);  // ReferenceError: PI is not defined
	  const PI = "3.1415926";
	}
ES6 明确规定,代码块内如果存在 let 或者 const,
代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内,在声明变量 PI 之前使用它会报错。

Deconstruction assignment

 1.解构赋值是对赋值运算符的扩展。
 
 2.他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
 
 3.在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。

For example:

数组和对象
	const [a,b] = [1,2,3]; // a = 1;b = 2;
	const student = {
		name:'xiaoming',
		age:18,
		gender:true
	}  
	const {name,age} = student; //name = 'xiaoming';age = '18';
	//赋值不仅仅只局限于自己定义的对象 (js一切皆对象)
	const {href} = this.location;
	const href = this.location.href;

Three operators

1. The remaining operators

	const [a,...b] = [1,2,3]; // a = 1,b = [2,3];
	const {name,...rest} = student;//同上
	const {...rest} = student;//所有的
	
	在函数中使用
	//不定参数 和长度
	function Sum(...nums){
		var sumNum = 0;
		for (let i = 0; i < nums.length; i++) {
			sumNum += nums[i];
		}
		return sumNum;
	}

2. expand Operators

const arr1 = [1,2,3];
const arr2 = [...arr1,4,5,6];

Arrow function

Basic

	var func = (a,b) => {
		return a + b;
	}
	func(1,2);
	var func2 = function(){
		return a + b;
	}

	var func = a => a + 1;
	//当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。
	//等价于
	var func = function(a){
		return a + 1;
	}
	
	var func = (id,name) => ({id:id,name:name});
	//当返回值是一个对象时需要用一个小括号括起来区分代码块
	
	var func = function(a){
		return a + 1;
	}
	func(1);
调用方法和原来一样

当参数只有一个时,可以把小括号去掉,但是没有参数和参数有多个时小括号不能省略

如果是多行语句,则必须使用大括号括起来,表示一个代码会块

And the difference between the role of

函数内的this不同
箭头函数的本身没有this因此调用this则是它父级的this
但是普通函数则不同
箭头函数不会变量提升

Of course, there are many characteristics es6 click into the rookie tutorial discover more about the use of es6

Published 84 original articles · won praise 204 · views 10000 +

Guess you like

Origin blog.csdn.net/qq_44983621/article/details/103098379