边缘：SCRIPT1028：期望的标识符，字符串或数字

Question

我的页面在Chrome和Firefox中运行良好：

但是，当我尝试在Edge中加载此页面时，问题和答案消失了。只发布类别。另外，当尝试在IE中加载此页面时，除搜索栏外，所有内容均消失。

Edge给我以下错误：

SCRIPT1028：SCRIPT1028：faq.html的第84行上的预期标识符，字符串或数字

这是指以下代码：

function sortByCategory(data) {
  return data.reduce((obj, c) => {
    const { category, ...rest } = c; // this line throws the error
    obj[category] = obj[category] || [];
    obj[category].push(rest);
    return obj;
  }, {});
}

我该如何解决？

Answer 1

Edge 和 IE 都不支持对象属性剩余语法（尽管 Edge 最终可能会支持它）。我建议使用Babel自动将您的代码转换为 ES5 ，这将允许您使用该语言的最新和最好的版本进行编写，同时允许古老且不兼容的浏览器理解您所有的转换代码。例如，插入

const { category, ...rest } = c;

结果是

"use strict";

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var _c = c,
    category = _c.category,
    rest = _objectWithoutProperties(_c, ["category"]);

看起来不那么漂亮，但它可以自动完成。

一种手动方法可能是：

const { category, ...rest } = c;

Answer 2

令人惊讶的是，Edge似乎还不支持属性休息，这很不幸，但是后来才正式在ES2018中添加。您将需要重新编写代码以不使用属性rest（...rest对象文字的一部分）（或者，正如SomePerformance建议的那样，使用转译器）。

这是执行此操作的许多方法之一：

function sortByCategory(data) {
    return data.reduce((obj, c) => {
        //const { category, ...rest } = c;
        const { category } = c;
        const rest = {};
        for (const key of Object.keys(c)) {
            if (key !== "category") {
                rest[key] = c[key];
            }
        }
        obj[category] = obj[category] || [];
        obj[category].push(rest);
        return obj;
    }, {});
}

我避免使用，delete因为delete在对象上取消优化对象，使属性查找变慢。但是，仅对这些对象进行优化可能不会对页面/应用程序的感知速度产生任何影响，因此...