ES6 你可能不知道的事 - 基础篇

// 定义常量
const REG_GET_INPUT = /^\d{1,3}$/;

// 定义配置项
let config = {
  isDev : false,
  pubDir: './admin/'
}

// 引入 gulp
let gulp    = require('gulp');

// 引入gulp相关插件
let concat  = require('gulp-concat');
let uglify  = require('gulp-uglify');
let cssnano = require('gulp-cssnano');

const start = 'hi all';

const getName = () => {
  return 'jelly';
};

const conf = {
  fav: 'Coding'
};

// 模板
const msg = `${start}, my name is ${getName()}, ${conf.fav} is my favourite`;

// 1. 与引号混用
const wantToSay = `I'm a "tbfed"`;

// 2. 支持多行文本
const slogan = 
`
I have a dream today!
`;

// 比较适合写HTML
const resultTpl = 
`
  <section>
    <div>...</div>
  </section>
`;

const _bookNum = 4;

const basicConfig = {
  level: 5
}

const config = {
  // 直接指定原型对象
  __proto__: basicConfig,
  
  // 属性简写
  _bookNum,
  
  // 方法简写
  getBookNum() {
    return this.bookNum;
  }
}

// 未使用箭头函数的写法
{
  ...
  
  addOptions: function (options) {
  
    var self = this;
  
    options.forEach(function(name, opts){
      
      self[name] = self.addChild(name, opts);
      
    });
    
  } 
}

// 使用箭头函数后的写法
{
  ...
  
  addOptions: function (options) {
  
    options.forEach((name, opts) => {
      
      this[name] = this.addChild(name, opts);
      
    });
    
  } 
}

// 完整写法
const getOptions = (name, key) => {
  ...
}

// 省略参数括号
const getOptions = key => {
  ... 
}

// 省略参数和方法体括号
const getOptions = key => console.log(key);

// 无参数或方法体，括号不能省略
const noop = () => {};

gitPromise
  .then(() => git.add())
  .then(() => git.commit())
  .then(() => git.log())
  .then((msg) => {
      ...
  })
  .then(() => git.push())
  .catch((err) => {
      utils.error(err);
  });

const bookSet = ['UED', 'TB fed', 'Not find'];
const bookCollection = () => {
  return {book1: 'UED', book2: 'TB fed'};
};

// 1. 解构也可以设置默认值
const {book1, book3 = 'Not find'} = bookCollection();

// 2. 解构数组时候是可以跳过其中某几项的
const [book1,,book3] = bookSet;  // book1 = 'UED', book3 = 'Not find'

// 3. 解构可以取到指定对象的任何属性，包括它包含的方法
const {length: setLength} = bookSet;  // setLength = 3

// 1. rest 得到的是一个真正的数组而不是一个伪数组
const getOptions = function(...args){
  console.log(args.join); // function
};

// 2. rest 可以配合箭头函数使用，达到取得所有参数的目的
const getOptions = (...args) => {
  console.log(args); // array
};

// 3. spread 可以用于解构时，聚合所得的值
const [opt1, ...opts] = ['one', 'two', 'three', 'four'];

// 4. spread 可以用于数组定义
const opts = ['one', 'two', 'three', 'four'];
const config = ['other', ...opts];

// 1. 静态变量
// ES6 的类定义实现了静态方法的定义，但静态变量呢？
// 可以用如下方式实现: 
class TbFedMembers{
  static get HuaChen(){
    return 'jelly';
  }
}
TbFedMembers.HuaChen; // "化辰"

// 2. 私有属性（私有属性有多种实现方式，只谈及其中一种）
// 闭包
const TbFedMembers = (() => {
  const HuaChen = 'jelly';
  
  return class{
    getOneMemberName(){
      return HuaChen;
    }
  };
})();

// 1. 多个异步任务同时执行用 Promise.all，顺序执行使用链式调用
// Promise.all
Promise
  .all([jsBuildPromise, cssBuildPromise])
  .then(() => {
    ...
  });

// chain
jsBuildPromise
  .then(() => cssBuildPromise)
  .then(() => {
    ...
  });


// 2. Promise 的链式调用需要每一个过程返回一个 Promise 对象才能保证顺序执行
gitPromise
  .then(() => git.add())  // 正确，箭头函数简写
  .then(() => {
    git.commit(); // 错误，函数返回 undefined，会立即执行下一过程
  })
  .then(() => {
    return git.log(); // 正确
  });


// 3. Promise 需要调用 catch 方法来捕获错误，而且过程内的错误不会阻塞后续代码执行
new Promise(() => {
  f;  // not define error !
})
.catch((err) => {
  console.log(err)  // show 'f is not define'
});
console.log('error test');  // 此行可以被正常执行