当你代码写的多了，会发现，其实开发中用的最多的数据类型是 字符串 和 数组，而字符串其实也是数组的一个变种。
所以不要害怕，本文不谈算法😋 ，仅借此文介绍一些 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=1 | ||||||||
| 1×2=2 | 2×2=4 | |||||||
| 1×3=3 | 2×3=6 | 3×3=9 | ||||||
| 1×4=4 | 2×4=8 | 3×4=12 | 4×4=16 | |||||
| 1×5=5 | 2×5=10 | 3×5=15 | 4×5=20 | 5×5=25 | ||||
| 1×6=6 | 2×6=12 | 3×6=18 | 4×6=24 | 5×6=30 | 6×6=36 | |||
| 1×7=7 | 2×7=14 | 3×7=21 | 4×7=28 | 5×7=35 | 6×7=42 | 7×7=49 | ||
| 1×8=8 | 2×8=16 | 3×8=24 | 4×8=32 | 5×8=40 | 6×8=48 | 7×8=56 | 8×8=64 | |
| 1×9=9 | 2×9=18 | 3×9=27 | 4×9=36 | 5×9=45 | 6×9=54 | 7×9=63 | 8×9=72 | 9×9=81 |
通过观察可提取以下规律：
每一行的实际有效单元格数量和所在的行数一致。比如 第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语句，数组自带的函数式方法或工具方法也能熟练使用。
同时我们也吐嘈了当下各自为营的互联网大厂们，希望这股坏风气早日散去，让国内有限的互联网更加「互联」。
参考资料
JavaScript如何做九九乘法表？: https://zhidao.baidu.com/question/752349821342237212.html
– END –
原文始发于微信公众号（背井）：JavaScript一行代码生成九九乘法表
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/246845.html
