D3.js加载CSV后仅打印排序数据，原始数据未显示问题求助

我有一个名为text.csv的CSV文件，内容如下：

shape,color,distance
circle,blue,4
square,red,2
circle,blue,7
circle,green,9
triangle,blue,1
square,green,3
octagon,blue,4

希望完成以下操作：

• 加载该数据
• 在控制台打印加载的原始数据
• 按distance字段对加载的数据进行排序
• 在控制台打印排序后的数据

编写的D3.js v7代码如下：

<script src="https://d3js.org/d3.v7.min.js"></script>

d3.csv('test.csv', d3.autoType).then(function(data) {
    // INSPECTS THE RAW DATA
    console.log(data);

    // SORTS BY DISTANCE
    let sortedData = data.sort(function (a, b) {
        return d3.descending(a.distance, b.distance);
    })
    // LOGS SORTED DATA
    console.log(sortedData);
})

但控制台中只看到sortedData被打印两次，原始数据data并未打印，请问原因是什么？

核心原因 #

JavaScript的数组sort()方法是原地修改的——它会直接改变原数组的顺序，而不是返回一个新数组。你这里的sortedData只是原数组data的引用，二者指向同一个内存地址的数组。

另外，浏览器控制台打印数组/对象时，默认显示的是该对象的当前状态，而非调用console.log()时的快照。当你先打印data，随后排序修改了原数组，等你在控制台展开这个data的打印结果时，它已经是排序后的状态了，看起来就像原始数据没打印，反而打印了两次排序后的数组。

解决方法 #

要保留原始数据，需要先创建原数组的副本，再对副本进行排序。可以用扩展运算符[...data]或slice()方法创建浅拷贝（对于这种简单数据结构足够用）：

修正后的代码：

<script src="https://d3js.org/d3.v7.min.js"></script>

d3.csv('test.csv', d3.autoType).then(function(data) {
    // 打印原始数据
    console.log('原始数据:', data);

    // 创建数组副本后再排序，不修改原数组
    let sortedData = [...data].sort(function (a, b) {
        return d3.descending(a.distance, b.distance);
    })
    // 打印排序后的数据
    console.log('排序后数据:', sortedData);
})

这样原数组data不会被修改，控制台打印的原始数据就是加载时的状态，排序后的数组是独立的副本，二者区分明显。

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