js的let语句在安卓手机端的QQ浏览器出错的问题

关于JavaScript里面的let,let 语句可以声明一个块级作用域的本地变量,并且可选的将其初始化为一个值。

<ul id="list"> </ul>
var list = document.getElementById("list");
for (var i = 1; i <= 5; i++) {
    var item = document.createElement("LI");
    item.appendChild(document.createTextNode("Item " + i));

    let j = i;
    item.onclick = function (ev) {
        console.log("Item " + j + " is clicked.");
    };
    list.appendChild(item);
}           

分别点击页面的li标签内容,控制器分别输出一下内容:

解析:

  如果不用let,而改用var的话,将总是打印出 Item 5 is Clicked,因为var声明的 j 是函数级变量,5个内部函数都指向了同一个 j ,而 j 最后一次赋值是5。

  用了let后,j 变成块级域(也就是花括号中的块,每进入一次花括号就生成了一个块级域),所以 5 个内部函数指向了不同的 j 。

然而这次要讨论的并不是关于let的用法,而是做新项目的时候发现了个新问题:使用了let的项目无法在安卓手机的QQ浏览器APP正常打开页面。

首先推荐个链接: http://ruanyf.github.io/es-checker/index.cn.html(检测当前的浏览器是否支持ECMAScript 6)

左边是安卓QQ app里面带的浏览器测得结果,而右边是安卓QQ浏览器APP的测试结果(测试PC端浏览器及手机的其他浏览器大部分都是90%以上)。

而我目前的解决方法仅是将let改为了var。然后说一下解决这个问题的思路,首先let是ES6新增的语法,所以我们需要去查一下哪些浏览器不支持ES6。

比较幸运的是居然找到了上面说到的测试链接,真的很好用,直接用浏览器打开链接就可以知道其兼容性。

除了let的问题,本次项目用到了vue.js,刚开始函数声明方式不严谨,但是在PC端,安卓的其他浏览器(除了QQ浏览器),IOS的浏览器包括QQ浏览器,都可以正常显示,唯独安卓的QQ浏览器不能正常显示。

时间: 2024-10-10 18:21:37

js的let语句在安卓手机端的QQ浏览器出错的问题的相关文章

JS前端开发判断是否是手机端并跳转操作(小结)

JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <script type="text/javascript">  // borwserR

手机端APP/ 手机浏览器 Html5自动定位城市

第一步:简单了解 html5为window.navigator提供了geolocation属性,用于获取基于浏览器的当前用户地理位置. window.navigator.geolocation提供了3个方法分别是: void getCurrentPosition(onSuccess,onError,options);//获取用户当前位置 int watchCurrentPosition(onSuccess,onError,options);//持续获取当前用户位置 void clearWatch

用JS写一个计算器(兼容手机端)

先看成果:1.PC端2. 首先确立html,有哪些东西我们要知道.布局大概的样子在心里有个数 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>瑞雪的计算器</t

利用firefox调试安卓手机端web

分2部分: 手机: 1.安装最新版firefox 2.打开浏览器,输入about:config 3.设置 devtools.debugger.remote-enabled 值为true devtools.debugger.force-local 值为false (这里比pc上多设置一个) 4.重启firefox pc: 1.pc安装15以上版本firefox 2.打开浏览器,输入 about:config(可能会有个警告,继续就行了) 3.设置  devtools.debugger.remote

PHP判断用户是手机端?还是浏览器端访问?

function isMobile(){ $useragent=isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : ''; $useragent_commentsblock=preg_match('|\(.*?\)|',$useragent,$matches)>0?$matches[0]:''; function CheckSubstrs($substrs,$text){ foreach($substrs as $

神彩彩票系统门户版安卓手机端客户端源码

软件版本:V2.0软件大小:25MB软件类型:简体中文/国产软件/免费版软件分类:源码.java / android运行环境:Winxp/vista/win8/2000/2003/linux 解压密码是:php.662p.com我的联系QQ:2360 2486 66项目压缩包里有演示安装包,需要的朋友可以下载看看演示软件预览图:<ignore_js_op> <ignore_js_op> <ignore_js_op> <ignore_js_op> 软件简介:

安卓手机端实现点击电话号码,出现拨打、复制、保存到通讯录

<a href="tel://110 ">拨打电话</a> 这个在安卓可以实现三种功能,但是在苹果手机,只能实现拨打功能 <a style="color:#0096ff;" :href="'tel://'+item.mobile">{{item.mobile}}</a> 在vue组件内循环列表的时候,需要对href进行绑定并对后面进行拼接 原文地址:https://www.cnblogs.com/x

HTML 在安卓手机端软键盘弹出顶起页面布局的解决办法

$('body').height($('body')[0].clientHeight); 以上是背景即BODY被顶起的解决办法. 如果是footer被顶起,则可以用判断解决, $('input').focus(function(){ $('.share').css('display','none'); }) $('input').blur(function(){ $('.share').css('display','block'); })

jquery手机端带农历的万年历插件

简要教程 这是一款使用jquery结合swiper.js来制作的手机端带农历的万年历插件.该万年历类似百度的万年历,带有农历日期.用户可以通过类似iphone的滚轮来选择不同的的日期. 使用方法: 在页面中引入common.css.index.css和swiper-3.3.1.min.css样式文件,以及jquery.swiper-3.3.1.min.js.common.js文件. 下面是该手机端带农历的万年历插件的一些效果截图. 演示下载地址:http://www.datouwang.com/