JavaScript一行代码生成九九乘法表

当你代码写的多了，会发现，其实开发中用的最多的数据类型是 字符串 和 数组，而字符串其实也是数组的一个变种。

所以不要害怕，本文不谈算法😋 ，仅借此文介绍一些 JavaScript 中 Array 的几个高级用法。

如果你是急性子，生成九九乘法表的代码是：

Array.from({ length: 9 }, (_, i) => i + 1).map((row, i, arr) =>
  arr.slice(0, row).map((col) => `${col}x${row}=${col * row}`)
);

为易于阅读，一行代码被格式化成了多行。如果你想了解该代码的原理，继续往下看吧。

逛百度知道时，看到有网友问：JavaScript 如何做九九乘法表？^[1]

我思考一下后给出了自己的答案，并且出于私心在答案的末尾推广了自己公众号。

结果。。。答案被百度毙了，说是违反规范。我申诉，也以申诉失败告终。

吐嘈

现在几个大互联网平台基本上都是互相屏蔽、各自画牢，罔顾用户需求。其实如果在百度知道上回答问题时可以推广公众号，在推广效果好时，用户也会更加积极地在知道上回答问题，这对双方平台和用户来说都是共赢的。可惜各自私心互不通融。

回到正题

小学时学的 九九乘法表 大致是这样的：

通过观察可提取以下规律：

每一行的实际有效单元格数量和所在的行数一致。比如 第1行 是1列，第2行 是2列...第9行 是9列。而每一个单元格内的内容等式则是 所在列x所在行=积。

由此，我们可以先定义一个从1到9的数组：

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];

数组中的值代表第几行。

从上面规律可行，第1行有1列，第2行有2列...第9行有9列。

当我们遍历 nums 数组时，我们得到了行标，怎么得到列标呢。

再注意观察， 第1行，我们的列标是 [1]，第2行列标是 [1,2]，第3行列标是 [1,2,3]...。由此可行，每一行的列表由 [1...行标] 组成。可以取个巧，复用nums数组，对于行数n，其列标是nums.slice(0,n);：

// 对于第3行
// 列标是 [1, 2, 3]
nums.slice(0,3);

知识点一: Array.prototype.slice 可用于截取数组的一部分，生成新的数组。

有了以上分解，一个生成 九九乘法表 的语句就呼之欲出了：

[1, 2, 3, 4, 5, 6, 7, 8, 9].map((row, i, arr) =>
  arr.slice(0, row).map((col) => `${col}x${row}=${col * row}`)
);

在 Chrome Console 中运行上述代码，得到结果如下：

如果你想要更好看的输出，可借助 console.table：

重构

目的是达到了，但还可以更好。

一般生成有规律的数组时，我们不建议一个一个敲打出来，比如上面的 [1, 2, 3, 4, 5, 6, 7, 8, 9]。

我通常这样写：

[...Array(9)].map((v, i) => i + 1);

知识点二: Array构造器传入一个整数时，会生成一个给定长度的 sparse数组。对这个数组调用map是无效的，可以用 ... 操作符将其转换为一个正常的数组。

或者这样写：

Array.from({ length: 9 }, (v, i) => i + 1);

知识点三：Array.from 可以将一个 类数组(array-like) 或 可迭代(iterable) 对象，转换为真实的数组。

关于 类数组 和 可迭代 对象，请自行了解学习。

总结

我们通过从 九九乘法表 里找规律，以代码的形式完成了乘法表的生成，借以分享了几个高级的数组用法。希望读者朋友们以后面对数组时，不仅是熟悉传统的for语句，数组自带的函数式方法或工具方法也能熟练使用。

同时我们也吐嘈了当下各自为营的互联网大厂们，希望这股坏风气早日散去，让国内有限的互联网更加「互联」。