页面不适用于 IE 版本 11

Question

我正在为一家公司制作网页，该网页在 Chrome、Safari 和 Firefox 上运行良好。但是，它不适用于 IE 11。我没有测试其他版本的 IE。也许我在这个 JS 中使用的东西在 IE 中不受支持？我正在使用包含并将其更改为 indexOf ，但它仍然什么也没做。我想知道它是否与数组的 let 和过滤有关。我希望有人可以看看下面的代码。如果有兴趣，我将提供该页面的链接。谢谢。

<script>
//load gif on click
$(function(){

    //grab gif image and assign to variable
    var image = new Image();
        image.src='https://cento.com/images/gif/EARTH.gif';

    //store can code values in array
    var canCode = [
        {code: "7283SCBSGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7283SC1SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7283SC2SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7283SC3SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7283SC4SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7283SCASGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7338SC3SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7338SC4SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7338SCASGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7338SCBSGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7338SC1SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7338SC2SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7355SEASGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7355SEBSGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7257S93S2T", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7257S9AS2T", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7257S9BS2T", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7027S93S2T", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7339S91SGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7339S92SGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7339S93SGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7339S94SGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "7347S9ASGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis", flag: "https://www.cento.com/images/misc/btmb/maldives-flag.png"},
        {code: "6182SD1SMT", codeOZ: 5, species: "albacore", country: "Fiji", boat: "Sam Weon No. 11", flag: "https://www.cento.com/images/misc/btmb/fiji-flag.png"},
        {code: "6182SD2SMT", codeOZ: 5, species: "albacore", country: "Fiji", boat: "Sam Weon No. 11", flag: "https://www.cento.com/images/misc/btmb/fiji-flag.png"},
        {code: "6182SDDSMT", codeOZ: 5, species: "albacore", country: "Fiji", boat: "Sam Weon No. 11", flag: "https://www.cento.com/images/misc/btmb/fiji-flag.png"},
        {code: "6273SDCSMT", codeOZ: 5, species: "albacore", country: "Fiji", boat: "Sam Weon No. 11", flag: "https://www.cento.com/images/misc/btmb/fiji-flag.png"},     
        {code: "6273SDDSMT", codeOZ: 5, species: "albacore", country: "Fiji", boat: "Sam Weon No. 11", flag: "https://www.cento.com/images/misc/btmb/fiji-flag.png"}
    ];

    //refresh map on button click
    $('#canCode').click(function(e){
        console.log("test");

        //fade divs if reload occurs
        $('.resultsDiv').fadeOut("fast").hide();
        $('.canContainerDiv').fadeOut("fast").hide();
        $('.vesselDiv').fadeOut("fast").hide();
        $('.methodOfCatchDiv').fadeOut("fast").hide();
        $('.sustainabilityDiv').fadeOut("fast").hide();

        //assign user input to variable
        var usersInput=$("#can").val().toUpperCase();

        //assign data to variables 
        var code = '';
        var codeOZ = '';
        var species = '';
        var country = '';
        var boat = '';
        var flag = '';

        //filter out the array against user input
        let chosen = canCode.filter(can => can.code===usersInput);

        //show error message if item not in array
        if (chosen.length <= 0) {
            //show invalid can message
            $("#invalidCan").css("display", "block");
            $("#invalidCan").show();

            //show original gif frame
            $('#gifFirstFrame').show();
            $('#gif').hide();

            //hide results div
            $('.resultsDiv').hide();

            //hide can container div
            $('.canContainerDiv').hide();

            //hide vessel div
            $('.vesselDiv').hide();

            //hide method of catch row
            $('.methodOfCatchDiv').hide();

            //hide sustainability div
            $('.sustainabilityDiv').hide();

        }

        //assign data to variables 
        code += chosen[0].code.toUpperCase();
        codeOZ += chosen[0].codeOZ;
        species += chosen[0].species;
        country += chosen[0].country;
        boat += chosen[0].boat;
        flag += chosen[0].flag;

        //prevent default behavior
        e.preventDefault();

        //compare user input against array
        if(code === usersInput) {

            //show results div
            $('.resultsDiv').fadeIn("fast").show();

            //show can container div
            $('.canContainerDiv').fadeIn("fast").show();

            //show vessel div
            $('.vesselDiv').fadeIn("fast").show(); 

            //show method of catch row
            $('.methodOfCatchDiv').fadeIn("fast").show();

            //show sustainability div
            $('.sustainabilityDiv').fadeIn("fast").show();

            //assign values to appropriate divs
            $('.fishNetWeightSkipjack').html('<span class="boldIconText">' + codeOZ + ' oz' + '</span><br><em>Net Weight</em>');
            $('.fishNetWeightAlbacore').html('<span class="boldIconText">' + codeOZ + ' oz' + '</span><br><em>Net Weight</em>');
            $('#vesselFlag').html('<img class="img-responsive center" src="' + flag + '" alt="Flag Identifier Tuna">');
            $('#vesselName').html('<span class="boldIconText">' + boat + '</span><br><em>Name of Vessel</em>');
            $('#vesselCountry').html('<span class="boldIconText">' + country + '</span><br><em>Country of Origin</em>');

            //search for tuna identifier and show correct information
            if (usersInput.indexOf("GT") || usersInput.indexOf("2T")) {
                console.log("tonno");
                $('.methodOfCatchDiv').attr('id', 'poleLineParallax');
                $('.selectedTunaCan').fadeIn("slow").show();    
                $('.selectedAlbacoreTunaCan').fadeOut("fast").hide();  
                $('.fishSpeciesSkipjack').show();
                $('.fishSpeciesAlbacore').hide();
                $('.skipjackSubContent').show();
                $('.albacoreSubContent').hide();
                $('.poleCaught').show();
                $('.longLineCaught').hide();
                $('.vesselDescriptionSkipjack').show();
                $('.vesselDescriptionAlbacore').hide();
                $('#skipjackImg').show();
                $('#albacoreImg').hide();
            } else if (usersInput.indexOf("MT")) {
                console.log("albacore");
                $('.methodOfCatchDiv').attr('id', 'longLineParallax');
                $('.selectedTunaCan').fadeOut("fast").hide();
                $('.selectedAlbacoreTunaCan').fadeIn("slow").show();
                $('.fishSpeciesSkipjack').hide();
                $('.fishSpeciesAlbacore').show();
                $('.skipjackSubContent').hide();
                $('.albacoreSubContent').show();
                $('.poleCaught').hide();
                $('.longLineCaught').show();
                $('.vesselDescriptionSkipjack').hide();
                $('.vesselDescriptionAlbacore').show();
                $('#skipjackImg').hide();
                $('#albacoreImg').show();
            }

            //hide error message 
            $("#invalidCan").css("display", "none");
            $("#invalidCan").hide(); 

            //hide original gif frame 
            $('#gifFirstFrame').hide();

            // "refresh" the gif and remove the invis class (when using display none the gif somehow won't be refreshed)
            $('#gif').attr('src',image.src).removeClass('invis');
            $('#gif').show();

            // timer, which hides gif and shows image and button again
            setTimeout(function(){ 
                $('#gif').removeClass('invis'); 
            }, 10000)

        } 

    }); 

});
</script>

Answer 1

使用 babel 让它工作。将语法转换为以下内容：

var chosen = canCode.filter(function (can) {
  return can.code === usersInput;
});