JavaScript数组首尾添加元素函数测试失败问题排查

问题描述 #

我需要实现向数组末尾和开头添加元素的JavaScript函数，编写了addItemToArray和addItemToFront函数，分别使用push和unshift方法实现，但在Next Tech测试环境中这两个函数测试失败。测试提示addItemToArray返回数组长度（如5）而非预期的新数组，虽浏览器控制台显示看似正常，但无法通过测试。

原代码 #

// This is your starting array.
const arr = [10, 10, 16, 12];

function returnFirst(arr) {
  // Return the first item from the array.
  return arr[0];
  
  console.log(arr[0]);
}

function returnLast(arr) {
  // Return the last item of the array.
  return arr[arr.length - 1];
  
  console.log(arr[arr.length - 1]);
}

function getArrayLength(arr) {
  // Return the length of the array.
  return arr.length
  
  console.log(arr.length);
}

function incrementByOne(arr) {
  // `arr` is an array of integers (numbers). Increment all items in the array by
  // Return the array.
  return arr.map(value => value + 1);
  
  console.log(arr);
}

function addItemToArray(arr, item) {
  // Add the parameter `item` to the end of the array `arr`.
  // Return the array // This is my issue 1.
  return arr.push(10);
  
  console.log(arr);
}

function addItemToFront(arr, item) {
  // Add the parameter `item` to the front of the array `arr`.
  // Return the array.
  // Hint: use the array method `.unshift` // This my issue 2.
  return arr.unshift(10);
  
  console.log(arr);
}

// Uncomment these lines to check results in browser console.
console.log("returnFirst result:" + returnFirst(arr))
console.log("returnLast result:" + returnLast(arr))
console.log("getArrayLength result:" + getArrayLength(arr))
console.log("incrementByOne result:" + incrementByOne(arr))
console.log("addItemToArray result:" + addItemToArray(arr, 10))
console.log("addItemToFront result:" + addItemToFront(arr, 10))

//////////////////////////
// Don’t change this line.
if (typeof module !== 'undefined') {
  module.exports = {
    returnFirst,
    returnLast,  
    getArrayLength,
    incrementByOne,
    addItemToArray,
    addItemToFront,
  };
}

测试错误信息 #

addItemToArray(arr, item) › should return the array with the item added to the end

expect(received).toEqual(expected) // deep equality

Expected: [10, 10, 16, 12, 10]
Received: 5

  41 |   describe('addItemToArray(arr, item)', function() {
  42 |     it('should return the array with the item added to the end', function() {
> 43 |       expect(addItemToArray([10, 10, 16, 12], 10)).toEqual([10, 10, 16, 12, 10]);
     |                                                    ^
  44 |   
  45 |       expect(addItemToArray([], true)).toEqual([true]);
  46 |     });

  at Object.<anonymous> (nt-test.js:43:52)

错误原因 #

1. push/unshift的返回值特性：JavaScript中Array.push()和Array.unshift()方法的返回值是修改后数组的长度，而不是修改后的数组本身。直接返回这两个方法的调用结果，自然会返回数字而非数组，不符合测试预期。
2. 硬编码添加值：函数里直接写了arr.push(10)和arr.unshift(10)，没有使用传入的item参数，这会导致无论传什么参数，都只会添加10，不符合函数的设计要求。

修复方案 #

修改两个函数，先执行添加操作，再返回原数组；或者使用展开运算符创建新数组（不修改原数组，视需求选择）。以下是两种修复方式：

方式1：修改原数组后返回（保持原逻辑） #

function addItemToArray(arr, item) {
  // 先执行添加操作，使用传入的item参数
  arr.push(item);
  // 返回修改后的数组
  return arr;
}

function addItemToFront(arr, item) {
  // 先执行添加操作，使用传入的item参数
  arr.unshift(item);
  // 返回修改后的数组
  return arr;
}

方式2：创建新数组（不修改原数组，更符合纯函数规范） #

如果不想修改传入的原数组，可以用展开运算符生成新数组：

function addItemToArray(arr, item) {
  // 返回包含原数组所有元素 + 新元素的新数组
  return [...arr, item];
}

function addItemToFront(arr, item) {
  // 返回包含新元素 + 原数组所有元素的新数组
  return [item, ...arr];
}

验证说明 #

修复后，函数会返回添加元素后的数组，符合测试用例的预期结果，能够通过Next Tech的测试。

内容的提问来源于stack exchange，提问作者Dan