ES6入门(1)

ES6基本用法(1)

最近在学习ES6的新语法,相比ES5多了很多新的东西,以前ES5中只有全局作用域和函数作用域,而ES6中有了块级作用域,并且变量声明也增加了let,和const。相比ES5的语法,ES6的语法显的更加的简洁,在一些特定的情况下也比ES5方便,好用
1.声明变量对比

var a = 10;
let b = 10;
console.log(a);//10;
console.log(b);//10

此时不管是ES5声明a还是ES6声明的b,结果都是10,那么在函数中又有什么区别呢?我们声明一个方法如下:

function foo(){
	for(var i = 0; i < 3; i++){

	}
	console.log(i);
}

console.log(i)

此时会输出3,但是如果将for循环的var换成let的话,那么就会报如下错误

 Uncaught ReferenceError: i is not defined

ES6中的解构赋值

ES6中解构赋值有:对象解构赋值、数组解构赋值、字符串解构赋值、布尔值解构赋值、函数参数解构赋值、数值解构赋值
那么有人从字面值来讲的话,那么是很不好理解的,那么我们从具体的代码来让大家明白如何使用,特别是对象解构赋值、数组解构赋值是特别重要的,那么下面我们来具体用代码来进行演示

{
	let a,b,rest;
	[a,b] = [1,2];
	console.log(a,b);//1,2
}

上诉代码大家肯定会觉得很奇怪,我为什么将变量a和b放到一个数组中 进行赋值,在ES6之前,ES5是没有这样的操作的,此时我们打印后控制台输入的就是1,2非常的方便。

那么下面还有一个操作

{
	let a,b,rest;
	[a,b,rest] = [1,2];
	console.log(a,b,rest);//1,2,undefined
}

上面的操作可以看到rest并没有给它进行赋值,那么就没有默认值,那么输入肯定是undefined

我们来继续看这样的一串代码

{
	let a,b,rest;
	[a,b,...rest] = [1,2,3,4,5,6];
	console.log(a,b,rest);//1,2,[3,4,5,6]
}

上面的赋值的代码大家可能会晕, a和b拿到的值就是1,2 …rest为什么会返回的是3,4,5,6。注意…rest 在ES6中的意思是将后面剩余的赋值变成一个数组然后在赋值给这个rest变量。所以rest就是一个数组,值就是3,4,5,6

对对象进行解构赋值

{
	let a,b;
	({a,b} = {a: 1,b: 2});
	console.log(a,b);//1,2
}

上面的代码很简单我就不解释了。

在ES6中实现交换变量的值

{
	let a = 1;
	let b = 2;
	[a,b] = [b,a];
	console.log(a,b);//2,1
}

上面这样就实现了变量的交换,在ES5中需要定义一个临时的变量来保存被交换的值,而在ES6中就不需要这样做了,非常方便啊。

如何获取函数的返回值

{
	function foo(){
		return [1,2,3,4]
	}
	let a,b,c,d;
	[a,b,c,d] = foo();
	console.log(a,b,c,d);
}

我们通过定义了abcd四个变量来接收foot()函数这样就拿到了foo函数的返回值,非常的方便、获取到之后就可以操作获取到的值了。

当然我们可以选择性的接收值

{
	function foo(){
		return [1,2,3,4]
	}
	let a,b,c,d;
	[a,,b] = foo();
	console.log(a,b);//1,3
}

这里打印出来就是1,3。

可以用 …变量的形式来取值

{
	function foo(){
		return [1,2,3,4]
	}
	[a,...b] = foo();
	console.log(a,b);//1,[2,3,4]
}

这里拿到的a就是1,b的值就是一个数组[2,3,4]

对对象进行对象赋值(2)

{
	let obj = {username: 'zhangsan',gender: '男'};
	let {username,gender} = obj;
	console.log(username,gender);
}

这段代码我们可以看到定义了obj对象里面有username和gender的属性并且也赋了值,下面让username和gender 去接收obj 这样就将obj的值就给属性了。这样就不会不会报错,如果不要let {username,gender} = obj;那么一定会报错

下面有一个坑

{
	let {a = 10, b = 100} = {a = 520};
	console.log(a,b);
}

从上面看定义了a和b并赋值了,但是 又给a 赋值 并且在后面用了 = 号,我们允许发现,a的值已经从 10 变成了 520了,说明已经被覆盖了。

下面我们来说如何将后端的数据进行取值,比如我想要username用户名和排序方式,下面定义了假的后端数据对象

{
	let data = {
		username: 'zhangsan',
		pageable: [{
			sort: 'desc'
		}]
	}
	let {username: esUsername,pageable: [{sort: esSort}]} = data;
	console.log(esUsername,esSort);
}

这样就将username,sort取出来了,这里要注意的是pageable 是[{}]这样的格式,那么在进行取值的操作的时候,就要按照这样的格式操作。