es2015学习笔记（一）-CSDN博客

es2015，即es6.es6虽好，但不是所有浏览器都支持，因此需要用Babel转为es5代码。

1.let和const——和var一样，都是用来声明变量的

(1)let的声明的变量只在其代码块内有效

var a = 1;
{	
	var a = "wyc";
	console.log(a);		//wyc
}
console.log(a);			//wyc

var b = 2;	
{                        //块级作用域
	let b = "wp";
	console.log(b);		//wp
}
console.log(b);			//2

let的新增其实是为了块级作用域，如上例就是块级作用域

(2)const常量

直接改变常量引用的值会报错。

const a = 1;
a = 2;//报错

但是可以间接改变，如下

var arr = [];
const a = arr;
arr.push("1");
arr.push("2")
console.log(a);//["1","2"]

2.class，extends，super

class Animal{                         //类
	constructor(){
		this.type = 'animal';
		this.owner = "wyc";
	}
	skill(skill){
		console.log(this.type+"会"+skill+",属于"+this.owner);
	}
}
let animal = new Animal();
animal.skill("吃");		//animal会吃,属于wyc

class Dog extends Animal{             //继承
	constructor(){
		super();
		this.type = "Dog";
	}
}
let dog = new Dog();
dog.skill("抓耗子");	//dog会抓耗子，属于wyc

super关键字，调用父类上的属性或函数。
在构造函数中单独使用，是调用父类的构造函数，一定要在子类构造函数使用this之前调用。一般放在构造函数首行
ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

3.箭头函数

//es5写法
var a = function(x,y){
	return x+y;
}
console.log(a(2,3));	//5
//es6写法
var b = (m,n)=>m+n;
console.log(b(3,4));	//7

箭头函数的其他用途

class Animal {
    constructor(){
        this.type = 'animal'
    }
    skill(skill){
        setTimeout(function(){
            console.log(this.type + ' 会 ' + skill)
        }, 1000)
    }
}

 var animal = new Animal()
 animal.skill('飞')  //undefined skill 飞

上面代码会报错，因为定时器中函数的this指向undefined，在非严格模式下，会被自动指向全局对象。

在es6之前，我们有两种解决方案

1）是在say（）函数中这是that=this；

skill(skill){
        var that = this;
        setTimeout(function(){
            console.log(that.type + ' 会 ' + skill)
        }, 1000)
    }

2）是用bind（）绑定this。

skill(skill){
        setTimeout(function(){
            console.log(that.type + ' 会 ' + skill);
        }.bind(this), 1000)
    }

箭头函数的解决办法

skill(skill){
        setTimeout(() => {
            console.log(this.type + ' 会 ' + skill);
        }, 1000)
    }

4.模板字符串

之前我们在ajax的回调函数中拼接字符串，不断的“+”，现在我们可以使用末班字符串。·符号（和~是一个键）。

$("#result").append(`你好，<span style='color: red;'>这里</span>是wyc的,<b>王国</b>;`);

5.解构

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

let a = 1;
let b = 2;
let c = 3;     //es5写法

let [a,b,c] = [1,2,3];   //es6写法，等价上面

详情看ecmascript6入门解构一章

6.默认值

es5写法

function sayName(name){
	name = name || "wyc";
	console.log(name);
}
sayName();		//wyc
sayName("wp");	//wp

es6写法

function sayName(name='wyc'){
	console.log(name);
}
sayName();		//wyc
sayName("wp");	//wp

7.剩余参数

允许长度不确定的实参表示为一个数组。

function say(name,age,...skills){
	console.log(skills);	//[吃，喝，玩，乐]
	console.log(age+"岁的"+name+"有"+skills+"技能");//22岁的wyc有吃，喝，玩，乐技能
}
say('wyc',22,'吃','喝','玩','乐')

转载于:https://my.oschina.net/wyc1219/blog/864259