js day26

ES6

一、解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为结构赋值，解构赋值主要包括数组的结构赋值、对象的结构赋值、字符串的结构赋值、函数参数的结构赋值。

数组的解构赋值

代码如下

//传统赋值
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);

对象的解构赋值
代码如下：

 let {num1,num2}={num1:100,num2:10};
 console.log(num1);
 console.log(num2);

字符串的解构赋值
代码如下：

let [a,b,c,d,e]=['hello'];
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);

函数参数的解构赋值
代码如下

function fn([x,y]){
    return x+y;
}
console.log(fn([10,20]));

解析：由于平时传入的参数x，y作为变量进行传入，加上“[ ]”表示以一个数组的形式进行传入参数，在调用函数的同时也是同样。

调换两个数的值
之前的写法

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);

模板字符串

多行字符串
用单引号或是双引号表示的字符串在编辑的过程中只能在一行显示，若要在多行显示需要在每一行结尾添加一个斜杠，这样的编辑方式对开发者显然不够友好，我们可以使用模板字符串的功能换行编辑字符串，代码如下所示

let str=`hello 
     world
     `;
     console.log(str);

字符串中定义变量
es5写法

var name='jack';
console.log('我的名字叫'+name);

模版字符串

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版本之前，我们可以通过下面的方法设置函数参数的默认值，代码如下所示

es5设置默认值
function fun(x,y){
   x=x||10;
   y=y||20;
   return x+y;
}
console.log(fun());

如果逻辑或运算符的左侧是undefined，那么表达式的值就是右侧的值，如果左侧不是undefined，那么表达式的值就是左侧的值，我们可以通过这种方法设置函数参数的默认值，但是这种方法看上去并不是那么友好，所以ES2015为函数增加了设置默认值的功能。代码如下所示

//es6设置默认值
function fn(x=100,y=200){
    return x+y;
}
console.log(fn(1,2));

箭头函数

在ES2015中增加了箭头函数的语法，我们可以使用=>来定义函数，而不必每次都要写一个function。具体写法如下所示

var fun=x=>x*x;
console.log(fun(6));

箭头的前面是函数的参数，箭头的后面是函数的返回值，程序运行后会在控制台输出36。

如果函数没有参数，并且函数体不止一行代码，可以用如下的代码表示

let fun=()=>{
    var x=10;
    var y=20;
    return x+y;
}
console.log(fun());

面向对象语法

在ES2015版本之前，JavaScript是没有类的概念的，我们可以使用构造函数来模拟一个类，这在我们之前的课程中已经讲解过了，这里我们简单复习一

创建一个猫的构造函数

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方法，让这只猫可以叫。代码如下所示

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来定义一个类，然后可以在这个类中定义构造函数，方法和属性。代码如下

class Cat{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }

    shot(){
        console.log('喵喵喵');
    }
}
let cat=new Cat('miaomiao',2);
cat.shot();