函数参数内的括号 ES5 兼容性答案

【问题标题】：Brackets inside function argument ES5 compatibility函数参数内的括号 ES5 兼容性
【发布时间】：2019-03-18 08:33:27
【问题描述】：

我在 IE11 中运行下面的脚本，没有转译器。但是，它返回“预期标识符”错误。

var result = Object.values(response.data.reduce(function(r, { boxm, model_no, model_name, qty, type }, index, array) {
      r[boxm] = r[boxm] || { boxm: boxm, lines: [] }
      r[boxm].lines.push({ model_no: model_no.toString(), model_name: model_name, qty: qty, type: type })
      return r
}, {}))

我猜它一定是reduce函数中的{ boxm, model_no, model_name, qty, type }这部分。

有人知道如何将其转换为 ES5 友好的语法。

【问题讨论】：

只是不要解构参数。 Object.values 也不支持 caniuse.com/#search=Object.values
不支持的部分肯定是解构，还有Object.values()

标签： javascript ecmascript-6 ecmascript-5

【解决方案1】：

不支持的部分肯定是解构，还有Object.values。

为了确定你可以使用什么，有一个网站：

https://caniuse.com/#search=Object.values

var obj = response.data.reduce(function(r, data, index, array) {
  r[data.boxm] = r[data.boxm] || {
    boxm: data.boxm,
    lines: [],
  };

  r[data.boxm].lines.push({
    model_no: data.model_no.toString(),
    model_name: data.model_name,
    qty: data.qty,
    type: data.type,
  });

  return r;
}, {});

var result = Object.keys(obj).map(function(x) {
  return obj[x];
});

【讨论】：

【解决方案2】：

这称为解构，它是 ECMAScript 6 语法。 Object.values 和动态属性名称也不支持。这是一个完整的 ES5 版本：

//Note that I'm creating Object.values here to make the rest of the code simpler
Object.prototype.values = function(obj) {
    return Object.keys(obj).map(function(key) {
        return obj[key];
    });
};

var result = Object.values(response.data.reduce(function(r, curr, index, array) {
    if (!r[curr.boxm]) {
        r[curr.boxm] = {
            boxm: curr.boxm,
            lines: []
        }
    }
    r[curr.boxm].lines.push({
        model_no: curr.model_no.toString(),
        model_name: curr.model_name,
        qty: curr.qty,
        type: curr.type
    });
    return r;
}, {}));

【讨论】：