一. let和const
在es6之前,没有块级作用域。块级作用域简单点就是大括号里面的的作用域,外面访问不了。
1.let
<script type="text/javascript">
function text(){
for(let i=1; i<3; i++) {
console.log(i);
}
console.log(i);
}
text();
</script>
因为let声明的变量具有块级作用域,所以大括号之外不能使用它。
注意:es6语法是默认开启严格模式的,那么对于没有声明的变量,我们使用它就会报错,es5要自己开启严格模式。
<script type="text/javascript">
function text(){
let a = 1;
let a = 2;
}
text();
</script>
注意:使用let和const不能重复声明,否则会报错。
2.const
注意:常量不能修改。
<script type="text/javascript">
function text(){
const a = 111;
a = 222;
console.log(a);
}
text();
</script>
注意:const声明的变量也是有块级作用域的。
<script type="text/javascript">
function text(){
const a;
a = 111;
console.log(a);
}
text();
</script>
扫描二维码关注公众号,回复:
3123589 查看本文章
注意:使用const声明的过程中必须赋值,否则会报错。
<script type="text/javascript">
function text(){
const one = {
a:1
}
one.b = 2;
console.log(one);
}
text();
</script>
注意:const声明的对象是可以改变的,不会报错。
二.解构赋值
1.数组类型的解构赋值:
<script type="text/javascript">
let a,b,reset;
[a,b] = [1,2]; //相当于let a=1,b=2; es6为了方便新出的写法
console.log(a,b);
</script>
<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.对象类型的解构赋值
<script type="text/javascript">
{
let a,b;
({a,b}={a:1,b:2});
console.log(a,b);
}
</script>
除了对象和数组解构赋值,还有字符串,函数等的解构赋值,常用的是对象和数组解构赋值。
如果左边没有匹配到右边的值,那么它将会是undefined;
<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.很方便的实现变量交换,而不用借助别的变量来存储才能实现。
<script type="text/javascript">
{
let a=1,b=2;
[a,b]=[b,a];
console.log(a,b);
}
</script>
2.一个场景:比如购物网站,结算平台的时候函数返回两个参数,一个数量,一个金额,假如不用解构赋值,我们需要用数组接收这个函数的返回值,然后通过索引将值分别赋给两个变量。
<script type="text/javascript">
function total() {
return [1,2];
}
let a,b;
[a,b]=total();
console.log(a,b);
</script>
3.函数返回多个参数,选择性的接受某几个变量。
<script>
function total(){
return [1,2,3,4,5,6];
}
let a,b,c;
[a,,,,b]=total();
console.log(a,b);
</script>
4.不确定函数返回的数组有多少个参数,只需要使用第一个参数,别的用数组保存即可。
<script>
function total(){
return [1,2,3,4,5,6];
}
let a,b,c;
[a,...b]=total();
console.log(a,b);
</script>
关于对象解构赋值:
<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解构赋值前端可以很方便的取到相应的值
<script>
let metaDate = {
title:'one',
test: [{
title:'two',
desc:'description'
}]
}
let {title:esTitle,test:[{title:cnTitle}]} = metaDate;
console.log(esTitle,cnTitle);
</script>