JS数组对象排序前后展示异常：为何数据重复显示3次？

我拥有一个数组对象，想要在排序前后分别将其展示出来。我的代码如下：

JavaScript代码：

const obj = [
    { name: "ahmad", family: "mahdavi", city: "esf", score: 10 },
    { name: "ali", family: "Ahmadi", city: "ahv", score: 5 },
    { name: "reza", family: "rezaei", city: "tehran", score: 3 },
    { name: "mohammad", family: "kiani", city: "shiraz", score: 19 }
];
let txt = "";
document.getElementById("p1").innerHTML = dis();

obj.sort(
    function (a, b) {
        return a.score - b.score;
    }
)

document.getElementById("p2").innerHTML = dis();


function dis() {
    obj.forEach(element => {
        txt += element.name + " " + element.family + " " + element.city + " " + element.score + "<br>";
    })
    return txt;
}

HTML代码：

<p id="p1"></p>

<p id="p2"></p>

但本该显示2次的数据却显示了3次，请问这是什么原因？

原因分析 #

问题出在全局变量txt的累加逻辑上：

• 第一次调用dis()时，txt从空字符串开始，遍历数组后追加4条数据内容，p1显示这4条。
• 第二次调用dis()时，没有重置txt，而是在已有4条内容的基础上，再次遍历数组追加4条新内容，此时txt变成8条内容，p2显示这8条。
• 页面上总共显示4+8=12条数据，正好是原始4条数据的3倍，所以看起来像是显示了3次。

解决方法 #

把txt的声明移到dis()函数内部，每次调用函数时重新初始化空字符串，确保每次生成的都是当前数组的独立内容，不会累加：

const obj = [
    { name: "ahmad", family: "mahdavi", city: "esf", score: 10 },
    { name: "ali", family: "Ahmadi", city: "ahv", score: 5 },
    { name: "reza", family: "rezaei", city: "tehran", score: 3 },
    { name: "mohammad", family: "kiani", city: "shiraz", score: 19 }
];

document.getElementById("p1").innerHTML = dis();

obj.sort(function (a, b) {
    return a.score - b.score;
})

document.getElementById("p2").innerHTML = dis();


function dis() {
    // 每次调用函数都初始化新的空字符串
    let txt = "";
    obj.forEach(element => {
        txt += element.name + " " + element.family + " " + element.city + " " + element.score + "<br>";
    })
    return txt;
}

也可以用map方法简化dis()函数，代码更简洁：

function dis() {
    return obj.map(element => `${element.name} ${element.family} ${element.city} ${element.score}`).join('<br>');
}

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