es6新特性

最新推荐文章于 2025-08-23 02:53:08 发布

weixin_33916256

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/tongjh/blog/991631

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")
})