ES6 map, filter

Submitted by Lizhe on Thu, 07/12/2018 - 17:27

  test = () => {

    var data = [1, 2, 3, 4];

    var arrayOfSquares = data.map(function(item) {

      return item * item;

    });

    console.log(arrayOfSquares);

  };

test = () => {

    var data = [0, 1, 2, 3];

    var arrayFilter = data.filter(function(item) {

React 通过 storybook 进行单元测试

Submitted by Lizhe on Mon, 07/09/2018 - 15:09

安装下面的包

  382  npm install --save @storybook/react

  383  npm install --save @storybook/addon-actions

  384  npm install --save @storybook/addon-links

  385  npm install --save @storybook/addons

在package.json平级目录下放置.storybook文件夹

/Users/lizhe/Documents/DEV/projects/es6/study/app/.storybook

文件夹内放置文件

/Users/lizhe/Documents/DEV/projects/es6/study/app/.storybook/config.js

React recompose

Submitted by Lizhe on Thu, 07/05/2018 - 14:59

recompose 模块可以帮助"提升"很多无状态的模块

you take a stateless component, and without creating any class, you enhance it to provide a state and your return the new component, that is "enhanced".

安装

npm install --save recompose

说明文档

https://github.com/acdlite/recompose/blob/master/docs/API.md#withstate

import React, { Component } from "react";

git pull request 入门

Submitted by Lizhe on Tue, 07/03/2018 - 10:52

向目标项目提交需要遵循以下步骤

1. fork目标项目到你本地

2. clone你本地项目

3. 修改本地代码, 然后commit和push, 这些都是到本地

4. 然后去网页new pull request

如果要从目标项目更新到本地

1. 将目标项目添加为远程库 git remote add upstream git@github.com:pactera-admindev-lizhe/Test.git

-t branch

2. 然后可以看到远程库

lizhedeMacBook-Pro:Test lizhe$ git remote -v

origin https://github.com/zl86790/Test.git (fetch)

origin https://github.com/zl86790/Test.git (push)

upstream git@github.com:pactera-admindev-lizhe/Test.git (fetch)

javascript flow checker

Submitted by Lizhe on Fri, 06/29/2018 - 13:11

Setup:
Run npm install flow-bin to add Flow package 

Update package.json file to add "flow": "flow" inside the scripts section
Initialize Flow: npm run flow init (it will generate a .flowconfigfile at the root level) 

Check if Flow is working by running: npm run flow

ES6 拾遗(9)

Submitted by Lizhe on Thu, 06/28/2018 - 10:14

Module

ES6模块不是对象, 而是通过export命令显示指定输出的代码, 再通过import命令输入

ES6 模块

import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载3个方法, 而不加载其他方法. 
这种加载被称为 编译时加载 或者 静态加载, 即ES6 可以在编译时就完成模块加载, 效率比CommonJS模块的加载方式高. 
当然这也导致了ES6模块本身无法被引用, 因为它不是对象

export命令

模块功能主要又两个命令构成 export和import.

export命令用于规定模块的对外接口, import命令用于输入其他模块提供的功能.

一个模块就是一个独立的文件. 该文件内部的所有变量, 外部无法获取. 如果希望外部能够读取内部某个变量, 就必需使用export关键字输出改变量

ES6 拾遗(8)

Submitted by Lizhe on Wed, 06/27/2018 - 16:39

Class的基本用法

1. class表达式

直接通过class定义肯定没有错

20180627044450

class也可以使用表达式的形式定义, 类似函数

下面的代码中, 这个类的名字是MyPoint而不是Point, Point只在class内部的代码可用, 代指当前类

ES6 拾遗(7)

Submitted by Lizhe on Wed, 06/27/2018 - 10:41

async函数

ES2017 标准引入了async函数, 使得异步操作变得更加方便. async函数是什么, 用一句话来说, 它就是Generator函数的语法糖

async函数返回一个Promise对象, 可以使用then方法添加回调函数. 当函数执行时, 一旦遇到await就会先返回Promise对象, 等到异步操作完成, 再接着执行函数体内后面的语句

function timeout(ms){

  return new Promise((resolve)=>{

    setTimeout(resolve,ms)

  })

}

 

async function asyncPrint(value,ms){

  await timeout(ms);

  console.log(value);

}

 

ES6 拾遗(6)

Submitted by Lizhe on Tue, 06/26/2018 - 11:18

对象的扩展

1. ES6 允许直接写入变量和函数作为对象的属性和方法

当属性名是表达式时

let obj = {
      ['a'+'b'+'c']: 123
}

ES6 允许在对象中只写属性名, 不写属性值, 这时 属性值等于属性名所代表的变量,这种写法用于函数的返回值会非常方便

20180626125437

2. Object.assign()