Question

在 JavaScript 中对数组进行过滤后构造对象数组

2020-09-10

51

javascript arrays

我能够过滤数组，但当我尝试从过滤后的数据中创建对象数组时，结果似乎为 undefined 。如何构建以下格式的对象数组。有人能帮忙吗？

[{ brand: 'BMW'}, { brand: 'Audi'}]

const cars = [{
  name: 'BMW',
  type: 'Sedan'
}, {
  name: 'Audi',
  type: 'SUV'
}, {
  name: 'BMW',
  type: 'SUV'
}]

const result = cars.filter(({
  type
}) => type === 'SUV').map((car) => {
  brand: car.name
})

console.log(result)

Answer 1

如果要从箭头函数返回对象文字，则需要将该对象文字括在括号中，以将其与代码块区分开来，代码块也恰好括在花括号中：

result = cars.map(car => ({
  brand: car.name
}));

有趣的是，您的代码不会导致错误。这只是因为 JavaScript 中有一个标签语法，因此箭头函数内的代码基本上会创建一个 brand 标签，其值为 car.name 。

Answer 2

基本上，您需要将对象括在括号中，以将其与块语句区分开来。

const
    cars = [{ name: 'BMW', type: 'Sedan' }, { name: 'Audi', type: 'SUV' }, { name: 'BMW', type: 'SUV' }],
    result = cars
        .filter(({ type }) => type === 'SUV')
        .map(({ name: brand }) => ({ brand }));
        //                        ^^^^^^^^^^^  wrap it

console.log(result);

Answer 3

您在 map 函数中隐式返回的新对象周围缺少一对括号。这是 es6 的一个棘手语法。

const cars = [{
  name: 'BMW',
  type: 'Sedan'
}, {
  name: 'Audi',
  type: 'SUV'
}, {
  name: 'BMW',
  type: 'SUV'
}]

const result = cars.filter(({
  type
}) => type === 'SUV').map((car) => ({
  brand: car.name
}))

console.log(result)