ChatGPT 近期炙手可热，仿佛没有什么问题是它不能解决的。出于对 ChatGPT 的好奇，我们决定探索下它对于前端开发人员来讲，是作为辅助工具多一些，还是主力工具更多一些？

2D 能力测试

我们就挑选一个著名的递归回溯问题——“八皇后”，看看 ChatGPT 的表现如何。

什么是“八皇后”

首先，我们先让它完整介绍下“八皇后“问题。让我们拭目以待 ChatGPT 会给出什么样的答案，沟通如下图所示：

只是要求介绍一下“八皇后”问题，它竟然连解题思路也如此清晰地一并给出。

编程能力

既然如此，那就来考考编程能力。

先要求它使用 Ja vaScript 求解“八皇后”问题的所有解。为了方便查看最终效果，又要求它使用 Canvas 将结果绘制出来。具体问答如图所示：

目不转睛地注视着屏幕中的 ChatGPT ，它一行一行噼里啪啦地给出答案，且代码编写地如此整洁，不禁由衷赞叹。虽然还不确定这些代码能否真的运行起来，得到我们想要的效果，但是从生成代码的结构和逻辑性来看，已经足够令人震撼。

接下来，我们来验证一下代码是否真的可以顺利运行。复制粘贴 ChatGPT 给出的答案，在未更改一行代码的情况下，页面的确运行了。一起看看运行效果：

看着实现出来的效果，我的内心开始忐忑不安。脑海里疯狂计算着这样一个问题：我需要花费多长时间才能解决以上问题？反正肯定无法像 ChatGPT 这样，不到 30S 就给出结果。

输出所有解

再回过头来看答案，却发现只打印出一个结果，所以它能否将所有的结果都打印出来呢？我们接着提出需求，答案如图所示：

Unbelievable，竟然真的可以，立即复制粘贴操作，检验运行效果：

仔细数了下，发现只输出了 16 个解，但是开头提到总共是有 92 个解。通过仔细查阅代码，发现一个小格子被定义为 40 个像素，而整个 Canvas 的大小是 1280 像素，所以这个 Canvas 最多只能画 16 个棋盘。

在此输出中，棋盘和棋盘之间没有点间隔，很难辨别棋盘边界，观看起来有些费力。问题相对简单，只需调整几个参数即可解决，我们选择手动调整，调整后的 drawChessboards 方法。如下所示：

function drawChessboards(solutions) { 
    const canvas = document.getElementById('chessboard'); 
    const ctx = canvas.getContext('2d'); 
    const n = solutions[0].length; 
    const solutionsPerRow = Math.ceil(Math.sqrt(solutions.length)); 
    const sizeWithGap = canvas.width / solutionsPerRow / n; 
    const size = sizeWithGap * 0.95; 
    for (let k = 0; k < solutions.length; k++) { 
        const offsetX = ((k % solutionsPerRow) * n + 0.2) * sizeWithGap; 
        const offsetY = (Math.floor(k / solutionsPerRow) * n + 0.2) * sizeWithGap; 
        for (let row = 0; row < n; row++) { 
            for (let col = 0; col < n; col++) { 
                if ((row + col) % 2 === 0) { 
                    ctx.fillStyle = '#FFFFFF'; 
                } else { 
                    ctx.fillStyle = '#000000'; 
                } 
                ctx.fillRect(col * size + offsetX, row * size + offsetY, size, size); 
                if (solutions[k][row][col] === 'Q') { 
                    ctx.beginPath(); 
                    ctx.arc(col * size + size / 2 + offsetX, row * size + size / 2 + offsetY, size / 4, 0, 2 * Math.PI); 
                    ctx.fillStyle = '#FF0000'; 
                    ctx.fill(); 
                } 
            } 
        } 
    } 
}

接下来再瞧瞧最终的运行效果：

这回看着舒服了很多~