如何跳过.map中的一个数组元素?

我的代码:

var sources = images.map(function (img) {
    if(img.src.split('.').pop() === "json"){ // if extension is .json
        return null; // skip
    }
    else{
        return img.src;
    }
});

这将返回:

["img.png", null, "img.png"]

推荐答案

先拿.filter()块就行了:

var sources = images.filter(function(img) {
  if (img.src.split('.').pop() === "json") {
    return false; // skip
  }
  return true;
}).map(function(img) { return img.src; });

如果你不想这样做,这不是不合理的,因为它有一些成本,你可以使用更一般的.reduce().你通常可以用.reduce表示.map():

someArray.map(function(element) {
  return transform(element);
});

可以写成

someArray.reduce(function(result, element) {
  result.push(transform(element));
  return result;
}, []);

因此,如果您需要跳过元素,您可以使用.reduce()很容易地做到这一点:

var sources = images.reduce(function(result, img) {
  if (img.src.split('.').pop() !== "json") {
    result.push(img.src);
  }
  return result;
}, []);

在该版本中,来自第一个示例的.filter()中的代码是.reduce()回调的一部分.只有在过滤操作会保留图像源的情况下,才会将图像源推送到结果数组上.

这个问题备受关注,我想补充一句澄清的话.作为一个概念,.map()的目的正是要做"map"所指的事情:根据特定规则将一个值列表转换为另一个值列表.就像一些国家的纸质 map 在两个城市完全缺失的情况下看起来很奇怪一样,从一个列表到另一个列表的映射只有在结果值1对1的情况下才真正有意义.

我并不是说从排除了某些值的旧列表创建新列表没有意义.我只是想说明.map()只有一个简单的目的,那就是创建一个与旧数组长度相同的新数组,只不过值是由旧值转换而成的.

Javascript相关问答推荐

在网页上设置搜索功能

Material UI styled() 实用程序 - 如何递归更改突出显示的文本背景 colored颜色

过滤递归数组

删除有条件的重复对象

按 ID 查找和更新嵌套数组元素

在 Vue 中显示基于props 的条件文本的其他方式?

交换 3 个 div 并使选择 div 居中

如何在条形图上绘制 x 轴值?

Spread Syntax 创建浅拷贝还是深拷贝?

两行相同代码的区别

如何让 Javascript 跟踪我的分数增量?

ReactJS中的递归组件返回属性未定义错误

用于构建类似对象层次结构的树的递归方法无法按预期工作

如何在下一个 js 中使用组件级 sass 文件

Form.IO - 如何使 DataGrid 中的下拉选择变得可见

我该如何解决这个错误:FirebaseError: Expected type 'mc', but it was: a custom yc object?

如何将 DRACO 加载器与 GLTF 加载器一起使用?

.push( ) 没有更新变量

findIndex 方法在值存在时不检索索引

在两个不同的网页之间共享 HTML 表单数据