箭头函数

其实就是java的lamda编程，它的特点是单向无环流，没有变量，源数据状态不能被改变。

基本语法

()=> {} //表示一个空函数，和function(){}功能一样，如果只有一行语句则，{}可省略
lef fn = arg => {} //如果函数只有一个参数，刚可省略参数()
(do, what) => console.log(do, what) //表示带两个参数的函数，这行语句在console之前默认带了一个return 

将函数或组件做为参数传递

下面就是一个例子，把add做为参数传递给logs函数。

//定义一个函数，用于做参数使用
const add = (x, y) => x+y;//声明了接受func参数的函数logs，返回另一个函数，另一个函数的参数为...args
const logs = func => (...args) => {return func(...args);
}
//调用
const l = logs(add);

export和import

export和import 是一种CommonJS方案。它的底层是使用var Logo = require(./components/Logo) 和 module.exports=Logo实现的。

export

可以导出一个或多个对象、函数、变量，主要是为了安全，防止全是全局变量；

export default Logo  //这后面一般没有分号，而且一个js文件只能有一个default

import

与export对应，如果是通过npm全局安装的模块则不用写路径，直接用 import React from 'react'。

import Logo from './components/Logo；

1. ./components/Logo：表示模块本地相对路径，后面也可以带.js，但不建议带；
2. Logo：和 export default Logo 值对应；

另外还有一种更简要的写法，如下：

//{}可用,分隔一次导入多个模块
import React, {PropTypes} from 'react';//等价于下面两行代码
import React from 'react；
const PropTypes = React.PropTypes;

使用export实现组件初始化配置

• 配置数据

//classification.js
export default {grapes: ['Baco Noir','Barbera',], 
}

• 配置数据引用

//schema.js
import classification from './classification';export default [{id: 'grape', //--label: 'Grape',type: 'suggest',options: classification.grapes, show: true,sample: 'Merlot', //---align: 'left',},
]

• 配置数据使用

"use strict";
import schema from './schema';//从缓存中取数据
let data = JSON.parse(localStorage.getItem('data'));
// 如果没取到，则读取默认的schema配置
if (!data) {data = {};schema.forEach((item) => data[item.id] = item.sample);data = [data];
}

导出/导入公用数据类型

可以把自定义类型用export导出供其它组件使用，相当于java中final static class的概念，其用法如下：

• 导出 FormInput.js

type FormInputFieldType = 'year' | 'suggest' | 'rating' | 'text' | 'input';
export type FormInputFieldValue = string | number;export type FormInputField = {type: FormInputFieldType,defaultValue?: FormInputFieldValue,id?: string,options?: Array<string>,label?: string,
};

• 导入Button.js

import type {FormInputField, FormInputFieldValue} from './FormInput';type Props = {fields: Array<FormInputField>, //使用initialData?: Object,readonly?: boolean,
};class Form extends Component {props: Props;getData(): Object {let data: Object = {};this.props.fields.forEach((field: FormInputField) =>  //使用data[field.id] = this.refs[field.id].getValue());return data;}
}  

const{}

const { zhi } = Gao; //等价于 const zhi = Gao.zhiconst {a} = {a:1} //1const {a} = {a:1, b:2}; //1

var、let、const的区别

• var 全局变量：没有块的概念，可以跨块访问，不能跨函数访问
• let 局部变量：只能在块作用域内访问，不能跨块访问，也不能跨函数访问
• const 定义常量：定义时必须初始化，不能修改，只能在块作用域里访问

   for (let i = 0; i < 2; i++) {console.log(i);//正确}console.log(i);//报错: i is not definedfor (var i = 0; i < 2; i++) {console.log(i);//正确}console.log(i);//正确：2

• var声明变量存在变量提升，即可以先使用后定义，虽然逻辑不对，但程序不会报异常。而let和const则不存在变量提升，所以用 let 定义的变量一定要在声明后再使用，否则会报错
• var 变量可以多次声明，而 let 不允许在相同作用域内，重复声明同一个变量。

async、await

• async：用于申明一个function是异步的；
• await：则可以认为是 async await的简写形式，是等待一个异步方法执行完成的；await关键字只能在async函数内部使用。它可以暂停async函数的执行；

async function asyncFunction() { //这是一个异步方法let promise = new Promise((resolve, reject) => {setTimeout(() => resolve("完成"), 1000)});let result = await promise; // 等待，直到Promise执行完成 (resolve)console.log(result); // "完成"
}
//调用
asyncFunction();

---

---

持续增加中…