ES6常用的一些语法总结

1. let和const的使用
* let和const类似于javascript中的var的使用,都是用来声明变量的，只是都存在各自的特殊用法。

//javascript 只有全局作用域和函数作用域
var name = 'one';//全局变量
while(true){
var name  = 'two';
console.log(name);//two,内层变量覆盖了外层变量
break;
}
console.log(name);//two,

而ES6带来的一个新特性：

*let：为javascript添加一个块级作用域

使用let声明的变量，只作用于使用了let命令的代码块：

var name = 'one';//全局变量
while(true){
let name  = 'two';
console.log(name);//two,
break;
}
console.log(name);//one

const :声明一个常量，声明过后，就不可修改其值(会报错)

const PI = Math.PI;
console.log(PI);//3.141592653589793

PI = 32;//报错Module build failed: SyntaxError: E:/hi/first_demo/src/hello.js: "PI" is read-only

2. classs，extends，super的使用

//class声明一个animal类(对象)：
class Animal{
constructor(){//这个constructor方法内定义的方法和属性是实例化对象自己的，不共享；construstor外定义的方法和属性是所有实例对象（共享）可以调用的
this.type = 'animal'  //this关键字代表Animal对象的实例对象
}
says(say){
console.log(this.type+' says ' +say);
}
}
let animal = new Animal();
animal.says('hello');//控制台输出‘animal says hello’

//这里声明一个Cat类，来继承Animal类的属性和方法
class Cat extends Animal(){
constructor(){
super();//super关键字，用来指定父类的实例对象
this.type = 'cat';
}
}
let cat  = new Cat();
cat.says('hello');//输出‘cat says hello’

3. arrow function箭头函数

function(i){ return i + 1; }//ES5写法
(i) => i+1;         //ES6写法

如果代码块比较多，则使用{ }将代码包起来：
es5:
function(x,y){
x++;
y--;
return x+y;
}
es6:
(x,y) => {
x++;
y--;
return x+y;
}

箭头函数用法的两个明显的优点： * 函数的写法更加简洁 *

箭头函数内部没有自己的this对象，而是全部继承外面的，所以内部的this就是外层代码块的this。

class Animal{
constructor(){
//alert(this instanceof Object);//Object
this.type = 'animal';//this代表实例对象
}
/*says(say){
console.log(this.type+' says '+say);
}*/
says(say){
//alert("says="+this);
/*var self = this.type;
setTimeout(function () {
//alert("自定义方法中的this="+this);//window,全局对象
//console.log(this.type +" says " +say);//因为这里的this指的是全局对象window,所以返回的为：undefined says hello
console.log(self +" says " +say);//ok
},1000);*/
/*setTimeout(function () {
console.log(self +" says " +say);//ok
}.bind(this),1000);*///使用bind函数，ok
setTimeout(() => {
console.log(self +" says " +say);
},1000);//使用es6的箭头函数，ok
}
}
let animal = new Animal();
animal.says('hello');

4. destructuring解构
*从数组或者对象中提取值，对变量进行赋值

let cat  = 'ken';
let dog = 'lili';
let zoo = {cat:cat,dog:dog};
console.log(zoo);//object {cat:'ken',dog:'lili'}

//es6写法
let cat1 = 'ken2';
let dog1 ='lili2';
let zoo1 = {cat1,dog1};
console.log(zoo1);//Object {cat1:'ken2',dog1:'lili2'}

//destructuring --解构
let dog3 = {type:'animal',many: 2};
let {type,many} = dog3;//将对象或者数组中提取值，然后对变量进行赋值--即解构
console.log(type,many);//animal 2

5. default和rest语法
*调用某个带参函数时，没有传参的情况：

//默认值default
function animal(type){
type = type || 'cat';
console.log(type);
}
animal();//没有传参数--输出默认值‘cat’

//es6写法
function animal1(type = 'cat'){
console.log(type);
}
animal1();//输出'cat'

//rest语法
//es6写法
function animal3(...types){
//alert(types instanceof Array);//true-'...types'的用法是指types是个数组
console.log(types);
}
animal3('cat1','dog1','fish1');//输出["cat1","dgo1","fish1"]

6. 模板字符串：待补充