自动化测试、前后端mock数据量产利器:Chance.js深度教程

1. 什么是Chance.js?

  • 超轻量级(压缩后仅十几KB)
  • API极其丰富,支持姓名、年龄、地址、电话、邮箱、数字、布尔、图片、时间、uuid等几十种数据类型
  • 无外部依赖,适用于Node、前端浏览器等环境
  • 自定义性强,可控制数据范围、格式、多语言等

2. 快速安装与引入

Node环境:

bash 复制代码
npm install chance
js 复制代码
const Chance = require('chance');
const chance = new Chance();

前端浏览器(CDN):

html 复制代码
<script src="https://cdn.jsdelivr.net/npm/chance@1.1.11/dist/chance.min.js"></script>
<script>
  var chance = new Chance();
</script>

3. 生成常用假数据

基础属性

js 复制代码
console.log(chance.name());       // 随机姓名 e.g. 'Bettie Thornton'
console.log(chance.age());        // 随机年龄 e.g. 54
console.log(chance.gender());     // 随机性别 'Male' or 'Female'
console.log(chance.city());       // 随机城市 e.g. 'Cagaeh'
console.log(chance.country());    // 随机国家 e.g. 'DE'
console.log(chance.phone());      // 随机电话号 e.g. (766) 998-5343
console.log(chance.email());      // 随机邮箱 e.g. 'eptof@wahehasa.gm'
console.log(chance.url());        // 随机网址 e.g. http://gu.bv/sur

数值、布尔、数组

js 复制代码
chance.integer({ min: 100, max: 999 });  // 生成指定范围整数
chance.floating({ min: 0, max: 1, fixed: 3 }); // 小数三位
chance.bool();         // true或false
chance.pickone(['red', 'blue', 'green']); // 随机挑选
chance.shuffle([1,2,3,4,5]); // 随机打乱数组

唯一标识与特殊格式

js 复制代码
chance.guid();      // GUID/UUID
chance.hash();      // 随机哈希
chance.ip();        // 随机IPv4
chance.natural();   // 随机自然数
chance.timestamp(); // 随机时间戳
chance.date({ year: 2024 }); // 指定年份的日期对象

4. 控制数据范围与定制

Chance 几乎所有API都可以定制参数------范围、位数、样式:

js 复制代码
chance.name({ middle: true }); // 带中间名
chance.age({ type: 'child' });      // 0-12岁
chance.phone({ country: 'fr' }); // 法国电话
chance.string({ length: 8, pool: '0123456789ABCDEF' }); // 8位十六进制字符串

5. 批量生成mock数据

常见于表格、列表、接口数据填充:

js 复制代码
const list = Array.from({ length: 10 }).map(() => ({
  id: chance.guid(),
  name: chance.name(),
  age: chance.age(),
  email: chance.email(),
  city: chance.city()
}));
console.table(list);

6. 测试、数据可视化、前端mock应用场景

  • 前端开发:接口返回数据无须后端,直接mock填充表单/列表
  • 测试用例:各种格式边界、随机性输入
  • 数据可视化:大规模模拟用户、订单、网络数据
  • 安全测试:大量边界、极端字符串、号码覆盖


7. 常见坑和小贴士

  • 随机字符串如需高复杂度可指定字符池
  • 路径、邮箱、手机号可定制格式,避免后续格式错误
  • 生成大量 mock数据时,推荐批量函数或map

结语

Chance.js 用最简单的方式解决"前端造假数据难题",是你开发、测试、数据展现的最佳拍档。赶快试试看,用它让你的 mock 代码不再拖沓!

本文只是简单的罗列了Chance.js的一些用法,更多用法可以查看官网


如果你喜欢本教程,记得点赞+收藏!关注我获取最新JavaScript开发干货。

相关推荐
子兮曰1 天前
OpenClaw入门:从零开始搭建你的私有化AI助手
前端·架构·github
Victor3561 天前
https://editor.csdn.net/md/?articleId=139321571&spm=1011.2415.3001.9698
后端
吴仰晖1 天前
使用github copliot chat的源码学习之Chromium Compositor
前端
1024小神1 天前
github发布pages的几种状态记录
前端
Victor3561 天前
Hibernate(89)如何在压力测试中使用Hibernate?
后端
灰子学技术1 天前
go response.Body.close()导致连接异常处理
开发语言·后端·golang
不像程序员的程序媛1 天前
Nginx日志切分
服务器·前端·nginx
Daniel李华1 天前
echarts使用案例
android·javascript·echarts
北原_春希1 天前
如何在Vue3项目中引入并使用Echarts图表
前端·javascript·echarts
JY-HPS1 天前
echarts天气折线图
javascript·vue.js·echarts