关于ES6数组方法在低版本浏览器处理

最新推荐文章于 2023-10-18 18:18:17 发布
最新推荐文章于 2023-10-18 18:18:17 发布
阅读量413 收藏
点赞数
文章标签： json webpack ViewUI
原文链接：https://segmentfault.com/a/1190000018366194
版权

一、背景

最近项目里出现一个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有以下几种方式：

  1. 单独在html的<head>标签中引入babel-polyfill.js(CDN或本地文件均可)
  2. 在package.json中添加babel-polyfill依赖, 在webpack配置文件增加入口: 如entry: ["babel-polyfill",'./src/app.js'], polyfill将会被打包进这个入口文件中, 而且是放在文件最开始的地方
  3. 在package.json中添加babel-polyfill依赖, 在webpack入口文件顶部使用import/require引入,如import 'babel-polyfill'`

优点：

一次性解决所有兼容性问题,而且是全局的,浏览器的console也可以使用

缺点：

  1. 一次性引入了ES6+的所有polyfill, 打包后的js文件体积会偏大
  2. 对于现代的浏览器,有些不需要polyfill,造成流量浪费
  3. 污染了全局对象
  4. 不适合框架或库的开发

三、优化解决办法

方法一：polyfill.io

一个CDN方式提供的polyfill, 可根据浏览器UserAgent自动返回合适的polyfill

方法二：全局babel-polyfill(使用babel-preset-env插件和useBuiltIns属性)

  1. packge.json引入依赖babel-preset-env
  2. .babelrc中使用配置preset-env
  3. 指定useBuiltins选项为true
  4. 指定浏览器环境或node环境, 配置需要兼容的浏览器列表

在webpack入口文件中使用import/require引入polyfill, 如import 'babel-polyfill'
以上配置完成之后, babel会根据指定的浏览器兼容列表自动引入所有所需的polyfill, 不管你代码中有没有使用

weixin_34351321
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript学习笔记之ES6数组方法
01-19
ES6（ECMAScript 6）是即将到来的新版本JavaScript语言的标准，...在这一节中将总结有关于ES6给数组提供一些新特性的使用方法。 ES6提供的两个静态方法： Array.from Array.of ES6提供操作、填充和过滤数组的方法：
es6-recursive:在 ES6 中使用递归函数
06-23
JS ES6 功能测试在 ES6 中使用递归函数。 在浏览器实现 ES6 的正确尾调用之前，将死于大输入。缺点列表还搞乱了列表 a-la SICP。跑步每晚仅使用 Firefox 中默认可用的 ES6 功能。 可能需要在其他地方转译。
数组和类数组在低版本下的小坑
HITerGY的踩坑日记
03-09 228
今天写代码的时候写了这样的一句： document.querySelectorAll("......").forEach(item=> { ...... }); 看了我的标题以及上面的这行代码的老油条可能就立马反应过来了，你这个小同志不讲武德，这是类数组和数组的问题。 其实上面的这个代码在高版本内核的chrome浏览器是可以跟个没事人一样运行的，但是一旦到了低版本的浏览器，就会报错 document.querySelectorAll("…").forEach is not a Functi
低版本浏览器下Array之forEach
weixin_34270865的博客
04-19 207
低版本浏览器不支持Array的forEach，解决办法 define(function(require,exports,module){ /** * Invokes given callback function for each element of an array. * ECMAScript 5 Reference: 15.4.4.18 ...
让ie8支持foreach
weixin_30765505的博客
02-03 202
　　 if ( !Array.prototype.forEach ) { Array.prototype.forEach = function forEach( callback, thisArg ) { var T, k; if ( this == null ) { throw new TypeError( "this is null o...
ES6语言特性，如何在低版本浏览器运行它
weixin_34342905的博客
09-05 437
Introduction ECMAScript 6 于今年6月正式成为了标准，关于ES6，我们最大的疑虑可能是客户端浏览器还没有完全支持它，也就node.js用用。 有很多种手段可以解决这个问题，比如：通过webpack(请参考博主webpack系列的文章)与babel-loader. 如下图，浏览器借助它们就能跑ES6语法了，也没有增加js负荷(1.6KB)。以下的ES6特性，都可以放心的使用。...
vue项目优雅降级，es6降为es5，适应低版本浏览器渲染
最新发布
阿牛哥的博客
10-18 2664
vue项目优雅降级，es6降为es5，适应低版本浏览器渲染
JavaScript学习笔记之ES6数组方法_.docx
10-09
在JavaScript的世界里，ES6（ECMAScript 6）是一个重要的里程碑，引入了许多新的特性，尤其是在数组处理方面。...因此，对于任何致力于提升JavaScript技能的开发者来说，理解和应用这些ES6数组方法是至关重要的。
JavaScript ES6的新特性使用新方法定义Class
01-21
目前ES6的标准化工作正在进行中，预计会在14年12月份放出正式敲定的版本。但大部分标准已经就绪，且各浏览器对ES6的支持也正在实现中。 ES6中定义类的方式， 就是ES3和ES5中定义类的语法糖，虽然也有些区别，但是...
js兼容es5-es6.rar
12-03
“本方法支持大部分es5 es6兼容低版本浏览器”，这意味着这个压缩包可能包含了转换工具、polyfill库或者一系列的JavaScript函数，用于模拟ES6的特性，比如`Array.prototype.forEach`方法在IE7中不支持，但在ES6中是...
ES6（笔记）
weixin_73630788的博客
11-12 546
ES6基础
常用Es6(5之后）的正确打开方式
Li-的博客
04-01 2253
文章目录1.取值-解构赋值2.扩展运算符和Set3.includes4.精确搜索5.可选链操作符6.空值合并运算符7.异步函数8.三目运算符9.扁平化数据10.for of 1.取值-解构赋值 const obj = { a:1, b:2, c:3, d:4, e:5, } //es5 const a = obj.a; const f = obj.a + obj.d; //es6 const {a,b,c,d,e} = obj; const f = a + d;
知网文件怎么转pdf
m0_62763529的博客
08-10 1329
写过论文的同学都知道，知网下载的参考论文都是caj格式的，这种格式很不方便我们参考引用，最好是能转成PDF格式的，那么caj怎么转成PDF呢？今天介绍一款免费而且支持批量caj转PDF的产品.完美解决上述问题。...
jquery file upload报错 TypeError: Object [object Object] has no method 'progressbar'
小鹰信息技术服务部
08-01 4027
Uncaught TypeError: Cannot call method 'unshift' of undefined
ES6常用数组方法
马优晨
02-01 7785
今天很高兴，连续收到 众安保险，阿里巴巴国际UED团队 和 阿里口碑的邀请。太激动了，放一张自己两年前的照片，压压惊~ 接来写几个我平时在项目使用的最常用的几个优化的方法~ 1- 数组去重 var arr = [1,2,3,4,3,4]; var arr2 = [...new Set(arr)]; 这个时候arr2就是去重后的数组~ 2- 交换两个变量
vue解决ie与低版本浏览器es6兼容问题
Beamon__的博客
11-01 6802
使用vue-cli搭建vue项目打包后在ie上打开静态资源出现空白，但是在chrome上一切正常，经检测发现打包后的js存在兼容问题，ie等低版本浏览器对es6存在不支持情况，解决方法如下： 1. 安装babel-polyfill npm i babel-polyfill -S 2. 在main.js引入abel-polyfill 完成！...
ES6之数组的flat(),flatMap()
侯阮悦的博客
10-09 658
数组的成员还是数组时，Array.prototype.flat（）用于将嵌套的数组“拉平”，编程一维数组。该方法返回一个新的数组，对原数据没有影响。 [1, 2, [3, 4]].flat() // [1, 2, 3, 4] flat（）默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat（）方法的参数写成一个整数，表示想要拉平的层数，默认为1. [1, 2, [3, [...
解决低版本chrome浏览器不支持es6 Array.find()
weixin_30505225的博客
01-02 1413
if(!Array.prototype.find){Array.prototype.find=function(predicate){'usestrict';if(this==null){thrownewTypeError('Array.prototype.findcalledonnullorundefined');}...
ES5与ES6的区别及新增数组方法解析
这些新增的特性极大地提高了JavaScript的开发效率和代码可读性，但同时也意味着开发者需要考虑如何在不支持新特性的旧浏览器中实现这些功能，这通常需要借助工具（如Babel）将ES6代码转换为ES5或其他更低版本的代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值