动态树木列表元素转小写功能实现遇阻，求解决方案

问题现状 #

当前代码已实现树木列表的首尾添加功能，但点击转小写按钮时，会在列表末尾重复新增小写元素，原大写元素未被移除；重复点击按钮会持续追加内容。尝试使用map方法时，仅生成新变量但未更新原数组，页面无变化。

问题原因 #

1. forEach+push的错误用法：只是将每个元素的小写版本追加到数组末尾，完全未修改或移除原大写元素，导致原元素保留、新元素不断累加。
2. map方法的特性误解：map会返回一个全新数组，不会修改原数组；若仅创建新变量却不将新数组赋值给原trees，原数组不会产生任何变化。

解决方案 #

方案1：直接修改原数组元素（保留const声明） #

原trees用const声明，无法直接替换整个数组，但可以通过索引遍历修改内部元素：

const trees = ['Oak', 'Pine', 'Aspen', 'Bald Cypress']

const listTrees = () => {
    let treeList = ''
    trees.forEach(tree => {
        treeList += `${tree} <br>`
    })
    displayResults.innerHTML = `${treeList} <span>${trees.length} elements 
    long</span>`
}

listTrees()

/* ------添加Redwood至末尾------------*/
document.querySelector('#add_redwood').onclick = () => {
    trees.push('Redwood')
    listTrees()
}

/* --------------------添加Pear至开头----------------------*/
document.querySelector('#add_pear').onclick = () => {
    trees.unshift('Pear')
    listTrees()
}

document.querySelector('#lowerTrees').onclick = () => {
    // 遍历索引，逐个替换为小写
    for (let i = 0; i < trees.length; i++) {
        trees[i] = trees[i].toLowerCase()
    }
    listTrees()
}

方案2：改为let声明，用map生成新数组替换 #

将trees的声明改为let，允许重新赋值，利用map简洁生成全小写数组：

// 改为let，允许重新赋值数组
let trees = ['Oak', 'Pine', 'Aspen', 'Bald Cypress']

const listTrees = () => {
    let treeList = ''
    trees.forEach(tree => {
        treeList += `${tree} <br>`
    })
    displayResults.innerHTML = `${treeList} <span>${trees.length} elements 
    long</span>`
}

listTrees()

/* ------添加Redwood至末尾------------*/
document.querySelector('#add_redwood').onclick = () => {
    trees.push('Redwood')
    listTrees()
}

/* --------------------添加Pear至开头----------------------*/
document.querySelector('#add_pear').onclick = () => {
    trees.unshift('Pear')
    listTrees()
}

document.querySelector('#lowerTrees').onclick = () => {
    // map生成全小写新数组，替换原trees
    trees = trees.map(tree => tree.toLowerCase())
    listTrees()
}

说明 #

• 方案1适合需要保留const声明的场景，直接修改数组内部元素，维持原数组引用。
• 方案2代码更简洁易读，利用map的特性完成转换，但需将const改为let以支持数组重新赋值。

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