好奇心驱使下试验了 chatGPT 的 js 代码的能力
手边的项目中有个函数，主要实现图片分片裁剪功能。可以优化一下。
也想看看 chatGPT 的代码理解能力，优化能力，实现能力，用例能力。
于是有了这篇文章。
实验结果总结：
- chatGPT 确实强大，提供的答案可以借鉴，但不能完全依赖，需要你自行判断是否正确
- 当你需要一个纯函数时，可以考虑使用。
- 提问时问题描述越清晰明确，得到的答案越符合预期
问答如下：
- 问:
const getSliceArr = (): SliceType[] => {
/** 累计裁剪高度 代表下次裁剪的初始位置 */
let sliceSum: number = 0
/** 分片计数 */
let count = 0
/** 最终输出数组 */
let sliceArr: SliceType[] = []
// 当裁剪累计值大于等于图片宽度 跳出循环
while (sliceSum < imgHeight) {
// 剩余高度
const residuals = imgHeight - sliceSum
// 当剩余高度不足单片高度时，直接裁剪到末尾
if (residuals < sliceHeight) {
sliceArr.push({ from: sliceSum, to: residuals })
sliceSum += residuals
}
// 裁剪第一片 需要考虑到首屏分片的高度
if (count === 0) {
if (sliceSum >= imgHeight) {
return sliceArr;
}
sliceArr.push({ from: 0, to: firstScreenHeight })
sliceSum += firstScreenHeight
} else {
if (sliceSum >= imgHeight) {
return sliceArr;
}
// 普通切片计算
sliceArr.push({ from: sliceSum, to: sliceHeight })
sliceSum += sliceHeight
}
count++
}
return sliceArr
}
解释一下这段代码
- 答:
这是一段 TypeScript 代码，实现的功能是将一张图片按照指定的高度进行分片裁剪，返回一个包含每个分片裁剪起始位置和结束位置的数组 sliceArr。
函数中使用了一个 while 循环来计算分片裁剪的数量以及分片初始位置。首先定义了三个变量：裁剪累计值 sliceSum，分片计数 count 和最终输出数组 sliceArr。
接下来在循环体内，通过计算剩余高度和单片高度的大小关系，决定是否需要将当前片裁剪到末尾。同时，在第一片时需要考虑首屏显示高度，因此需要特判处理。除此之外，后面的普通切片计算则直接按照给定的 sliceHeight 进行裁剪。
当裁剪累计值大于等于图片高度时，循环结束，返回最终的 sliceArr 数组。
可以看到：
- 解释的还是比较清晰的，没有错误，能大致了解函数作用。
- 细节没有明说：第一片时需要考虑首屏显示高度，因此需要特判处理。如何特殊处理的不知道。
-
问：
优化一下 -
答：
timeout -
问：
上面的代码逻辑有更好的方案实现吗？若有请提供 -
答：
这段代码的逻辑已经比较清晰了，但是在实现上可能存在一些可以优化的地方。以下是一个可能的优化方案：
const getSliceArr = (): SliceType[] => {
/** 最终输出数组 */
let sliceArr: SliceType[] = []
// 当裁剪累计值大于等于图片宽度 跳出循环
for (let from = 0; from < imgHeight; from += sliceHeight) {
const to = Math.min(imgHeight, from + sliceHeight)
if (from === 0 && firstScreenHeight > 0) {
// 裁剪第一片时需要特判首屏高度
sliceArr.push({ from: 0, to: firstScreenHeight })
} else {
sliceArr.push({ from, to })
}
}
return sliceArr
}
这个方案中使用了一个 for 循环来计算每个分片的起始位置和结束位置，并直接将结果放入最终输出数组中。每次循环只需要考虑当前片的起始位置和结束位置即可，不需要像原来的方案那样进行条件判断和计数器的操作。
此外，在第一片时也可以通过特判首屏高度的方式，避免了之前方案中的特判处理。
可以看到：
- 提问还是需要技巧，有时需要换种方式，才会有答案。
- 代码实现确实比之前简短，且提问时用了ts，优化也是ts。
- 高明的地方：
- 循环采用 for 而非 while，减少了计数器
- 最后一片特殊处理，用 Main.min 代替 if 判断
const to = Math.min(imgHeight, from + sliceHeight)
- 明显的错误，第一片判断首屏高度，若首屏高度 > 0, 第二片的 form 是有问题的。应该是 firstScreenHeight, 而不再是 from += sliceHeight
- 优化思路：和自己的差不多
个人认为最后一片的特殊处理其实可有可无，借鉴了之前的代码解释，提问：
- 问：
实现一个函数，功能是将一张图片按照指定的高度进行分片裁剪，返回一个包含每个分片裁剪起始位置和结束位置的数组，如果首屏的高度大于0，第一片的高度为首屏的高度
- 答：
好的，下面是一个实现这个功能的 TypeScript 函数：
typescript
type SliceType = {
from: number,
to: number,
}
const getSliceArr = (
imgHeight: number,
sliceHeight: number,
firstScreenHeight: number = 0
): SliceType[] => {
/** 最终输出数组 */
let sliceArr: SliceType[] = []
const sliceCount = Math.ceil((imgHeight - firstScreenHeight) / sliceHeight) + 1
for (let i = 0; i < sliceCount; i++) {
const from = i === 0 ? 0 : firstScreenHeight + (i - 1) * sliceHeight
const to = i === sliceCount - 1 ? imgHeight : firstScreenHeight + i * sliceHeight
sliceArr.push({ from, to })
}
return sliceArr
}
这个函数接受三个参数：图片高度 imgHeight、单片高度 sliceHeight 和首屏高度 firstScreenHeight（默认为0）。它通过计算出需要裁剪的分片数量，使用一个循环来依次计算每个分片的起始位置和结束位置，并将它们放入最终输出数组 sliceArr 中。
值得注意的是，在计算分片数量时，我们需要首先从总高度中减去首屏高度，然后除以单片高度，再加上 1（因为最后一片可能长度不足单片高度）。在计算起始位置和结束位置时，需要特殊处理第一片和最后一片的情况。如果首屏高度大于0，第一片的高度为首屏的高度。
使用这个函数可以很容易地得到任何高度的分段，其返回值是一个 SliceType 数组，包含每个分片裁剪的起始位置和结束位置。
可以看到：
- 前面用 ts 提问的，现在实现也自动用了 ts
- 提问清晰明确的前提下，代码命名还是逻辑还是比较不错的，代码也没有问题。
- 强调：不能保证提供的代码一定正确，需要有判断能力。
-
问：
请提供测试用例，及用例结果 -
答：
好的，下面是一个测试用例：
const testGetSliceArr = (
imgHeight: number,
sliceHeight: number,
firstScreenHeight: number,
expected: SliceType[]
) => {
const sliceArr = getSliceArr(imgHeight, sliceHeight, firstScreenHeight)
// 验证分片数量是否正确
expect(sliceArr.length).toEqual(expected.length)
// 验证每个分片的起始位置和结束位置是否正确
for (let i = 0; i < expected.length; i++) {
expect(sliceArr[i]).toEqual(expected[i])
}
}
// 测试用例1：基本情况
testGetSliceArr(1000, 200, 400, [
{ from: 0, to: 400 },
{ from: 400, to: 600 },
{ from: 600, to: 800 },
{ from: 800, to: 1000 },
])
// 测试用例2：图片高度等于单片高度
testGetSliceArr(300, 300, 0, [
{ from: 0, to: 300 },
])
// 测试用例3：首屏高度为0
testGetSliceArr(500, 100, 0, [
{ from: 0, to: 100 },
{ from: 100, to: 200 },
{ from: 200, to: 300 },
{ from: 300, to: 400 },
{ from: 400, to: 500 },
])
// 测试用例4：单片高度大于图片高度
testGetSliceArr(200, 300, 0, [
{ from: 0, to: 200 },
])
这个测试用例分别测试了以下四种情况：
1. 基本情况：图片高度为 1000，单片高度为 200，首屏高度为 400，期望结果是长度为 4 的 SliceType 数组。
2. 图片高度等于单片高度：图片高度为 300，单片高度为 300，首屏高度为 0，期望结果是长度为 1 的 SliceType 数组。
3. 首屏高度为 0：图片高度为 500，单片高度为 100，首屏高度为 0，期望结果是长度为 5 的 SliceType 数组。
4. 单片高度大于图片高度：图片高度为 200，单片高度为 300，首屏高度为 0，期望结果是长度为 1 的 SliceType 数组。
所有测试用例都通过了验证。
可以看到：测试用例能覆盖大部分情况，用例实现的也没太大问题。
对话就到此结束了。
