前端基础进阶（十四）：es6经常使用基础合集

在实际开发中，ES6已经很是普及了。掌握ES6的知识变成了一种必须。尽管咱们在使用时仍然须要通过babel编译。

ES6完全改变了前端的编码风格，能够说对于前端的影响很是巨大。值得高兴的是，若是你熟悉ES5，学习ES6并不须要花费太多的时间就能够掌握，由于经常使用的基础语法并很少，花少许的时间，就能够开始咱们的ES6之旅了。

这篇文章不会详细的告诉你ES6的每个细节知识，只会根据我本身的开发经验，将我在实际开发中经常用到的知识点分享给你们，给你们学习ES6一个方向的指引。这是由于考虑到不少同窗虽然知道ES6的重要性，可是不知道本身须要掌握那些ES6的知识，也不知道这些知识须要掌握到什么程度，这给新手朋友带来了许多困惑，所以这篇文章就算是一个划重点吧，掌握这些，就能够轻轻松松得进行进一步学习了。

在学习以前，推荐你们使用babel官方提供的在线编译工具，编写本身的demo，会在右侧实时显示出编译以后的代码，以供参考学习 http://babeljs.io/repl/

1、新的变量声明方式 let/const

与var不一样，新的变量声明方式带来了一些不同的特性，其中最重要的两个特性就是提供了块级做用域与再也不具有变量提高。

经过2个简单的例子来讲明这两点。

{
    let a = 20;
}

console.log(a);  // a is not defined

而这个简单的例子，会被编译为：

{
    let _a = 20;
}

console.log(a);  // a is not defined

// ES5
console.log(a);   // undefined
var a = 20;

// ES6
console.log(a); // a is not defined
let a = 20;

固然，你的代码编译成为了ES5以后，仍然会存在变量提高，这一点只须要咱们记住便可。在实际使用中，也须要尽可能避免使用变量提高的特性带来的负面影响。只有在面试题中，才会对变量提高不停的滥用。

使用ES6，咱们须要全面使用let/const替换var，那么何时用let，何时用const就成为了一个你们要熟练区分的一个知识点。

咱们经常使用let来声明一个值会被改变的变量，而使用const来声明一个值不会被改变的变量，也能够称之为常量。

当值为基础数据类型时，那么这里的值，就是指值自己。
而当值对应的为引用数据类型时，那么我这里说的值，则表示指向该对象的引用。这里须要注意，正由于该值为一个引用，只须要保证引用不变就能够，咱们仍然能够改变该引用所指向的对象。

当咱们试图改变const声明的变量时，则会报错。

写几个例子，你们能够仔细揣摩一下：

let a = null;
a = 20;

const obDev = {
    a: 20,
    b: 30
}

obDev.a = 30;

console.log(obDev); // Object {a: 30, b: 30}

const fn = function() {}
const a = obDev.a;
... ...

只要抓住上面我说的特性，那么在使用let/const时就会显得游刃有余。
根据我本身的经验，使用const的场景要比使用let的场景多不少。

2、 箭头函数的使用

以前我说ES6颠覆了js的编码习惯，箭头函数的使用占了很大一部分。

首先是写法上的不一样:

// es5
var fn = function(a, b) {
    return a + b;
}

// es6 箭头函数写法，当函数直接被return时，能够省略函数体的括号
const fn = (a, b) => a + b;

// es5
var foo = function() {
    var a = 20；
    var b = 30;
    return a + b;
}

// es6
const foo = () => {
   const a = 20;
   const b = 30;
   return a + b;
}

箭头函数能够替换函数表达式，可是不能替换函数声明

其次还有一个相当重要的一点，那就是箭头函数中，没有this。若是你在箭头函数中使用了this，那么该this必定就是外层的this。

也正是由于箭头函数中没有this，所以咱们也就无从谈起用call/apply/bind来改变this指向。记住这个特性，能让你在react组件之间传值时少走无数弯路。

var person = {
    name: 'tom',
    getName: function() {
        return this.name;
    }
}

// 咱们试图用ES6的写法来重构上面的对象
const person = {
    name: 'tom',
    getName: () => this.name
}

// 可是编译结果倒是
var person = {
    name: 'tom',
    getName: function getName() {
        return undefined.name;
    }
};

在ES6中，会默认采用严格模式，所以this也不会自动指向window对象了，而箭头函数自己并无this，所以this就只能是undefined，这一点，在使用的时候，必定要慎重慎重再慎重，否则踩了坑你都不知道本身错在哪！这种状况，若是你还想用this，就不要用使用箭头函数的写法。

// 能够稍作改动
const person = {
    name: 'tom',
    getName: function() {
        return setTimeout(() => this.name, 1000);
    }
}

// 编译以后变成
var person = {
    name: 'tom',
    getName: function getName() {
        var _this = this;  // 使用了咱们在es5时经常使用的方式保存this引用

        return setTimeout(function () {
            return _this.name;
        }, 1000);
    }
};

先记住箭头函数的写法，并留意箭头函数中关于this的特殊性，更过实践与注意事项咱们在封装react组件时再慢慢来感觉。

除此以外，箭头函数中没法访问arguments对象。

3、模板字符串

模板字符串是为了解决使用+号拼接字符串的不便利而出现的。它的功能很是强大，可是咱们大多数时候使用它则很是简单。看一个例子你们就明白怎么使用了。

// es6
const a = 20;
const b = 30;
const string = `${a}+${b}=${a+b}`;

// es5
var a = 20;
var b = 30;
var string = a + "+" + b + "=" + (a + b);

使用 `` 将整个字符串包裹起来，而在其中使用 ${} 来包裹一个变量或者一个表达式。

固然模板字符串还支持换行等强大的功能，更多的你们可经过参考资料进一步学习。

4、 解析结构

解析结构是一种全新的写法，咱们只须要使用一个例子，你们就可以明白解析结构究竟是怎么一回事儿。

// 首先有这么一个对象
const props = {
    className: 'tiger-button',
    loading: false,
    clicked: true,
    disabled: 'disabled'
}

当咱们想要取得其中的2个值：loading与clicked时：

// es5
var loading = props.loading;
var clicked = props.clicked;

// es6
const { loading, clicked } = props;

// 给一个默认值，当props对象中找不到loading时，loading就等于该默认值
const { loading = false, clicked } = props;

是否是简单了许多？正是因为解析结构大大减小了代码量，所以它大受欢迎，在不少代码中它的影子随处可见。

// 好比
// section1
import React, { Component } from 'react';

// section2
export { default } from './Button';

// section3
const { click, loading } = this.props;
const { isCheck } = this.state;

// more  任何获取对象属性值的场景均可以使用解析结构来减小咱们的代码量

另外，数组也有属于本身的解析结构。

// es6
const arr = [1, 2, 3];
const [a, b, c] = arr;

// es5
var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];

数组以序列号一一对应，这是一个有序的对应关系。
而对象根据属性名一一对应，这是一个无序的对应关系。
根据这个特性，使用解析结构从对象中获取属性值更加具备可用性。

5、 函数默认参数

以前咱们不能直接为函数指定默认参数，所以不少时候为了保证传入的参数具有一个默认值，咱们经常使用以下的方法：

function add(x, y) {
    var x = x || 20;
    var y = y || 30;
    return x + y;
}

console.log(add()); // 50

这种方式并非没有缺点，好比当我传入一个x值为false，这个时候任然会取到默认值，就不是咱们的本意了。

来看看ES6的默认值写法：

function add(x = 20, y = 30) {
    return x + y;
}

console.log(add());

在实际开发中给参数添加适当的默认值，可让咱们对函数的参数类型有一个直观的认知。

const ButtonGroupProps = {
    size: 'normal',
    className: 'xxxx-button-group',
    borderColor: '#333'
}

export default function ButtonGroup(props = ButtonGroupProps) {
    ... ...
}

6、 展开运算符

在ES6中用...来表示展开运算符，它能够将数组方法或者对象进行展开。先来看一个例子它是如何使用的。

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];

// 这样，arr2 就变成了[1, 2, 3, 10, 20, 30];

固然，展开对象数据也是能够获得相似的结果

const obj1 = {
  a: 1,
  b: 2,
  c: 3
}

const obj2 = {
  ...obj1,
  d: 4,
  e: 5,
  f: 6
}

// 结果相似于 const obj2 = Object.assign({}, obj1, {d: 4})

展开运算符还经常运用在解析结构之中，例如咱们在Raect封装组件的时候经常不肯定props到底还有多少数据会传进来，就会利用展开运算符来处理剩余的数据。

// 这种方式在react中十分经常使用
const props = {
  size: 1,
  src: 'xxxx',
  mode: 'si'
}


const { size, ...others } = props;

console.log(others)

// 而后再利用暂开运算符传递给下一个元素，再之后封装react组件时会大量使用到这种方式，正在学习react的同窗必定要搞懂这种使用方式
<button {...others} size={size} />

展开运算符还用在函数的参数中，来表示函数的不定参。只有放在最后才能做为函数的不定参，不然会报错。

// 全部参数之和
const add = (a, b, ...more) => {
    return more.reduce((m, n) => m + n) + a + b
}

console.log(add(1, 23, 1, 2, 3, 4, 5)) // 39

展开运算符的运用能够大大提升咱们的代码效率，可是在刚开始使用的时候比较绕脑，掌握好了用起来仍是很是爽的，记住这些使用场景，平时在用的时候能够刻意多运用就好了。

7、对象字面量 与 class

ES6针对对象字面量作了许多简化语法的处理。

• 当属性与值的变量同名时。

const name = 'Jane';
const age = 20

// es6
const person = {
  name,
  age
}

// es5
var person = {
  name: name,
  age: age
};

那么这种方式在任何地方均可以使用，好比在一个模块对外提供接口时

const getName = () => person.name;
const getAge = () => person.age;

// commonJS的方式
module.exports = { getName, getAge }

// ES6 modules的方式
export default { getName, getAge  }

• 除了属性以外，对象字面量写法中的方法也能够有简写方式。

// es6
const person = {
  name,
  age,
  getName() { // 只要不使用箭头函数，this就仍是咱们熟悉的this
    return this.name
  }
}

// es5
var person = {
  name: name,
  age: age,
  getName: function getName() {
    return this.name;
  }
};

• 在对象字面量中可使用中括号做为属性，表示属性名也能是一个变量了。

const name = 'Jane';
const age = 20

const person = {
  [name]: true,
  [age]: true
}

在ant-design的源码实现中，就大量使用了这种方式来拼接当前元素的className，例如:

let alertCls = classNames(prefixCls, {
      [`${prefixCls}-${type}`]: true,
      [`${prefixCls}-close`]: !this.state.closing,
      [`${prefixCls}-with-description`]: !!description,
      [`${prefixCls}-no-icon`]: !showIcon,
      [`${prefixCls}-banner`]: !!banner,
 }, className);

ant-design是一个承认度很是高的UI组件库，官方使用react的方式进行了实现，除此以外，还有vue也有对应的实现，有兴趣的同窗能够去他们的官网了解学习。 https://ant.design/index-cn

• class

ES6为咱们建立对象提供了新的语法糖，这就是Class语法。若是你对ES5中面向对象的方式比较熟悉的话，Class掌握起来也是很是迅速的，由于除了写法的不一样，它并不会增长新的难以理解的知识点。咱们先利用一个简单的例子来看看写法的不一样。

// ES5
// 构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 原型方法
Person.prototype.getName = function() {
  return this.name
}

// ES6
class Person {
  constructor(name, age) {  // 构造函数
    this.name = name;
    this.age = age;
  }

  getName() {  // 原型方法
    return this.name
  }
}

babel会将ES6的写法编译成为利用Object.defineProperty实现的方式，这个方法的具体用处你们能够在《JavaScript高级编程3》中学习了解，包括get，set，等都有详细的说明

除此以外，咱们还须要特别注意在实际使用中的几种写法方式的不一样，在下面的例子注释中，我说明了他们分别对应的ES5中的含义。

class Person {
  constructor(name, age) {  // 构造函数
    this.name = name;
    this.age = age;
  }

  getName() {   // 这种写法表示将方法添加到原型中
    return this.name
  }

  static a = 20;  // 等同于 Person.a = 20

  c = 20;   // 表示在构造函数中添加属性 在构造函数中等同于 this.c = 20

// 箭头函数的写法表示在构造函数中添加方法，在构造函数中等同于this.getAge = function() {}
  getAge = () => this.age   

}

箭头函数须要注意的仍然是this的指向问题，由于箭头函数this指向不能被改变的特性，所以在react组件中经常利用这个特性来在不一样的组件进行传值会更加方便。

• 继承 extends

相比ES5，ES6的继承就要简单不少，咱们直接来看一个例子。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  getName() {
    return this.name
  }
}

// Student类继承Person类
class Student extends Person {
  constructor(name, age, gender, classes) {
    super(name, age);
    this.gender = gender;
    this.classes = classes;
  }

  getGender() {
    return this.gender;
  }
}

咱们只须要一个extends关键字，就能够实现继承了，不用像ES5那样去担忧构造函数继承和原型继承，除此以外，咱们还须要关注一个叫作super的方法。

在继承的构造函数中，咱们必须如上面的例子那么调用一次super方法，它表示构造函数的继承，与ES5中利用call/apply继承构造函数是同样的功能。

// 构造函数中
// es6
super(name, age);

// es5
Person.call(this);

super还能够直接调用父级的原型方法， super.getName，可是我本身历来没这样用过，也就不扩展说了。

继承在react中有大量的使用场景，许多组件都利用继承来建立。

import React, { Component } from 'react';

class App extends Component {

  defaultProps = {}
  state = {}
  componentWillMount() {}
  componentDidMount() {}

  btnClick = e => {}

  render() {}
}

只要根据咱们上面所学到的知识，明确的知道哪些属性方法是放在构造函数中，哪些属性方法是放到了原型中，那么咱们本身在编写react组件的时候就要简单和清晰不少。

其实只要咱们ES5面向对象的知识足够扎实，ES6和react掌握起来也没有太多的难度，全部的学习难点，并不在ES6这些不一样的语法糖上，而在于ES5中的原理，所以我在前面分享ES5的核心知识的时候，不少读者老爷都火烧眉毛的但愿我可以更多的说一说ES6的知识。其实咱们都没有必要那么着急，只要前面10多篇文章的知识足够扎实，这篇文章所涉及到的经常使用的ES6知识，最多花30分钟也就掌握了。这些写法上的不一样并不会形成你们理解上的困难，只须要有一个熟悉过程就好了。因此你们的重点，仍是要回归到基础上来。

8、Promise

http://www.jianshu.com/p/fe5f...

9、 模块 Modules

由于学习模块须要一个学习场景，所以我决定在下一篇文章中结合create-react-app一块儿分享给你们。

深刻学习ES6推荐 http://es6.ruanyifeng.com/

前端基础进阶系列目录