ES6--(let、const、解构赋值和箭头函数)

let和 const

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

暂时性死区:

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

解构赋值

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

举例:

数组和对象
	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;

三点运算符

1.剩余运算符

	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.拓展运算符

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

箭头函数

基本

	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);
调用方法和原来一样

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

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

区别和作用

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

当然es6的特性还有很多点击进入菜鸟教程发现更多关于es6的用法

发布了84 篇原创文章 · 获赞 204 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_44983621/article/details/103098379