ES6详细介绍

来源：互联网发布：淘宝买彩票安全吗编辑：程序博客网时间：2024/06/09 08:53

let和const的使用
let定义变量，const定义常量，let和var的区别主要是块级作用域、循环添加事件的使用。

var a = 1;//之前的使用方式let b = 2;//现在的使用方式const c = 3;//现在的常量定义

之前对同一个变量可以重复定义：

var a = 1;//之前的使用方式var a = 2;//正确

现在对一个变量不可以重复定义：

let a = 1;//之前的使用方式let a = 2;//错误

现在let有块级作用域，但是var没有块级作用域：

if(true){    let a = 1;    console.log(a);//1}console.log(a);//报错，a is not defined

if(true){    var a = 1;    console.log(a);//1}console.log(a);//1

对于循环添加事件，之前使用闭包的方式解决，现在可以直接使用let：
index.html

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body>        <div id="root">        </div>        <ul>            <li>1</li>            <li>2</li>            <li>3</li>            <li>4</li>            <li>5</li>        </ul>        <script src="http://localhost:8080/bundle.js" type="text/javascript" charset="utf-8"></script>    </body></html>

使用let的方式：

let oLi = document.getElementsByTagName("li");for(let i = 0; i < oLi.length; i++){    oLi[i].onclick = function(){        console.log(i);    }}//依次点击之后输出0， 1， 2， 3， 4

使用var的方式：

var oLi = document.getElementsByTagName("li");for(var i = 0; i < oLi.length; i++){    oLi[i].onclick = function(){        console.log(i);    }}//依次点击之后输出5， 5， 5， 5， 5

使用var的闭包方式解决：

var oLi = document.getElementsByTagName("li");for(var i = 0; i < oLi.length; i++){    (function(j){        oLi[j].onclick = function(){            console.log(j);        }    })(i)}//依次点击之后输出0， 1， 2， 3， 4

class, extends的使用
类的概念是第一次出现在js中。之前的解决方案是构造函数：

function Animal (name,age) {    this.name = name;    this.age = age;}Animal.prototype.getName = function(){    console.log(this.name);}new Animal('cat',3).getName();//cat

ES6的方式是：

class Animal {    constructor(name,age){        this.name = name;        this.age = age;    }    getName(){        console.log(this.name);    }}new Animal('cat',3).getName();//cat

之前的继承方式：

//applyfunction Animal () {    this.type = 'annimals'}function Cat (name,age) {    Animal.apply(this,arguments);    this.name = name;    this.age = age;}var cat1 = new Cat("大毛",3);alert(cat1.type);

//callfunction Animal () {    this.type = 'animals'}function Cat (name,age) {    Animal.call(this);    this.name = name;    this.age = age;}var cat1 = new Cat("大毛",3);alert(cat1.type);//animals

//prototypefunction Animal () {}Animal.prototype.species = "动物";function Cat (name,age) {    this.name = name;    this.age = age;}function extend2(Child, Parent) {　　var p = Parent.prototype;　　var c = Child.prototype;　　for (var i in p) {　　　　c[i] = p[i];　　}　　c.uber = p;}extend2(Cat, Animal);var cat1 = new Cat("大毛","黄色");alert(cat1.species); // 动物

ES6的继承就是：

//es6class Animal {    constructor(){        this.type = 'animal'    }    says(say){        console.log(this.type + ' says ' + say)    }}let animal = new Animal()animal.says('hello') //animal says helloclass Cat extends Animal {    constructor(){        super()        this.type = 'cat'    }}let cat = new Cat()cat.says('hello') //cat says hello

arrow functions的使用
箭头函数是ES6的一大特色，使用 “=>”代替”function”;

//传统写法function add(a,b){    console.log(a+b);}add(1,1);//2

//ES6写法let add = (a,b) => {    console.log(a+b);}add(1,1);//2

箭头函数的另一大作用就是this的指向不用重新定义。

template string的使用
对于字符串的表示，我们之前是这样的：

var name = 'mapbar_front';console.log(name+"是菜鸟！");//mapbar_front是菜鸟！

但是ES6中我们可以这样：

let name = 'mapbar_front';console.log(`${name}是大神！`);//mapbar_front是大神！

这种方式把变量写在字符串中。

destructuring的使用
解构赋值，这是一种更方便的赋值方式，一种是数组形式的解构赋值，一种是对象形式的解构赋值。
以前我们是这样赋值多个变量的：

var a = 1;var b = 2,c = 3;console.log(a,b,c);//1,2,3

使用ES6的解构赋值是这样的：

//数组let [a,b,c] = [1,2,3];console.log(a,b,c);//123//对象let {x, y, z} = {x: 1, y: 2, z: 3}console.log(x,y,z);//123

default的使用
对于函数的默认值，我们之前是这样的处理的

function a(x){    x  = x || 1;    console.log(x);}a();//1a(3);//3

但是ES6中我们是这样的：

let a = (x = 1) => {    console.log(x);}a();//1a(3);//3

rest arguments的使用
这是一种新的参数传递方式，能够把你的参数以一个数组的方式传递进来，你不必确定你的函数的参数到底需要传递几个，代码示例：

let a = (...rest) => {    console.log(rest);}a(1);//[1]a(1,3,"4");//[1,3,"4"];

Promise的使用
Promise承诺保证一定会有一个输出，不管这个输出是正确还是错误，总会进行resolve和reject。
ES6 原生提供了 Promise 对象。

所谓 Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。

Promise 对象有以下两个特点。

（1）对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。

Promise 也有一些缺点。首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
基本使用方式：

var promise = new Promise(function(resolve, reject) { if (/* 异步操作成功 */){ resolve(value); } else { reject(error); }});promise.then(function(value) { // success}, function(value) { // failure});

一个使用setTimeout异步模拟的例子：

new Promise((resolve,reject) => {    setTimeout(() => {        let a = 1        resolve(a)    },1000)}).then((res) => {    alert(res);//1})

这个例子在1秒之后alert（1）；
开始new 一个Promise对象，参数是一个函数，这个参数函数又有两个参数函数，分别是resolve和reject，在异步操作成功resolve一个返回的值，这里使用a代替，当resolve之后，调用Promise对象的then（）方法得到传递的数据。

<完>— 关于数组和字符串部分，我会在一个新的章节介绍。

0 0