對於第一次遇到這些問題的朋友,可能真的會去看看是不是哪里忘了加入‘;’符號,
但其實這些報錯大都是因為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的瀏覽器兼容性處理 案例。