es6笔记

前言，这篇笔记是作者的一个笔记而已，记录的不全，望包涵，持续更新。(阮老师的笔记)

## let && const

在函数作用域或全局作用域中通过关键字var声明的变量，无论实际上是在哪里声明的，都会被当成在当前作用域顶部声明的变量，这就是我们常说的提升（Hoisting）

//变量提升其实不是进入判断之后猜创建value，在es6中，let和const完美的解决了此问题。
function getValue(condition){
   if(condition){
       var value = 'blue';
       return value;
   } else {
       return null; 
   }
}
//实际被浏览器解析为：
function getValue(condition){
   var value;
   if(condition){
       var value = 'blue';
       return value;
   } else {
       return null;
   }
}

## String

字符串中的子串识别，自javaScript首次被使用以来，开发者们就使用indexOf() 方法来在一段字符串中检测另一段子字符串，在ES6中，提供了3个类似的方法可以达到相同效果。

• includes()方法，如果在字符串中检测到指定文本则返回 true ，否则返回 false 。
• startsWith()方法，如果在字符串的起始部分检测到指定文本则返回 true ，否则返回 false 。
• endsWith()方法，如果在字符串的结束部分检测到指定文本则返回 true ， 否则返回 false 。

示例：

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

**************************************

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

以上的3个方法都接收2个参数：第一个参数是指定要搜索的文本，第二个参数是可选的，指定一个开始搜索的位置的索引值。如果指定了第二个参数，则 includes() 方法和 startsWith() 方法会从这个索引值的位置开始匹配，endsWith() 方法则从这个索引值减去欲搜索文本长度的位置开始正向匹配。（优化了搜索的速度）

• 块级作用域

  • let 取代 var

  • const 设置常量增加可读性

• 字符串

  • 静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。

• 对象

  • 单行定义的对象，最后一个成员不以逗号结尾。多行定义的对象，最后一个成员以逗号结尾。

  • 对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用Object.assign方法。

      const a = {};
      Object.assign(a, { x: 3 });
  

• 数组

  • 使用扩展运算符（…）拷贝数组。

      // bad
      const len = items.length;
      const itemsCopy = [];
      let i;
      
      for (i = 0; i < len; i++) {
        itemsCopy[i] = items[i];
      }
      
      // good
      const itemsCopy = [...items];
  

  • 使用 Array.from 方法，将类似数组的对象转为数组。

      const foo = document.querySelectorAll('.foo');
      const nodes = Array.from(foo);
  

• 函数

  • 立即执行函数可以写成箭头函数的形式。

  • 那些需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this。

      // bad
      [1, 2, 3].map(function (x) {
        return x * x;
      });
      
      // good
      [1, 2, 3].map((x) => {
        return x * x;
      });
      
      // best
      [1, 2, 3].map(x => x * x);
  

• class

  • 总是用 Class，取代需要 prototype 的操作。因为 Class 的写法更简洁，更易于理解

      // bad
      function Queue(contents = []) {
        this._queue = [...contents];
      }
      Queue.prototype.pop = function() {
        const value = this._queue[0];
        this._queue.splice(0, 1);
        return value;
      }
      
      // good
      class Queue {
        constructor(contents = []) {
          this._queue = [...contents];
        }
        pop() {
          const value = this._queue[0];
          this._queue.splice(0, 1);
          return value;
        }
      }
  

  • 使用extends实现继承，因为这样更简单，不会有破坏instanceof运算的危险。

      // bad
      const inherits = require('inherits');
      function PeekableQueue(contents) {
        Queue.apply(this, contents);
      }
      inherits(PeekableQueue, Queue);
      PeekableQueue.prototype.peek = function() {
        return this._queue[0];
      }
      
      // good
      class PeekableQueue extends Queue {
        peek() {
          return this._queue[0];
        }
      }
  

• 模块

  • 首先，Module 语法是 JavaScript 模块的标准写法，坚持使用这种写法。使用import取代require。

      // bad
      const moduleA = require('moduleA');
      const func1 = moduleA.func1;
      const func2 = moduleA.func2;
      
      // good
      import { func1, func2 } from 'moduleA';
  

  • 使用export取代module.exports。

      // commonJS的写法
      var React = require('react');
      
      var Breadcrumbs = React.createClass({
        render() {
          return <nav />;
        }
      });
      
      module.exports = Breadcrumbs;
      
      // ES6的写法
      import React from 'react';
      
      class Breadcrumbs extends React.Component {
        render() {
          return <nav />;
        }
      };
      
      export default Breadcrumbs;
  

  • 如果模块只有一个输出值，就使用export default，如果模块有多个输出值，就不使用export default，export default与普通的export不要同时使用。

• ESLint 的使用

  • ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。
  • 首先，安装 ESLint。

  $ npm install -g eslint
  

  • 然后，安装 Airbnb 语法规则，以及 import、a11y、react 插件。

  $ npm i -g eslint-config-airbnb
  $ npm i -g eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
  

  • 最后，在项目的根目录下新建一个.eslintrc文件，配置 ESLint。

  {
    "extends": "eslint-config-airbnb"
  }
  

  • 现在就可以检查，当前项目的代码是否符合预设的规则。