ES6学习笔记二 新的声明方式和变量的解构赋值！

Posted 2020-10-08

新的声明方式

在ES5的时候，我们只有一个声明方式，var！但是在es6中，声明进行了扩展，我们加上ES5的var的申明方式，我们有了三种声明方式：

var：它是variable的简写，可以理解成变量的意思

let：它在英文中是让的意思，也可以理解成一种申明方式

const：它在英文中是常量的意思，在ES6中用来声明常量，常量可以理解成不变的量=》这里的不变不是值得不变，是内存地址的指针不变！！！

var 声明：

　　var在ES中是用来升级成全局变量的，我们可以做一个简单实例，声明一个变量，用console.log()输出看一下

 

var a = ‘bokeyuan‘;
console.log(a)          //bokeyuan

 

　　这个时候可以看到我们的a被打印出来，结果是bokeyuan，接下来有个问题了

如何理解它的作用是声明全局变量的呢？

我们在简单用测试一下

var a = ‘博客园‘;
window.onload = function(){
    console.log(a)     //博客园
}     

我们匿名函数中console.log()了外面的变量a,显示结果是‘博客园’，可以证明var确实是全局的，如果不够直观，还有一种方法可以验证

var a = 2;
{
    var b = 3;  
}
console.log(a)    //3

　　可以看出打印出来的是3，说明var是全局的，区块内的第二次赋值覆盖了第一次赋值，所以var 的显示是3！ 　　

let 声明：

通过上面两个例子，我们可以对var 全局声明有一定的了解，那跟var 对应的声明就是 let声明，他是局部变量的声明，我们继续走一个 例子

var a = 2;
{
     let a = 3;  
}
console.log(a)       //2

　　这个时候可以看出let是局部变量的声明，所以在区块外面打印的就是2;

用这种方式在验证一下

{
      let a = 3;  
}
console.log(a)        //报错

　　显示找不到这个变量，说明let只能在区块内起作用，外部是不可取的！

其实有些小伙伴觉得let 没有var 好用，其实let是防止你的数据污染的，在项目中其实非常有用， 举个例子

我们先来一波var声明的循环

for(var i = 0 ;i < 10 ;i ++){
    console.log(‘循环体‘+i);
}
console.log(‘循环体外‘+i) 

//输出结果是 循环体0
　　　　　　 循环体1
　　　　　　 循环体2
　　　　　　 循环体3
　　　　　　 循环体4
　　　　　　 循环体5
　　　　　　 循环体6
　　　　　　 循环体7
　　　　　　 循环体8
　　　　　　 循环体9
 　　　　　　循环体外10

我们发现循环体在的i被变量污染了，如果外部在使用i就会出现问题，这是开发者不想看到的问题

再来一波let的申明循环

for(let i = 0 ;i < 10 ;i ++){
	console.log(‘循环体‘+i);
}
console.log(‘循环体外‘+i)
//     循环体0
       循环体1
       循环体2
       循环体3
       循环体4
       循环体5
       循环体6
       循环体7
       循环体8
       循环体9
 Uncaught ReferenceError: i is not defined          

　　最后一个console.log(i)你会发现报错了，找不到循环体外的i了，通过两种声明的比较，可以明白let在防止程序污染上还是很好的，我们要习惯去用let去声明，减少var声明去污染全局空间，特别是在vue中一定要学会使用！

const声明：

程序开发中，有些声明是希望不会再发生变化，简单来说，声明结束后，这个变量就是这个值，或者这个变量的指针就是指向这个内存，不发生改变，这个时候我们用const声明就是一个非常合适的选择。

const a = "博客园";
var a = "博客";
console.log(a)

这个是有你就会发现，程序报错了，很尴尬，理解上面的一段话你就知道他为啥报错了

但是，如果这个样子

const a = [0];
a.push(1);
console.log(a)      // [0,1]

这个时候会发现，这个a的值时可以改变的，仔细阅读上面一句话，你会理解的！

变量的解构赋值！

以前，为 变量赋值的时候，我们只能介样子

let a = 0,b = 1,c = 2;

现在在ES6中，我们可以用数组解构的方式进行赋值

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

上面的代码可以理解为，从数组中一次提取值，按照位置的对应关系进行赋值但是要遵从数组模式和赋值模式的统一

如果两边的格式不统一，那么就很有可能报错或者是出现undefined;

数组结构的默认值：

解构赋值是允许使用默认值的，看一个简单例子

 

let [name = ‘zheng‘] = [];
console.log(name)    //zheng

 

如果一次解析多个变量的时候呢？

let [name,age = 17] = [‘zheng‘,undefined];
console.log(name,age)     //zheng   17;

　　undefined相当于什么都没有，所以，b就被取成默认值！

如果是null呢？

let [name,age = 17] = [‘zheng‘,null]
console.log(name,age) 　　　　//zheng null

　　这个时候就可以发现null被赋值上去了，所以我们可以理解成undefind是什么都没有，而null是相当于有值，但是值为null,所以b并没有取默认值，而是结构成了null

 

 

结构不仅仅可以用于数组，还可以用于对象

let {name,age} = {name:‘zheng‘,age:17};
console.log(name,age)    //zheng 17

 

注意：对象的结构和数组的结构有一个很大的不同。数组是按照元素依次排序的，变量的取值它的位置决定的；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

 

圆括号的使用：

如果在解构之前就定义了变量，这个时候解构会出现问题

let foo;
{foo} ={foo:‘JSPang‘};
console.log(foo);

　　要解决报错，使程序正常，这个时候我们仅仅需要在解构语句外面加一个圆括号就可以了

let foo;
({foo} ={foo:‘zheng‘})
console.log(foo);　　//zheng

　字符串解构赋值！

const [a,b,c,d,e] = ‘zheng‘;
console.log(a);     //z 
console.log(b);     //h
console.log(c);     //e
console.log(d);     //n 
console.log(e);     //g