教你两步轻松构造mock数据随着技术的发展，现在很多公司的开发模式都是采用前后端分离，这样就能使得开发人员在前期更专注于

随着技术的发展，现在很多公司的开发模式都是采用前后端分离，这样就能使得开发人员在前期更专注于代码的开发，而在后期更关注于联调及测试，从而提升开发效率。

作为前端开发，不仅要处理代码逻辑，更要关注页面样式，如果在没有提供后端接口的情况下，有些人会采用诸如mock.js、RAP2、easy-mock、yapi 等等工具来构造模拟数据，但是有时候总感觉麻烦，所以下面介绍两步就能构造mock数据：

首先根据页面展示需求，自定义一个数据结构，并赋予初始值，比如：

let data = {
    key: '1',
    name: 'Tom',
    sex: 'male',
    age: 12
}

利用ES6中Array数组的扩展方法fill,可快速填充数组，直接上代码

let mockData = new Array(20).fill(data);

哇，一次直接构造了20条数据，飙车有点快啊~~~想来50条，so easy ... 把20改成50即可，想要多少来多少，页面改样式，页码翻页调试再也不用等...

ok,至此，你就可以用构造出来的mockData 为所欲为了。。。，后期接口提供的情况下，我们只需要自定义一个数据转换方法，将后端返回的数据结构与我们自定义的数据结构进行转换即可，岂不美哉~~~

注意：此方法构造的模拟数据均是一样的哦，而且是静态数据，无法根据条件筛选查询；要想实现稍微复杂功能的mock数据，可以用文章前面提到的一些mock工具哦。