网络技术问题 | JavaScript 课程测验 1 | 问题 6

问题描述

在一个网页中，存在多个按钮元素，每个按钮上都有一个数字，点击某个按钮会将其上方、下方和右侧的按钮数字全部加上 1，左侧不计算。现在要实现一个 JavaScript 函数 clickBtn(n, arr)，其中 n 表示点击的按钮的下标，arr 表示按钮数字的数组，函数需返回点击之后的数组。

解题思路

首先需要取出被点击的按钮上方、下方和右侧的按钮的下标，在原数组中将对应的数字加 1。我们可以根据数组下标来获取对应按钮的位置，方法如下：

计算上方按钮下标

若当前被点击的按钮为第 i 个按钮，则其上方的按钮为第 i-3 个按钮（注意需要考虑边角情况）。

const topIndex = i - 3 > 0 ? i - 3 : -1;

计算下方按钮下标

若当前被点击的按钮为第 i 个按钮，则其下方的按钮为第 i+3 个按钮（注意需要考虑边角情况）。

const bottomIndex = i + 3 < arr.length ? i + 3 : -1;

计算右侧按钮下标

若当前被点击的按钮为第 i 个按钮，则其右侧的按钮为第 i+1 个按钮（注意需要考虑边角情况）。

const rightIndex = (i + 1) % 3 !== 1 ? i + 1 : -1;

在获取到上方、下方和右侧按钮的下标之后，我们便可以对其对应的数字进行加 1 操作。最后，将操作后的数组返回即可。

代码实现

function clickBtn(n, arr) {
    const topIndex = n - 3 > 0 ? n - 3 : -1;
    const bottomIndex = n + 3 < arr.length ? n + 3 : -1;
    const rightIndex = (n + 1) % 3 !== 1 ? n + 1 : -1;
    
    if (topIndex !== -1) {
        arr[topIndex] += 1;
    }
    if (bottomIndex !== -1) {
        arr[bottomIndex] += 1;
    }
    if (rightIndex !== -1) {
        arr[rightIndex] += 1;
    }
    
    return arr;
}

总结

本题主要考察了对数组下标的计算和对数组元素的操作。在解题过程中，需要注意边角情况的处理，避免数组下标越界的问题。