##ES6
### 一、解构赋值
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为结构赋值，解构赋值主要包括数组的结构赋值、对象的结构赋值、字符串的结构赋值、函数参数的结构赋值。
**数组的解构赋值**
代码如下
```js
//传统赋值
var num1=1;
var num2=2;
var num3=3;
//结构赋值
let [str1,str2,str3]=['aa','bb','cc'];
console.log(str1);
console.log(str2);
console.log(str3);
```
**对象的解构赋值**
代码如下：
```js
let {num1,num2}={num1:100,num2:10};
console.log(num1);
console.log(num2);
```
**字符串的解构赋值**
代码如下：
```js
let [a,b,c,d,e]='hello';
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
```
**函数参数的解构赋值**
代码如下
```js
function fn([x,y]){
return x+y;
}
console.log(fn([10,20]));
```
解析：由于平时传入的参数x，y作为变量进行传入，加上“[ ]”表示以一个数组的形式进行传入参数，在调用函数的同时也是同样。
**调换两个数的值**
之前的写法
```js
var a=3;
var b=5
var c;
交换两个数的值：声明第三个变量
c=b;
b=a;
a=c;
//使用es6语法
let num1=10;
let num2=20;
[num1,num2]=[num2;num1];
console.log(num1);
console.log(num2);
```
###模板字符串
**多行字符串**
用单引号或是双引号表示的字符串在编辑的过程中只能在一行显示，若要在多行显示需要在每一行结尾添加一个斜杠，这样的编辑方式对开发者显然不够友好，我们可以使用模板字符串的功能换行编辑字符串，代码如下所示
```js
let str=`hello
world
`;
console.log(str);
```
**字符串中定义变量**
es5写法
```js
var name='jack';
console.log('我的名字叫'+name);
```
模版字符串
```js
var name='jack';
console.log(`我的名字叫${name}`);
```
**模板字符串调用函数**
let x='hello';
let y='world';
function fn(x,y){
return x+y;
}
console.log('程序猿最常说的一句话是${fn(x,y)}');
###函数
在ES2015中扩展了很多函数的功能，我们在本节讲解两个最常用的功能：
* 设置函数参数默认值
* 箭头函数
**参数默认值**
在ES2015版本之前，我们可以通过下面的方法设置函数参数的默认值，代码如下所示
```js
es5设置默认值
function fun(x,y){
x=x||10;
y=y||20;
return x+y;
}
console.log(fun());
```
如果逻辑或运算符的左侧是undefined，那么表达式的值就是右侧的值，如果左侧不是undefined，那么表达式的值就是左侧的值，我们可以通过这种方法设置函数参数的默认值，但是这种方法看上去并不是那么友好，所以ES2015为函数增加了设置默认值的功能。代码如下所示
```js
//es6设置默认值
function fn(x=100,y=200){
return x+y;
}
console.log(fn(1,2));
```
**箭头函数**
在ES2015中增加了箭头函数的语法，我们可以使用=>来定义函数，而不必每次都要写一个function。具体写法如下所示
```js
var fun=x=>x*x;
console.log(fun(6));
```
箭头的前面是函数的参数，箭头的后面是函数的返回值，程序运行后会在控制台输出36。
如果函数没有参数，并且函数体不止一行代码，可以用如下的代码表示
```js
let fun=()=>{
var x=10;
var y=20;
return x+y;
}
console.log(fun());
```
###面向对象语法
在ES2015版本之前，JavaScript是没有类的概念的，我们可以使用构造函数来模拟一个类，这在我们之前的课程中已经讲解过了，这里我们简单复习一
创建一个猫的构造函数
```js
function Cat(name,age){
this.name=name;
this.age=age
}
var cat=new Cat('miaomiao',2);
console.log(cat.name);
```
在上面的代码中，我们定义了一个构造函数Cat，通过new关键字创建了一个变量cat，cat有两个属性，name和age。我们可以直接输出cat.name;
我们可以通过原型属性为构造函数添加方法，例如我们给这个Cat添加一个shout方法，让这只猫可以叫。代码如下所示
```js
function Cat(name,age){
this.name=name;
this.age=age
}
var cat=new Cat('miaomiao',2);
Cat.prototype.say=function(){
console.log('喵喵喵!');
}
console.log(cat.name);
cat.say();
```
通过上面的代码，我们可以模拟一个类的概念，但是这样的写法与真正面相对象语言的写法相比，确实更难以理解。所以ES2015中增加了类的概念。
**class**
我们可以用class来定义一个类，然后可以在这个类中定义构造函数，方法和属性。代码如下
```js
class Cat{
constructor(name,age){
this.name=name;
this.age=age;
}
shot(){
console.log('喵喵喵');
}
}
let cat=new Cat('miaomiao',2);
cat.shot();
```
网友评论