本文总结了相对常用的ES6知识及语法，参考阮一峰老师《ECMAScript 6 入门》，地址：http://es6.ruanyifeng.com/#README
1、Babel 转码器
- Babel是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行；
2、let、const
- ES6新增了let命令，用来声明变量，只在let命令所在的代码块内有效。let不存在变量提升，它所声明的变量一定要在声明后使用，否则报ReferenceError；
- const声明一个只读的常量。一旦声明，常量的值就不能改变；
- ES6明确规定，如果区块中存在let和const命令，凡是在声明之前就使用这些变量，就会报错。称为“暂时性死区”（temporal dead zone，简称 TDZ）。
3、arrow function箭头函数
直接上代码
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
//由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。
let getTempItem = id => ({ id: id, name: "Temp" });
//简化回调函数
var result = values.sort((a, b) => a - b);
使用注意点
- 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象；
- 不可以当作构造函数（实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数）；
- 不可以使用arguments对象，该对象在函数体内不存在；
4、Set和Map
Set
- ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值；
- 常用方法：
add(value)：添加某个值，返回Set结构本身。——可用于数组去重
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
Array.from：可以将 Set 结构转为数组。
Map
- JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
- 常用方法：
set、get、delete
5、Promise
- Promise 是异步编程的一种解决方案，从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
- Promise对象有以下两个特点
1、Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。
下面是一个用Promise对象实现的 Ajax 操作的例子。
var getJSON = function(url) {
var promise = new Promise(function(resolve, reject){
var client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
function handler() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
});
return promise;
};
getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出错了', error);
});
6、Class与继承
javaScript 语言中，生成实例对象的传统方法是通过构造函数。ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。
class Bar {
doStuff() {
console.log('stuff');
}
}
var b = new Bar();
b.doStuff() // "stuff"
网友评论