Question

让我解释一下我的问题。

我有以下数据：

data: {
  carType:  {key: 'sport',     label: 'Sports Car'},
  carStyle: {key: 'striped',   label: 'Striped (with blabla)'},
  carPrice: {key: 'expensive', label: 'Above 500.000$'},
  carOptions: [
    {key: 'aluminium',   label: 'Chrome Wheel (Available different size)'},
    {key: 'leatherSeat', label: 'Seat Leather from Italy'},
  ]
}

我需要处理这些数据才能获得与我的对象键相关的键值///我面临的棘手情况是多选的情况。

类似的东西：

body: {
 carType: 'sport',
 carStyle: 'striped',
 carPrice: 'expensive',
 carOptions: ['aluminium', 'leatherSeat']
}

我在ES5中做了一些相当冗长的事情。如果可能的话，我希望使用ES6 / ES7功能更清洁的东西来解决这个问题。谢谢你的时间。

ps：不要考虑数据的内容。它是为这个主题而编写的。在我的情况下，只有数据结构无法修改。

Answer 1

在ES6中，使用Array.reduce

＆＃13;

const data = {
  carType: {
    key: 'sport',
    label: 'Sports Car'
  },
  carStyle: {
    key: 'striped',
    label: 'Striped (with blabla)'
  },
  carPrice: {
    key: 'expensive',
    label: 'Above 500.000$'
  },
  carOptions: [{
      key: 'aluminium',
      label: 'Chrome Wheel (Available different size)'
    },
    {
      key: 'leatherSeat',
      label: 'Seat Leather from Italy'
    },
  ]
};

const changedData = Object.keys(data).reduce((tmp, x) => {
  tmp[x] = data[x] instanceof Array ? data[x].map(y => y.key) : data[x].key;

  return tmp;
}, {});

console.log(changedData);

＆＃13;

Answer 2

在ES6中你可以做得比在ES5中做得更好：

@app.route('/book')
def hello():
    file = request.args.get('file')
    if not file:
        return redirect("/?file=abc.pdf")
    return render_template('book.html', paraKey=paraValue)

为了进行比较，使用最新的功能（包括实验对象扩展语法），您可以

const data = …;
const body = {};
for (const p in data)
    body[p] = Array.isArray(data[p])
      ? data[p].map(x => x.key)
      : data[p].key;

Answer 3

使用ES5，您可以循环遍历data个对象键，并通过对迭代的body进行测试来构建新的key对象：

Object.keys(data).forEach(function(k) {
  if (!Array.isArray(data[k])) {
    body[k] = data[k].key;
  } else {
    body[k] = data[k].map(function(opt) {
      return opt.key;
    });
  }
});

<强>演示：

＆＃13;

var data = {
  carType: {
    key: 'sport',
    label: 'Sports Car'
  },
  carStyle: {
    key: 'striped',
    label: 'Striped (with blabla)'
  },
  carPrice: {
    key: 'expensive',
    label: 'Above 500.000$'
  },
  carOptions: [{
      key: 'aluminium',
      label: 'Chrome Wheel (Available different size)'
    },
    {
      key: 'leatherSeat',
      label: 'Seat Leather from Italy'
    },
  ]
};

var body = {};

Object.keys(data).forEach(function(k) {
  if (!Array.isArray(data[k])) {
    body[k] = data[k].key;
  } else {
    body[k] = data[k].map(function(opt) {
      return opt.key;
    });
  }
});

console.log(body);

＆＃13;

Answer 4

您可以使用ES6提供的更清晰，可读的功能和操作方法。以下ES6有助于解决您的问题

var data = {
  carType:  {key: 'sport',     label: 'Sports Car'},
  carStyle: {key: 'striped',   label: 'Striped (with blabla)'},
  carPrice: {key: 'expensive', label: 'Above 500.000$'},
  carOptions: [
    {key: 'aluminium',   label: 'Chrome Wheel (Available different size)'},
    {key: 'leatherSeat', label: 'Seat Leather from Italy'},
  ]
}
var obj = {};
Object.entries(data).forEach(([key, value]) => {
Object.defineProperty(obj, key, {
  value: Array.isArray(value) ? value.map(a => a.key) : value.key,
  writable: true,
  enumerable: true,
  configurable: true
});
});
console.log(obj)

Answer 5

如果您使用的是lodash，您可以在一行中解决（1）：

_.map(data, (element, index) => Array.isArray(element)?element.map(e=>e.key):element.key)

如果您不喜欢三元，则可以使用解决方案（2）：

_.map(data, (element, index) => {
    if(Array.isArray(element)) {
        return element.map(e=>e.key)
    } else {
        return element.key
    }
})

如果你不喜欢lodash，但你仍然想使用功能编程，你可以使用解决方案（3）：

Object.keys(data).reduce((accumulator, key) => {
    if(Array.isArray(accumulator[key])) {
        accumulator[key] = data[key].map(e=>e.key)
    } else {
        accumulator[key] = data[key].key
    }
    return accumulator
},{})

我的意见是使用lodash使用solution（1）或（2），因为它（几乎）与Array native方法具有相同的语法。

使用三元组合是否取决于您，以及使用传统循环

从ES6 / ES7中的特定结构化对象数组中提取值

5 个答案: