Javascript 向数组添加更多项后将小写字母更改为数组？

Question

I try to make all the trees after sorting to lowercase but For some reason, I cannot make the lower case to the listTree() work! I know that to lowercase() need to be pasted in a function in order for it to work with the array. But I am not sure how to add to the listTrees() function. Do we need to use if-else statement?

const trees = ['oak', 'Pine', 'aspen', 'Bald Cypress']

const errorElement = document.querySelector('#error')
const displayResults = document.querySelector('#displayResults')



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

}

listTrees()


document.querySelector('#lowerTrees').onclick = () => {
    if (trees.length > 0) {
        trees.lowercase()
        listTrees()
    }
    else {
        errorElement.textContent = 'Dude, I cannot remove the last tree cause there are NO TREES!'
    }
    
}

Answer 1

toLowerCase() 仅与字符串一起使用，这里您将 toLowerCase() 与数组一起使用。如果您希望所有数组项都为小写，则需要像这样转换每个数组项：

document.querySelector('#lowerTrees').onclick = () => {
if (trees.length > 0) {
    trees.map((el, i) => {
       trees[i] = el.toLowerCase()
    });
    listTrees()
}
else {
    errorElement.textContent = 'Dude, I cannot remove the last tree cause there are NO TREES!'
}}

Answer 2

为了使整个数组成为小写字母，您必须使用 array.map() 遍历树并在每个字符串上调用 toLowerCase()：

const trees = ['oak', 'Pine', 'aspen', 'Bald Cypress']
const lowerCaseTrees = trees.map(tree => tree.toLowerCase())

通过稍微更改 listTrees() 将其引入您的代码，您希望将树作为参数传递给它以使其动态化：

var trees = ['oak', 'Pine', 'aspen', 'Bald Cypress']

const errorElement = document.querySelector('#error')
const displayResults = document.querySelector('#displayResults')

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

}

// show the trees as they are
listTrees()


document.querySelector('#sortTrees').onclick = () => {
    if (trees.length > 0) {
        trees.sort()
        listTrees()
    }
    else {
        errorElement.textContent = 'No Tree'
    }
    
}

document.querySelector('#lowerTrees').onclick = () => {
    if (trees.length > 0) {
        trees = trees.map(tree => tree.toLowerCase())
        listTrees()
    }
    else {
        errorElement.textContent = 'Dude, I cannot remove the last tree cause there are NO TREES!'
    }
    
}

<article>
    <button id="sortTrees">Sort the trees A>Z</button>
    <button id="lowerTrees">Make all tress lower case</button>
</article>
<aside>
    <div id="displayResults"> </div>
    <div id="error"></div>
</aside>

这里有一个方便的单行代码（对小于 1000 个元素的小数组很有用），可以使整棵树达到 lowerCase()。只要您的树名称中没有“##”，此方法就有效。

var trees = ['oak', 'Pine', 'aspen', 'Bald Cypress']
var lowerCaseTrees = trees.join('##').toLowerCase().split('##')
console.log(lowerCaseTrees )

Javascript 向数组添加更多项后将小写字母更改为数组？

Javascript Changing Lower case to an array after adding more item to the array?

javascript

arrays

arraylist