关于ES6数组方法在低版本浏览器处理
栏目: JavaScript · 发布时间: 5年前
内容简介:最近项目里出现一个bug,低版本浏览器里某个页面报错,Uncaught TypeError: Object [object Array] ha no method 'find'。看到这个错误第一个反应是运用了ES6关于Array新API中的find函数。但是细想了下,明明用了Bable,为啥不能编译为ES5。经过搜索资料找到了原因,Babel 默认只转码 ES6 的新语法(syntax),而不转换新的 API,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symb
一、背景
最近项目里出现一个bug,低版本浏览器里某个页面报错,Uncaught TypeError: Object [object Array] ha no method 'find'。
看到这个错误第一个反应是运用了ES6关于Array新API中的find函数。但是细想了下,明明用了Bable,为啥不能编译为ES5。经过搜索资料找到了原因,Babel 默认只转码 ES6 的新语法(syntax),而不转换新的 API,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign、Array.from)都不会转码。如果想让这些方法运行,必须使用 babel-polyfill,为当前环境提供一个垫片。
二、全局babel-polyfill
使用babel-polyfill有以下几种方式:
import 'babel-polyfill'
优点:
一次性解决所有兼容性问题,而且是全局的,浏览器的console也可以使用
缺点:
- 一次性引入了ES6+的所有polyfill, 打包后的js文件体积会偏大
- 对于现代的浏览器,有些不需要polyfill,造成流量浪费
- 污染了全局对象
- 不适合框架或库的开发
三、优化解决办法
方法一:polyfill.io
一个CDN方式提供的polyfill, 可根据浏览器UserAgent自动返回合适的polyfill
方法二:全局babel-polyfill(使用babel-preset-env插件和useBuiltIns属性)
- packge.json引入依赖babel-preset-env
- .babelrc中使用配置preset-env
- 指定useBuiltins选项为true
- 指定浏览器环境或node环境, 配置需要兼容的浏览器列表
在webpack入口文件中使用import/require引入polyfill, 如import 'babel-polyfill'
以上配置完成之后, babel会根据指定的浏览器兼容列表自动引入所有所需的polyfill, 不管你代码中有没有使用
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- C语言指针数组和数组指针
- 数组 – 如何在Swift中将数组拆分成两半?
- 恶意网站可利用浏览器扩展 API,窃取浏览器数据
- 菜鸡的算法修炼:数组(旋转数组的最小数字)
- 交换数组元素,使得数组的和的差最小
- JS数组专题1️⃣ ➖ 数组扁平化
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。