Question

我正在尝试将reduce（）与map（）结合使用，将多个盒子艺术品对象减少为一个值：最大盒子艺术的网址。
它给了我以下错误：

VM272:20 Uncaught TypeError: boxarts.reduce(...).map is not a function at <anonymous>:20:4

不确定究竟出了什么问题

const boxarts = [
  { width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
  { width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
  { width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" },
  { width: 425, height: 150, url: "http://cdn-0.nflximg.com/images/2891/Fracture425.jpg" }
]
let newReduce = boxarts.reduce(function(accumulator, currentValue) {
  if (accumulator.width * accumulator.height > currentValue.width * currentValue.height) {
    return accumulator
  } else {
    return currentValue
  }
}).map(function(item) {
  return item.url
})

console.log(newReduce)

解决初始问题。它将链接作为对象数组返回。

    const boxarts = [{
    width: 600,
    height: 700,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture600.jpg"
  },
  {
    width: 500,
    height: 500,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture500.jpg"
  },
  {
    width: 425,
    height: 150,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture425.jpg"
  },
  {
    width: 200,
    height: 200,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg"
  }
]

let newReduce = [boxarts.reduce(function(acc, currentValue) {

  if (acc.width * acc.height > currentValue.width * currentValue.height) {
    return acc
  } else {
    return currentValue
  }
})].map(function(item) {
  return {
      url:item.url}
})



console.log(newReduce)

Answer 1

const boxarts = [
        { width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
        { width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
        { width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" },
        { width: 425, height: 150, url: "http://cdn-0.nflximg.com/images/2891/Fracture425.jpg" }
    ]

    let newReduce = boxarts.reduce(function (accumulator, currentValue) {

        if (accumulator.width * accumulator.height > currentValue.width * currentValue.height) {
            return accumulator
        } else {
            return currentValue
        }
    })

    console.log(newReduce.url)

从您的映射函数看来，您似乎正在尝试获取url，问题是newReduce是一个对象而且没有map函数。您只需使用newReduce.url

即可轻松获取网址

Answer 2

reduce来电的结果是一个boxart 对象，而不是一个数组。不要使用map，只需访问url属性：

const boxarts = [
  { width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
  { width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
  { width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" },
  { width: 425, height: 150, url: "http://cdn-0.nflximg.com/images/2891/Fracture425.jpg" }
]
let newReduce = boxarts.reduce(function(accumulator, currentValue) {
  if (accumulator.width * accumulator.height > currentValue.width * currentValue.height) {
    return accumulator
  } else {
    return currentValue
  }
}).url

console.log(newReduce)

Answer 3

map适用于数组，但在您的代码中，reduce方法返回object，因此map无效。由于它已经返回object，您只需执行object.url

即可获取网址

const boxarts = [{
    width: 200,
    height: 200,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg"
  },
  {
    width: 150,
    height: 200,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg"
  },
  {
    width: 300,
    height: 200,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg"
  },
  {
    width: 425,
    height: 150,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture425.jpg"
  }
]

let newReduce = boxarts.reduce(function(accumulator, currentValue) {

  if (accumulator.width * accumulator.height > currentValue.width * currentValue.height) {
    return accumulator
  } else {
    return currentValue
  }
}).url


console.log(newReduce)

如果你仍然想使用map函数把reduce的返回放在一个数组中。然后你可以使用map方法。此外，map方法将再次返回一个数组

const boxarts = [{
    width: 150,
    height: 200,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg"
  },
  {
    width: 300,
    height: 200,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg"
  },
  {
    width: 425,
    height: 150,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture425.jpg"
  },
  {
    width: 200,
    height: 200,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg"
  }
]

let newReduce = [boxarts.reduce(function(acc, currentValue) {

  if (acc.width * acc.height > currentValue.width * currentValue.height) {
    return acc
  } else {
    return currentValue
  }
}, boxarts[0])].map(function(item) {
  return item.url
})
console.log(newReduce)

链接reduce（）和map（）Javascript

3 个答案: