javascript - 将函数从 ES6 转换为普通 JavaScript 以在 Internet Explorer 中运行时出现问题

Question

我使用正则表达式创建了目录搜索来匹配数据的输入。我按照教程完成了一半，然后自己添加了它。它可以在 Chrome 中运行，但不能在 Internet Explorer 中运行。

我发现这是由于 Internet Explorer 中的 ES6 不兼容造成的，现在我无法弄清楚如何将我的 displayMatches 函数正确转换为普通 javascript 或 jQuery没有 ES6。

到目前为止，大部分功能都在工作，除了我无法弄清楚如何删除 html 中匹配列表中的逗号，即使我尝试使用 .join('')

Screenshot #1

Screenshot #2 - see the commas in between?

这是 Chrome 上的工作代码:

function displayMatches() {
    // console.log(this.value);
    $('.suggestions').show();
    var matchArray = findMatches(this.value, employees);
    console.log(matchArray);
    var html = matchArray.slice(0,10).map(person => {
        var regex = new RegExp(this.value, 'gi');
        var firstName = person.GivenName.replace(regex, `<span class="hl">${this.value}</span>`);
        var lastName = person.Surname.replace(regex, `<span class="hl">${this.value}</span>`);
        var extension;

        if (person.Phone_Ext1 !== null){
            extension = person.Phone_Ext1;
        } else {extension = "N/A"}

        return `
            <li class="search-item" data-id=${person.EmployeeID}>
                <span class="person">${firstName} ${lastName}</span>
                <span class="phone-ext">Ext. ${extension}</span>
            </li>
        `
    }).join('');

    if ($('#search-box').val() == ""){
        suggestions.innerHTML = "";
    } else {
        suggestions.innerHTML = html;
    }
}

这是我的转换尝试:

function displayMatches() {
    // console.log(this.value);
    $('.suggestions').show();
    var matchArray = findMatches(this.value, employees);
    console.log(matchArray);

    var html = [];
    var person;
    var list;

    for(var i=0; i < matchArray.slice(0,10).length; i++){
        person = matchArray.slice(0,10)[i];
        var regex = new RegExp(this.value, 'gi');
        var hilight = '<span class="hl">' + this.value + '</span>';
        var firstName = person.GivenName.replace(regex, hilight);
        var lastName = person.Surname.replace(regex, hilight);
        var extension;

        if (person.Phone_Ext1 !== null){
            extension = person.Phone_Ext1;
        } else {
            extension = "N/A"
        }

        list =
            '<li class="search-item" data-id=' + person.EmployeeID +'>' +
            '<span class="person">' + firstName + ' ' + lastName + '</span>' +
            '<span class="phone-ext">Ext. ' + extension + '</span>' +
            '</li>';
        html.push(list);
    }
    html.join('');
    console.log(html);

    if ($('#search-box').val() == ""){
        suggestions.innerHTML = "";
    } else {
        suggestions.innerHTML = html;
    }
}

Answer 1

html.join('') 返回一个新字符串。它不会将数组转换为字符串，也不会为 html 变量分配新值。你需要做

html = html.join('');

或者更好地使用两个单独的变量，一个用于数组，一个用于字符串。

顺便说一句，您甚至不需要自己在循环中构造和填充数组，您可以使用 ES5 Array map method从IE9开始。正如@H.B.注释中指出，您只需要使用 function 表达式而不是箭头语法。