Javascript使数组中的新元素在arr.push之后出现在不同的索引中(而不是按预期在arr.length索引中出现)

Question

我有一个名为任务的数组。在那里我有很多任务存储在里面。示例：

[
  {
    "id": "2",
    "taskName": "dswrs",
    "startDate": "1969-12-31T23:00:00.000Z",
    "endDate": "1969-12-31T23:00:55.000Z",
    "duration": "1969-12-31T23:00:55.000Z",
    "categorie": "Processing"
  },
  {
    "id": "1",
    "taskName": "A",
    "startDate": "1969-12-31T23:00:30.000Z",
    "endDate": "1969-12-31T23:00:55.000Z",
    "duration": "1969-12-31T23:00:25.000Z",
    "categorie": "Processing"
  }
]

在这里你已经可以看到我的问题了。我在id:1 (使用tasks.push(...))之后添加了id:2的元素，所以我希望它是这样的：

    [
       {
        "id": "1",
        "taskName": "A",
        "startDate": "1969-12-31T23:00:30.000Z",
        "endDate": "1969-12-31T23:00:55.000Z",
        "duration": "1969-12-31T23:00:25.000Z",
        "categorie": "Processing"
      },
      {
        "id": "2",
        "taskName": "dswrs",
        "startDate": "1969-12-31T23:00:00.000Z",
        "endDate": "1969-12-31T23:00:55.000Z",
        "duration": "1969-12-31T23:00:55.000Z",
        "categorie": "Processing"
      }
    ]

这个问题只在新添加的元素比已经存在的元素具有lower startDate时才出现。问题必须出现在我的D3.js代码中，我用它在甘特图中显示数据。我希望它在gantt.redraw函数中，因为我在将新数据添加到任务数组后直接调用它，但我只是找不到问题。

 /* global d3 */
    
    d3.gantt = function () {

   var initTimeDomain = function (tasks) {
    console.log(tasks);
    if (timeDomainMode === FIT_TIME_DOMAIN_MODE) {
        if (tasks === undefined || tasks.length < 1) {
            timeDomainStart = new Date(0);
            timeDomainEnd = new Date(10 ** 5);
            return;
        }
        var tasksOrder = tasks;
        tasksOrder.sort(function (a, b) {
            return a.endDate - b.endDate;
        });
        timeDomainEnd = tasksOrder[tasksOrder.length - 1].endDate;
        tasksOrder.sort(function (a, b) {
            return a.startDate - b.startDate;
        });
        timeDomainStart = tasksOrder[0].startDate;
    }
};
    
        function gantt (tasks) {
            initTimeDomain();
            initAxis();
    
            var svg = d3.select('svg')
                .attr('class', 'chart')
                .attr('width', width + margin.left + margin.right)
                .attr('height', height + margin.top + margin.bottom)
                .append('g')
                .attr('class', 'gantt-chart')
                .attr('width', width + margin.left + margin.right)
                .attr('height', height + margin.top + margin.bottom)
                .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
    
            svg.selectAll('.chart')
                .data(tasks, keyFunction).enter()
                .append('rect')
                .attr('rx', 5)
                .attr('ry', 5)
                .attr('class', function (d) {
                    if (taskCategorie[d.categorie] == null) { return 'bar-killed'; }
                    return taskCategorie[d.categorie];
                })
                .attr('y', 0)
                .attr('transform', rectTransform)
                // ----.attr('height', function (d) { return y.rangeBand(); })
                .attr('height', function (d) { return y.bandwidth(); })
                .attr('width', function (d) {
                    return (x(d.endDate) - x(d.startDate));
                });
    
            svg.append('g')
                .attr('class', 'x axis')
                .attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
                .transition()
                .call(xAxis);
    
            svg.append('g').attr('class', 'y axis').transition().call(yAxis);
    
            return gantt;
        };
    
        gantt.redraw = function (tasks) {
            console.log("TASKS IN REDRAW: ")
            console.log(tasks);
            initTimeDomain(tasks);
            initAxis();
    
            var svg = d3.select('svg');
    
            var ganttChartGroup = svg.select('.gantt-chart');
            var rect = ganttChartGroup.selectAll('rect').data(tasks, keyFunction);
    
            var div = d3.select('body').append('div')
                .attr('class', 'tooltip-donut')
                .style('opacity', 0);
    
            rect.enter()
                .insert('rect', ':first-child')
                .on('mouseover', function (d, i) {
                    d3.select(this).transition()
                        .duration('50')
                        .attr('opacity', '.85');
                    // Makes the new div appear on hover:
                    div.transition()
                        .duration(50)
                        .style('opacity', 1);
                    div.html(['Taskname: ' + i.taskName, 'Start: ' + i.startDate.toLocaleTimeString(), 'Ende: ' + i.endDate.toLocaleTimeString()].join('<br/>'))
                        .style('left', (d.pageX + 10) + 'px')
                        .style('top', (d.pageY - 15) + 'px');
                })
                .on('mouseout', function (d, i) {
                    d3.select(this).transition()
                        .duration('50')
                        .attr('opacity', '1');
                    div.transition()
                        .duration('50')
                        .style('opacity', 0);
                })
                .attr('rx', 5)
                .attr('ry', 5)
                .attr('class', function (d) {
                    if (taskCategorie[d.categorie] == null) { return 'bar-killed'; }
                    return taskCategorie[d.categorie];
                })
                .transition()
                .attr('y', 0)
                .attr('transform', rectTransform)
                .attr('height', function (d) { return y.bandwidth(); })
                .attr('width', function (d) {
                    return (x(d.endDate) - x(d.startDate));
                });
    
            rect.transition()
                .attr('transform', rectTransform)
                .attr('height', function (d) { return y.bandwidth(); })
                .attr('width', function (d) {
                    return (x(d.endDate) - x(d.startDate));
                });
    
            rect.exit().remove();
    
            svg.select('.x').transition().call(xAxis);
            svg.select('.y').transition().call(yAxis);
    
            console.log("TASKS NACH REDRAW: ")
            console.log(tasks);
            return gantt;
        };
    
        gantt.margin = function (value) {
            if (!arguments.length)
                return margin;
            margin = value;
            return gantt;
        };
    
        gantt.timeDomain = function (value) {
            if (!arguments.length)
                return [timeDomainStart, timeDomainEnd];
            timeDomainStart = +value[0], timeDomainEnd = +value[1];
            return gantt;
        };
      
        return gantt;
    };

Answer 1

问题在initTimeDomain方法中。在这里，您将使用var tasksOrder = tasks;创建对任务数组的新引用，然后按日期对tasksOrder进行排序。问题在于Javascript对象和数组是引用，这意味着tasksOrder和tasks指向同一个数组。简单地说，修改一个也会改变另一个。

如果您不想这样做，您需要创建一个真正的副本，如下所示：

var tasksOrder = tasks.slice();