常用ECMAScript6知识点总结

2017-09-15 本文已影响17人 Colin_Version

本文总结了相对常用的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"

常用ECMAScript6知识点总结

猜你喜欢

热点阅读