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