数组只有4个元素，但即使在删除空元素

Question

我有一个包含4个元素的数组，在一个场景中我想从数组中弹出一个元素。但是在pop数组给出与之前相同的结果之后。 我已经检查了控制台窗口，在那里我发现了一个不同的行为，如数组长度为4，它显示它有5个元素。

我也试图删除空元素，但仍然会出现同样的问题。

var brudcrumbDataArray=JSON.parse(brudcrumbDataString);

            brudcrumbDataArray = brudcrumbDataArray.filter(function(n){ return n != undefined }); 
            console.log(brudcrumbDataArray)
            brudcrumbDataArray.pop();
            console.log(brudcrumbDataArray)

她是阵列：

[{"name":"Dashboard","url":"","path":"","class":"icon-home2 position-left","type":"MainMenu","queryParams":""},{"name":"Main","url":"#/dashboard","path":"/dashboard","class":"","type":"SubMenu","queryParams":""},{"name":"Sub Accounts","url":"#/account/customers","path":"/account/customers","class":"","type":"SubMenu","queryParams":""},{"name":"End Users","url":"#/account/endusers","path":"/account/endusers","class":"","type":"SubMenu","queryParams":""},{"name":"Profile","url":"#/user-dashboard","path":"/user-dashboard","class":"","type":"SubMenu","queryParams":""}]

pop后，数组给出相同的数据和相同的长度。有人可以帮我解决这个问题吗？

摘录，检查您的控制台以查看问题：

var brudcrumbDataString =`[{"name":"Dashboard","url":"","path":"","class":"icon-home2 position-left","type":"MainMenu","queryParams":""},{"name":"Main","url":"#/dashboard","path":"/dashboard","class":"","type":"SubMenu","queryParams":""},{"name":"Sub Accounts","url":"#/account/customers","path":"/account/customers","class":"","type":"SubMenu","queryParams":""},{"name":"End Users","url":"#/account/endusers","path":"/account/endusers","class":"","type":"SubMenu","queryParams":""},{"name":"Profile","url":"#/user-dashboard","path":"/user-dashboard","class":"","type":"SubMenu","queryParams":""}]`;

var brudcrumbDataArray=JSON.parse(brudcrumbDataString);

brudcrumbDataArray = brudcrumbDataArray.filter(function(n){ return n != undefined }); 
console.log(brudcrumbDataArray)
brudcrumbDataArray.pop();
console.log(brudcrumbDataArray)

Answer 1

控制台上的结果似乎是正确的。操作后，控制台窗口上的两个日志都显示结果。 为什么第一个日志显示结果呢？因为在javascript中，复杂对象通过引用存储，这就是为什么第一个日志也会在其中显示结果。

以参考方式存储？这是什么意思？ ：https://docstore.mik.ua/orelly/webprog/jscript/ch04_04.htm

尝试下面一个，

var brudcrumbDataString =`[{"name":"Dashboard","url":"","path":"","class":"icon-home2 position-left","type":"MainMenu","queryParams":""},{"name":"Main","url":"#/dashboard","path":"/dashboard","class":"","type":"SubMenu","queryParams":""},{"name":"Sub Accounts","url":"#/account/customers","path":"/account/customers","class":"","type":"SubMenu","queryParams":""},{"name":"End Users","url":"#/account/endusers","path":"/account/endusers","class":"","type":"SubMenu","queryParams":""},{"name":"Profile","url":"#/user-dashboard","path":"/user-dashboard","class":"","type":"SubMenu","queryParams":""}]`;

var brudcrumbDataArray=JSON.parse(brudcrumbDataString);

brudcrumbDataArray = brudcrumbDataArray.filter(function(n){ return n != undefined }); 
console.log(JSON.parse(JSON.stringify(brudcrumbDataArray)))
brudcrumbDataArray.pop();
console.log(JSON.parse(JSON.stringify(brudcrumbDataArray)))

仔细观察，我们正在使用JSON操作进行深度数据复制，通过JSON.parse(JSON.stringify( ))中的周围对象进行深度数据复制，现在不再指向引用。

日志将更加清晰，如下所示，

Answer 2

它显示因为对同一object的引用所以当你pop最后一个元素时，对象被修改并显示长度为4，因此第一个安慰对象也会更新。

var brudcrumbDataArray = [{"name":"Dashboard","url":"","path":"","class":"icon-home2 position-left","type":"MainMenu","queryParams":""},{"name":"Main","url":"#/dashboard","path":"/dashboard","class":"","type":"SubMenu","queryParams":""},{"name":"Sub Accounts","url":"#/account/customers","path":"/account/customers","class":"","type":"SubMenu","queryParams":""},{"name":"End Users","url":"#/account/endusers","path":"/account/endusers","class":"","type":"SubMenu","queryParams":""},{"name":"Profile","url":"#/user-dashboard","path":"/user-dashboard","class":"","type":"SubMenu","queryParams":""}]


//var brudcrumbDataArray=JSON.parse(brudcrumbDataString);

            var newBrudcrumbDataArray = brudcrumbDataArray.filter(function(n){ return n != undefined }); 
            console.log(brudcrumbDataArray)
            newBrudcrumbDataArray.pop();
            console.log(newBrudcrumbDataArray)