7.11

async/await (ES7) ✨

The async function declaration defines an asynchronous function, which returns an AsyncFunction object.

The await operator is used to wait for a Promise. It can only be used inside an async function.

async function funcName(arg) {
  try {
    console.log('start', arg);
    await firstFunction(1000);
    // waiting...
    secondaryFunction();
  } catch (err) {
    console.log(err);
  }
}

function firstFunction(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

function secondaryFunction() {
  // some ajax thing
  console.log('ajax....')
}

fetch

npm i node-fetch

一个很方便发起请求的方法。

import fetch from 'node-fetch'

fetch(`https://api.github.com/users/karenchuang`)
.then(){
  // ...
}
.catch(){
 // ...
}

Ref:

[JavaScript ES7 中使用 async/await

• 解决回调函数嵌套问题

• 使用 Fetch

from practice.

7.12

TODO

• ES6 Arrow Functions Note
• ES6 Spread Operator and Rest Parameters Note

Arrow Functions

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

let somebody = {
  name: 'Joe',
  hobbies: ['Robots', 'Dance', 'Internet'],
  showHobbies: function() {
    this.hobbies.forEach((hobby) => {
      console.log(`${this.name} like ${hobby}`)
    })
  }
}

💻 今日は本当に疲れたわ！！
🎤 ［旅立ちの日に］

from practice.

7.15

😄 参加了Jsconf CN 2017 !!!

from practice.

7.18

reduce 累加

计算list中的items的长度和：

let list = [
 {
    items: [1,2,3,4],
 },
 {
    items: [5,6,7,8],
 },
 {
    items: [9,10]
 }
]
let total = list.reduce((acc, cur) => {
 return acc + cur.items.length
}, 0)

// total : 10

for-of

Promise

用了很久了，才发现这是es6的语法 😔

from practice.

7.23

Last, week, I almost worked overtime every night. ( ×ω× )

git rebase

上周被同事小哥哥发现没有用rebase的习惯，被纠正。
当我拉取远程master主分支的时候，习惯操作是：

git pull origin master

这个命令就相当于 pull = fetch + merge
但是git pull操作会使得生成的branch graph非常不整洁

例如这种：

导致这种图产生的原因是：在git pull合并的时候，会生成一个新的commit接节点：

但是如果使用

git pull origin master --rebase

就不会产生新的commit
本地的2个commit D和E 通过 rebase 方式重新拼接在 C 之后。

--no-ff

当我们需要将开发分支develop合并到主分支master的时候，我之前的操作是直接在master分支上，去merge develop分支。

但是：

通常，合并分支时，如果可能，Git会用Fast forward模式，但这种模式下，删除分支后，会丢掉分支信息。合并分支时，加上--no-ff参数就可以用普通模式合并，合并后的历史有分支，能看出来曾经做过合并，而fast forward合并就看不出来曾经做过合并。

--no-ff : 禁用Fast forward

所以，当使用 --no-ff 参数来merge分支的时候，生成的graph是很这样的，非常清晰！

Ref:

• 洁癖者用 Git：pull --rebase 和 merge --no-ff

• Git Community Book 中文版

• 分支管理策略

from practice.

7.24

今天提测了一个项目，好开心，
越来越觉得写出能漂亮的代码真的是一件成就感超级高的事。😄

快下班的时候，和后端争执了一下关于枚举值应该用数字还是应该用字符串，我站字符串。
数字的可读性太差，后端小哥反驳说，除了TYPE还会返回desc描述，这样以后加类型就不用前端改啦吧啦吧啦。
naive !
前端代码除了展示还有各种判断诶，枚举值多了的时候能从0排到20诶。

总之： 最后我赢了。✌️

from practice.

7.25

Map

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

es6中新的数据类型

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.delete('name')
map.clear()

from practice.

7.26

entries()，keys() 和 values()

entries()

The entries() method returns a new Array Iterator object that contains the key/value pairs for each index in the array.

var obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

from practice.

7.27

ES6: class

factory function

JavaScript Factory Functions with ES6+

from practice.

7.29

shorthand function

let flower = {
  height: 10,
  colour: 'red',
  grow: function () {
    this.height += 5
  }
}

// or

let flower = {
  height: 10,
  colour: 'red',
  grow() {
    this.height += 5
  }
}

from practice.