es6新特性

原创
2017/06/20 13:48
阅读数 61

ES6

ECMAScript6于2013年草案冻结,正式版规范发布于2015年6月17日。ES 6是Javascript的新开端(es6大部分实现了激进的ES4特性,模块、类、继承等)

let, const 块级作用域的let和const
class 类
extends, super 继承
arrow functions 箭头函数 =>
template string 模版表达式
destructuring 解构(拆包表达式)
default 默认参数 
rest arguments 不定参数
import,export 模块化
Promise 

块级作用域的let和const

var arr = [];
for(let i=0;i<9;i++){
	arr[i] = function(){
		console.log(i);
	}
}

arr[6]();

我们看到let申请的变量只在当前块中有效

const PI = Math.PI;
PI=23  //"PI" is read-only

当我们尝试去改变用const申明的常量时,编译时会报错。

class类

class Ren{
	constructor(){
		this.name = "人";
	}
	sayHello(){
		console.log("Hello "+this.name)
	}
}
let ren = new Ren();
ren.sayHello();

ES6提供了更接近传统语言的写法,引入了Class(类)这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加通俗易懂。

extends,super类继承

class Chinese extends Ren{
	constructor(){
		super();
		this.name = "中国人"
	}
	sayHello(){
		console.log("Hello "+this.name)
	}
}

let chinese = new Chinese();
chinese.sayHello();

我们看到可以通过extends实现类的继承,super关键字指代父类的实例(即父类的this对象,子类必须在constructor方法中调用super方法,否则新建实例会报错,这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。)

箭头函数

class Ren{
	constructor(){
		this.name = "人";
	}
	sayHello(){
		setTimeout(()=>{
			console.log("Hello "+this.name);
		},1000)
	}
}
let ren = new Ren();
ren.sayHello();

使用()=>{}就可以定义一个函数,这简直太方便了,而且用箭头函数定义的函数的作用域是在当前的外层代码块(setTimeout函数的this是window对象,但是使用箭头函数后,它的作用域是当前对象)

模版表达式

let title = "Hello ES6";
let str = `<div>
	<h1>${title}</h1>
</div>`;
console.log(str);

使用反引号(`)来标识起始,用${}来引用变量,而且所有的空格和缩进都会被保留在输出之中,这就是模版表达式

解构

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

let cat = "ken";
let dog = "lili";
let zoo = {cat,dog};
console.log(zoo);

let {name,age} = {name:"张三",age:19};
console.log(name,age)

默认参数

function test(name="zhangsan"){
	console.log(name)
}

test()
test("lisi")

可以给函数或方法定义默认参数

不定参数

function test(...params){
	console.log(params)
}

test("张三","李四","王五")

可以使用上面的 ...params定义不定参数

Promise

es6原生支持promise

var app = new Promise(function(resolve,reject){
	var num = 6
	setTimeout(()=>{
		if(num>10){
			resolve(num)
		}else{
			reject(num)
		}
	})
})
app.then((num)=>{
	console.log(num+">10");
},(num)=>{
	console.log(num+"<10")
})

ES6模块

相关资料

http://www.jianshu.com/p/ebfeb687eb70

http://web.jobbole.com/87140/

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部