javascript-generate-list-data

介绍

在前端项目开发过程中，经常要生成列表数据，用于展示或者测试之用，今天介绍一个快速生成列表数据的方法。假设我们正在开发一个用户管理系统，有一个页面用于展示系统中的用户，用户的类型定义如下：

interface User = {
  id: number;
  name: string;
  email: string; 
}

在项目开发初期，API还未开发完成，前端只能先自己Mock数据用来展示页面。假设我们要生成50条用户数据，你会怎么做？大多数人都会想到如下方案。

const users = [];
for (let i = 0; i < 50; i++) {
  users.push({
    id: i + 1,
    name: `User ${i + 1}`,
    email: `user${i + 1}@example.com`,
  });
}

中规中矩的方法，也是我以前常用的方法，今天在做code review时发现了另一个写法，感觉非常新颖，与大家分享。

const users = Array.from({ length: 50 }, (_, i) => ({
  id: i + 1,
  name: `User ${i + 1}`,
  email: `user${i + 1}@example.com`,
}));

想要看懂上面的代码，首先需要了解Array.from方法，这个方法可以根据一个已经存在的数组或者类数组对象创建一个新的数组，它的定义如下，我们用的是第二种形式。

1
2
3

Array.from(items)
Array.from(items, mapFn)
Array.from(items, mapFn, thisArg)

看一下参数：
items: 可以是一个数组或者类数组对象。
mapFn: 可选参数，是一个映射函数，用于对每个元素进行转换。
thisArg: 可选参数，指定mapFn函数中的this上下文。

还需要了解一下类数组对象，可以看看这篇：xxx, 类数组对象有两个特征：

具有length属性。
可以通过索引访问元素。

好了，基础知识讲解完毕，回到上面的代码。

const users = Array.from({ length: 50 }, (_, i) => ({
  id: i + 1,
  name: `User ${i + 1}`,
  email: `user${i + 1}@example.com`,
}));

{length: 50}实际上创建了一个类数组对象，它具有50个元素，但这些元素都是undefined。
(_, i) => ({ ... })是一个映射函数，它接收两个参数，第一个参数是当前元素（在这里是undefined），第二个参数是当前元素的索引。

注意：javascript中有一个不成文的约定，如果一个变量没有用到但是必须占位，那么就用_作为变量名。仔细观察代码可知，我们只需要下标i，所以第一个参数用_占位。函数内部的实现就比较简单了，直接根据下标i生成对应的用户数据对象。由于使用的是箭头函数且返回的是对象，所以需要用括号包裹对象字面量。

今天的内容比较简单，但也涉及了类数组对象，Array.from方法以及箭头函数的用法。每一段优雅代码的背后，都是无数个小知识点的积累。

祝大家编程愉快，我们明天再见。

今天滨海的天气特别凉快，弹弓小队三人刚刚结束练弓，回家就写了这篇，一会儿还要洗衣服，准备迎接明天的训练。