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');  // 此行可以被正常执行