对于第一次遇到这些问题的朋友,可能真的会去看看是不是哪里忘了加入‘;’符号,
但其实这些报错大都是因为IE10-的环境不支持ES6语法,对于部分错误我们可以切换IE11环境来判断是否为ES6语法的问题
遇到这些问题的直接的解决方法是将ES6语法改为ES5
比如:
1.关键字
let、const 要改为 var //注意作用域是否正确
2.箭头函数
// 转码前 input.map(item=>item+1) // 转码后 input.map(function (item){ return item+1; });
3.xxx 方法/对象未定义(明明该方法或对象是存在的却还是报该错误,这种情况可以考虑重写xxx方法/对象,以map()、Set()为例)

1 // 重写map方法,解决ie10及以下模式不兼容map对象和Set对象 2 function isIE() { //ie? 3 4 if (!!window.ActiveXObject || "ActiveXObject" in window) 5 return true; 6 else 7 return false; 8 } 9 10 11 //如果是 ie 则添加 Map 与 Set类 12 if(isIE()){ 13 //实现Map 14 function Map(){ 15 this.elements = new Array(); 16 //获取Map元素个数 17 this.size = function() { 18 return this.elements.length; 19 }, 20 //判断Map是否为空 21 this.isEmpty = function() { 22 return (this.elements.length < 1); 23 }, 24 //删除Map所有元素 25 this.clear = function() { 26 this.elements = new Array(); 27 }, 28 //向Map中增加元素(key, value) 29 this.put = function(_key, _value) { 30 if (this.containsKey(_key) == true) { 31 if(this.containsValue(_value)){ 32 if(this.remove(_key) == true){ 33 this.elements.push( { 34 key : _key, 35 value : _value 36 }); 37 } 38 }else{ 39 this.elements.push( { 40 key : _key, 41 value : _value 42 }); 43 } 44 } else { 45 this.elements.push( { 46 key : _key, 47 value : _value 48 }); 49 } 50 }, 51 //删除指定key的元素,成功返回true,失败返回false 52 this.remove = function(_key) { 53 var bln = false; 54 try { 55 for (i = 0; i < this.elements.length; i++) { 56 if (this.elements[i].key == _key){ 57 this.elements.splice(i, 1); 58 return true; 59 } 60 } 61 }catch(e){ 62 bln = false; 63 } 64 return bln; 65 }, 66 67 68 //获取指定key的元素值value,失败返回null 69 this.get = function(_key) { 70 try{ 71 for (i = 0; i < this.elements.length; i++) { 72 if (this.elements[i].key == _key) { 73 return this.elements[i].value; 74 } 75 } 76 }catch(e) { 77 return null; 78 } 79 }, 80 81 82 //获取指定索引的元素(使用element.key,element.value获取key和value),失败返回null 83 this.element = function(_index) { 84 if (_index < 0 || _index >= this.elements.length){ 85 return null; 86 } 87 return this.elements[_index]; 88 }, 89 90 91 //判断Map中是否含有指定key的元素 92 this.containsKey = function(_key) { 93 var bln = false; 94 try { 95 for (i = 0; i < this.elements.length; i++) { 96 if (this.elements[i].key == _key){ 97 bln = true; 98 } 99 } 100 }catch(e) { 101 bln = false; 102 } 103 return bln; 104 }, 105 106 //判断Map中是否含有指定value的元素 107 this.containsValue = function(_value) { 108 var bln = false; 109 try { 110 for (i = 0; i < this.elements.length; i++) { 111 if (this.elements[i].value == _value){ 112 bln = true; 113 } 114 } 115 }catch(e) { 116 bln = false; 117 } 118 return bln; 119 }; 120 // 重写forEach方法 121 this.forEach = function forEach(callback, context) { 122 context = context || window; 123 124 //IE6-8下自己编写回调函数执行的逻辑 125 var newAry = new Array(); 126 for (var i = 0; i < this.elements.length; i++) { 127 if (typeof callback === 'function') { 128 var val = callback.call(context, this.elements[i].value, this.elements[i].key, this.elements); 129 newAry.push(this.elements[i].value); 130 } 131 } 132 return newAry; 133 }; 134 //获取Map中所有key的数组(array) 135 this.keys = function() { 136 var arr = new Array(); 137 for (i = 0; i < this.elements.length; i++) { 138 arr.push(this.elements[i].key); 139 } 140 return arr; 141 }; 142 143 144 //获取Map中所有value的数组(array) 145 this.values = function() { 146 var arr = new Array(); 147 for (i = 0; i < this.elements.length; i++) { 148 arr.push(this.elements[i].value); 149 } 150 return arr; 151 }; 152 }; 153 154 // 实现Set 155 function Set() { 156 var items = {}; 157 this.size = 0; 158 // 实现has方法 159 // has(val)方法 160 this.has = function(val) { 161 // 对象都有hasOwnProperty方法,判断是否拥有特定属性 162 return items.hasOwnProperty(val); 163 }; 164 165 // 实现add 166 this.add = function(val) { 167 if (!this.has(val)) { 168 items[val] = val; 169 this.size++; // 累加集合成员数量 170 return true; 171 } 172 return false; 173 }; 174 175 // delete(val)方法 176 this.delete = function(val) { 177 if (this.has(val)) { 178 delete items[val]; // 将items对象上的属性删掉 179 this.size--; 180 return true; 181 } 182 return false; 183 }; 184 // clear方法 185 this.clear = function() { 186 items = {}; // 直接将集合赋一个空对象即可 187 this.size = 0; 188 }; 189 190 // keys()方法 191 this.keys = function() { 192 return Object.keys(items); // 返回遍历集合的所有键名的数组 193 }; 194 // values()方法 195 this.values = function() { 196 return Object.values(items); // 返回遍历集合的所有键值的数组 197 }; 198 199 // forEach(fn, context)方法 200 this.forEach = function(fn, context) { 201 for (var i = 0; i < this.size; i++) { 202 var item = Object.keys(items)[i]; 203 fn.call(context, item, item, items); 204 } 205 }; 206 207 // 并集 208 this.union = function (other) { 209 var union = new Set(); 210 var values = this.values(); 211 for (var i = 0; i < values.length; i++) { 212 union.add(values[i]); 213 } 214 values = other.values(); // 将values重新赋值为新的集合 215 for (var i = 0; i < values.length; i++) { 216 union.add(values[i]); 217 } 218 219 return union; 220 }; 221 // 交集 222 this.intersect = function (other) { 223 var intersect = new Set(); 224 var values = this.values(); 225 for (var i = 0; i < values.length; i++) { 226 if (other.has(values[i])) { // 查看是否也存在于other中 227 intersect.add(values[i]); // 存在的话就像intersect中添加元素 228 } 229 } 230 return intersect; 231 }; 232 233 // 差集 234 this.difference = function (other) { 235 var difference = new Set(); 236 var values = this.values(); 237 for (var i = 0; i < values.length; i++) { 238 if (!other.has(values[i])) { // 将不存在于other集合中的添加到新的集合中 239 difference.add(values[i]); 240 } 241 } 242 return difference; 243 }; 244 245 246 } 247 248 };
4.无法识别ES6的模板字符串的反引符号``,可以尝试转换为ES5的拼接方式:
//修改前 // template: `<span :class="['m-switch','m-switch-' + type, { active: booleanVal,'is-disabled': disabled,'is-small': small }] "@touchend.prevent="change" @mouseup.prevent="change"></span>`, //修改后 template: '<span :class="[\'m-switch\', \'m-switch-\' + type, {active: booleanVal, \'is-disabled\': disabled, \'is-small\': small}]" @touchend.prevent="change" @mouseup.prevent="change"></span>',
5.配置.babelrc
直接修改为ES5语法的操作是治标不治本的,要是报错的文件有几十个怎么办?一劳永逸的方法是在项目中配置.babelrc文件
Babel 是广为使用的 ES6 转码器,可以将 ES6 代码转化为 ES5 代码。
具体实现请看 antd的浏览器兼容性处理 案例。