如何在Javascript中移除未定义的元素并创建一个新数组？

Question

我有以下数组：

var imagesList = [undefined x 1, cars.jpg, undefined x 1, boats.jpg];

如何过滤掉未定义的内容？这样我就可以得到以下结果：

var imagesShow = [cars.jpg, boats.jpg];

我没有找到有关使用JavaScript消除数组中未定义元素的详细文档。

- ticktock

---

什么意思是 undefined x 1？ - Nina Scholz

稀疏数组的console.log。 - Ori Drori

当您在JavaScript数组中使用“delete”方法时，您会得到未定义的x1。 - ticktock

Answer 1

你可以使用 Array#filter，并将 Boolean 作为回调函数，以获取真值。

var imagesList = [undefined, 'cars.jpg', undefined, 'boats.jpg'],
    imagesShow = imagesList.filter(Boolean);
    
console.log(imagesShow);

- Nina Scholz

Answer 2

使用Array#filter：

var imagesList = [undefined, 'cars.jpg', undefined, 'boats.jpg'];

var result = imagesList.filter(function(v) {
  return v !== undefined;
})

console.log(result);

- Ori Drori

Answer 3

尝试使用Array.filter函数

var imagesShow = imagesList.filter(function (value) {
    return value != undefined;
};

回调函数中未通过检查的任何数组元素都将被过滤掉 - 在这种情况下，如果元素未定义。

- Dennis

Answer 4

使用Array.filter()方法

 var imagesList = [undefined, 'cars.jpg', undefined, 'boats.jpg'];
    var result = imagesList.filter(function( element ) {
       return element !== undefined;
    });
console.log(result);

- Sajeetharan

Answer 5

尝试使用Array.filter()方法与ES6箭头函数表达式。

var imagesList = [undefined, "cars.jpg", undefined, "boats.jpg"];

var filteredList = imagesList.filter(item => { return item !== undefined });

console.log(filteredList);

- Rohìt Jíndal

Answer 6

通过显示undefined x 2，您的数组清楚地表明它是一个稀疏数组，这意味着您没有任何未定义的项。您只是没有键来存储项目。

好吧，您可能有并希望保留适当的void 0或undefined项（在这种情况下，所有上述解决方案都将失败），或者数字值0或null对象项（在这种情况下，接受的答案将失败）。

为了将稀疏数组转换为密集形式，最有效的方法是使用for in循环（或Object.keys()）。

因此，对于稀疏数组循环，最好使用

var res = [],
    a   = [];
a[1] = "cars.jpg";
a[5] = null;
a[999999] = "beauty.jpg";

// [undefined × 1, "cars.jpg", undefined × 3, null, undefined × 999993, "beauty.jpg"]

function dense(a){
  var r = [];
  for (i in a) r.push(a[i]);
  return r;
}

console.time("test");
res = dense(a);
console.timeEnd("test");
console.log(res);

现在让我们将上面的代码与一种优雅的过滤解决方案进行比较;

var res = [],
    a   = [];
a[1] = "cars.jpg";
a[5] = null;
a[999999] = "beauty.jpg";

// [undefined × 1, "cars.jpg", undefined × 3, null, undefined × 999993, "beauty.jpg"]

console.time("test");
res = a.filter(Boolean);
console.timeEnd("test");
console.log(res);

正如你所看到的，null已经消失了，并且它变得更慢了，因为它检查了所有不存在的键。然而，使用for in循环，保留falsey值与否完全取决于你自己的控制。

- Redu