ES6语法之let、const和解构赋值

版权声明：一只会飞的狼 https://blog.csdn.net/sinat_40697723/article/details/82530123

一. let和const

在es6之前，没有块级作用域。块级作用域简单点就是大括号里面的的作用域，外面访问不了。

1.let

[code]	<script type="text/javascript">
function text(){
for(let i=1; i<3; i++) {
console.log(i);
}
console.log(i);
}
text();
</script>

    因为let声明的变量具有块级作用域，所以大括号之外不能使用它。

注意：es6语法是默认开启严格模式的，那么对于没有声明的变量，我们使用它就会报错，es5要自己开启严格模式。

[code]	<script type="text/javascript">
function text(){
let a = 1;
let a = 2;
}
text();
</script>

注意：使用let和const不能重复声明，否则会报错。

2.const

注意：常量不能修改。

[code]	<script type="text/javascript">
function text(){
const a = 111;
a = 222;
console.log(a);
}
text();
</script>

注意：const声明的变量也是有块级作用域的。

[code]	<script type="text/javascript">
function text(){
const a;
a = 111;
console.log(a);
}
text();
</script>

注意：使用const声明的过程中必须赋值，否则会报错。

[code]	<script type="text/javascript">
function text(){
const one = {
a:1
}
one.b = 2;
console.log(one);
}
text();
</script>

注意：const声明的对象是可以改变的，不会报错。

二.解构赋值

1.数组类型的解构赋值：

[code]	<script type="text/javascript">
let a,b,reset;
[a,b] = [1,2];   //相当于let a=1,b=2; es6为了方便新出的写法
console.log(a,b);
</script>

 

[code]	<script type="text/javascript">
{
let a,b,reset;
[a,b] = [1,2];   //相当于let a=1,b=2; es6为了方便新出的写法
console.log(a,b);
}
{
let a,b,reset;
[a,b,...reset] = [1,2,3,4,5,6,7,8];
console.log(a,b,reset);
}
</script>

 

2.对象类型的解构赋值

[code]	<script type="text/javascript">
{
let a,b;
({a,b}={a:1,b:2});
console.log(a,b);
}
</script>

除了对象和数组解构赋值，还有字符串，函数等的解构赋值，常用的是对象和数组解构赋值。

 

如果左边没有匹配到右边的值，那么它将会是undefined；

[code]	<script type="text/javascript">
{
let a,b,c;
[a,b,c=3] = [1,2];
console.log(a,b,c);
}
{
let a,b,c;
[a,b,c] = [1,2];
console.log(a,b,c);
}
</script>

默认值就是为了解决出现undefined的情况，如[a,b,c=3] = [1,2]

解构赋值的使用场景：

1.很方便的实现变量交换，而不用借助别的变量来存储才能实现。

[code]	<script type="text/javascript">
{
let a=1,b=2;
[a,b]=[b,a];
console.log(a,b);
}
</script>

2.一个场景：比如购物网站，结算平台的时候函数返回两个参数，一个数量，一个金额，假如不用解构赋值，我们需要用数组接收这个函数的返回值，然后通过索引将值分别赋给两个变量。

[code]	<script type="text/javascript">
function total() {
return [1,2];
}
let a,b;
[a,b]=total();
console.log(a,b);
</script>

3.函数返回多个参数，选择性的接受某几个变量。

[code]  <script>
function total(){
return [1,2,3,4,5,6];
}
let a,b,c;
[a,,,,b]=total();
console.log(a,b);
</script>

 

4.不确定函数返回的数组有多少个参数，只需要使用第一个参数，别的用数组保存即可。

[code]  <script>
function total(){
return [1,2,3,4,5,6];
}
let a,b,c;
[a,...b]=total();
console.log(a,b);
</script>

 

关于对象解构赋值：

[code]  <script>
{
let o = {a:1,b:true};
let {a,b} = o;
console.log(a,b);
}
{
let {a=10,b=11} = {a:20};
console.log(a,b);
}
</script>

使用场景：前后端通信时主要使用json对象返回，通过es6解构赋值前端可以很方便的取到相应的值

[code]  <script>
let metaDate = {
title:'one',
test: [{
title:'two',
desc:'description'
}]
}
let {title:esTitle,test:[{title:cnTitle}]} = metaDate;
console.log(esTitle,cnTitle);
</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

阅读更多