好程序员web前端分享ES6的基础教程

好程序员web前端分享ES6的基础教程，提起ES6大家都不太陌生，但是不知道怎么去使用下面小编带你走进ES6，现在ES8、ES9+都是在ES6的基础上更新的，所以我们要掌握ES8、ES9+必须把ES6给掌握好，说到这就有人提出疑问了？那直接学ES5不就行了嘛，但是，ES5和ES6的差距是很大的，话不多说，现在见真章。

ES5和ES6的区别

ES5作为ECMAScript第五个版本（第四版因为过于复杂废弃了），浏览器支持情况可看这副图

作为核心，它规的几个组成部分：语法、语句、关键字、保留字、操作符、对象、类型。

在使用ES5时严格模式使用'use strict'限制一些用法;数组Array的增加一些方法，比如大家都熟悉的forEach、filter 、indexOf、lastIndexOf、isArray、map等。

最重要的是ES5对象方法我一一的列举下来：

Object.getPrototypeOf

Object.create

Object.getOwnPropertyNames

Object.defineProperty

Object.getOwnPropertyDescriptor

Object.defineProperties

Object.keys

Object.preventExtensions / Object.isExtensible

Object.seal / Object.isSealed

Object.freeze / Object.isFrozen

PS：只讲有什么，不讲是什么。ES5就先写到这里，重点的来了。

1）.ES5的这种语法写起来就比较麻烦了，ES6的好处就凸显出来了它使用对象字面量的属性赋值是非常的方便，举例：

var obj = {

// __proto__

__proto__: theProtoObj,

// Shorthand for ‘handler: handler’

handler,

// Method definitions

toString() {

// Super calls

return "d " + super.toString();

},

// Computed (dynamic) property names

[ 'prop_' + (() => 42)() ]: 42

};

2) .ES6的的块级作用域声明就比ES5的好多了

ES6增加了关键字let, 常量const这样的声明在块级作用域下减少了全局变量的污染。

然而ES6还有很多ES5用起来比较方便的方法1. 赋值解构 2. Class 3.箭头函数（ps 这里是重点）

1. 赋值解构

1.1数组的解构赋值

这个是解构赋值的方法，解构一般有三种情况，完全解构，不完全解构，解构不成功,在上述例子中存在完全解构和解构不成功的例子

2.2对象的解构赋值

对象的解构与数组有一个很重要的不同数组元素是依次排列的变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

实际上 对象的解构赋值是以这样的形式简写的

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋值给对应的变量，真正被赋值的是后者，而不是前者，第一个foo/bar 是匹配的模式，对应的foo/bar属性值才是变量，真正被赋值的是属性值（也就是第二个foo/bar), 如果不能理解再看下面这个例子

好了，解构赋值就说到这里下面介绍一下Class这个属性

2. Class

话不多说上代码，在这里我就给大家举一个实例属性的新方法实例属性除了定义在constructor()方法里面的this上面，也可以定义在类的最顶层。所有实例对象自身的属性都定义在类的头部，看上去比较整齐，一眼就能看出这个类有哪些实例属性。

Class这个属性就这么多属性，没有太多的说的，

3. 箭头函数--（只针对改造匿名函数）

（形参体列表）=> { 函数体代码 }

特点：

箭头函数，本质上就是一个匿名函数；

箭头函数的特性： 箭头函数内部的 this, 永远和箭头函数外部的 this 保持一致；

箭头函数的三个变体：

正规：去掉function、函数名：

var 函数名 = (参数1，…) => { }

函数名(参数1，…)----调用

如：var add = (x, y) => { return x+y }

add(1, 2)

ES6的介绍先到这里