自动化测试、前后端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开发干货。

相关推荐
出征2 分钟前
Pnpm的进化进程
前端
一枚ABAPer8 分钟前
SAP ABAP 如何读取FTP读取CSV文件到内表
后端
苏三的开发日记12 分钟前
grafana里面怎么添加Prometheus数据源监控MySQL
后端
找不到对象就NEW一个14 分钟前
wechatapi,微信二次开发-连载篇(二)通讯录模块
后端·微信
屿小夏15 分钟前
openGauss020-openGauss 向量数据库深度解析:从存储到AI的全栈优化
前端
Y***985126 分钟前
【学术会议论文投稿】Spring Boot实战:零基础打造你的Web应用新纪元
前端·spring boot·后端
T***u33332 分钟前
JavaScript在Node.js中的流处理大
开发语言·javascript·node.js
q***333744 分钟前
SpringMVC新版本踩坑[已解决]
android·前端·后端
武子康1 小时前
大数据-166 Apache Kylin 1.6 Streaming Cubing 实战:Kafka 到分钟级 OLAP
大数据·后端·apache kylin
Croa-vo1 小时前
TikTok 数据工程师三轮 VO 超详细面经:技术深挖 + 建模推导 + 压力测试全记录
javascript·数据结构·经验分享·算法·面试