javascript - 数组只有 4 个元素，但即使删除空元素后，它也显示为有 5 个元素

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":""}]

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

代码片段，检查您的控制台以查看问题:

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( )) 中，现在它不再指向引用。

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