`

关于IE,Chrome,Firefox浏览器的字符串拼接问题

阅读更多

昨天项目测试的时候,IE8、IE11测试勾选checkbox然后执行保存的时候,竟然执行的结果与预期相反,吓屎我了,最终排查之下,原来是拼接checkbox的值的时候出现的问题。本人对js了解知之甚少,用的不多,最近几个项目都是大批的js,遇到各种小白问题,没办法只好慢慢学了。

HTML:

<input type="checkbox" name="test" value="1"/><span>1</span>
<input type="checkbox" name="test" value="2"/><span>2</span>
<input type="checkbox" name="test" value="3"/><span>3</span>
<input type="checkbox" name="test" value="4"/><span>4</span>
<input type="checkbox" name="test" value="5"/><span>5</span><br>
<input type='button' value='提交' onclick="fun()"/></span>

原js代码:

var obj = document.getElementsByName("test");
check_val = [];
for(k in obj){
     if(obj[k].checked){
          check_val.push(obj[k].value);
    }
}
alert(check_val.length);

勾选1和2之后的执行结果:IE弹出0,Chrome和Firefox弹出2;

难道是IE不支持push()?

修改如下的js:

var obj = document.getElementsByName("test");
var s='';
for(k in obj){
      if(obj[k].checked){
	  s+=obj[k].value+',';
	}		
}
alert("s"+s);

勾选1和2之后的执行结果:IE弹出s,Chrome和Firefox弹出s1,2,;

真奇怪,怎么IE又闹特别了呢?好吧,继续改

再次修改之后的js:

var obj = document.getElementsByName("test");
var s='';
for(k=0;k<obj.length;k++){
	if(obj[k].checked){
	  s+=obj[k].value+',';
	}		
}
alert("s"+s);</span>

勾选1和2之后的执行结果:三个浏览器一致的弹出s1,2,

总结一下吧

1.for...in 遍历的不是数组而是对象,所以他遍历访问的是obj的每个属性,而不是数组元素;

2.for....in循环的效率低于for循环;

3.IE貌似不是很好的支持push() [研究ing..........];

4.有待再发现....

 

分享到:
评论

相关推荐

    字符串拼接-不同方式下的性能问题纠错1

    然而,随着浏览器技术的发展,尤其是从IE8开始,现代浏览器(包括Chrome、Firefox、Safari、Edge等)对垃圾回收机制进行了优化,并且对`+`运算符连接字符串进行了特殊处理,使得这种方式在大多数情况下性能已经超过...

    探讨js字符串数组拼接的性能问题

    为了解决这个问题,开发人员开始采用数组的`join`方法来优化字符串拼接。 数组对象提供了一种更高效的方式来组合字符串。例如,我们可以预先创建一个空数组`buffer`,然后通过索引直接添加元素(如`buffer[i++] = ...

    javascript string字符串优化问题

    2. 测试结果:在一些浏览器(如IE9, IE8, Firefox, Google Chrome, 搜狗等基于IE核心的浏览器)上进行测试后发现,当循环次数达到100,000次以上时,使用+号拼接字符串的方法反而比使用数组的concat方法要快。...

    再论Javascript下字符串连接的性能

    然而,在新版的IE8以及Firefox 3.6、Chrome 4、Safari 4.0.5和Opera 10.50中,情况发生了变化。特别是在IE8中,字符串连接运算符的性能显著提升,甚至超过了数组方法。在Chrome浏览器中,也有类似的现象,即在某些...

    IE8的JavaScript点击事件(onclick)不兼容的解决方法

    在标准模式下,IE8及以下版本不支持通过`setAttribute`直接为元素添加事件监听器,这与现代浏览器如Chrome和Firefox存在差异。为了确保兼容性,通常推荐使用`addEventListener`方法为元素添加事件监听器,但由于IE8...

    js改变img标签的src属性在IE下没反应的解决方法

    在Chrome、Firefox等现代浏览器中,通过`document.getElementById`获取元素并直接设置`src`属性的新值,通常能够正常工作,图片会按预期加载。但在IE中,尤其是IE8及以下版本,由于浏览器的实现机制不同,可能会出现...

    重新封装的JQuery获取浏览器信息的代码

    通过正则表达式匹配的方式,依次检查字符串中是否包含Internet Explorer、Firefox、Chrome、Opera或Safari的相关信息,并存储到对应的属性中。 - **`BROWSER.ShowString`函数**:此函数的作用是根据`BROWSER.SYS`...

    浏览器解析js生成的html出现样式问题的解决方法

    1. 浏览器解析差异问题:作者在使用Chrome、IE和Firefox三种不同的浏览器中发现了样式的差异,这表明不同浏览器对HTML和CSS的解析可能存在差异,这通常被称为“浏览器兼容性问题”。了解各种主流浏览器之间的细微...

    JavaScript的兼容性与调试技巧

    然而,由于不同的浏览器(如Chrome、Firefox、IE等)对JavaScript的实现存在差异,导致开发者经常会遇到兼容性问题。这篇文章将探讨如何处理JavaScript的兼容性问题以及常用的调试技巧。 首先,要解决JavaScript的...

    浅析IE浏览器关于ajax的缓存机制

    Ajax的核心是使用XMLHttpRequest对象,这是IE7+、Firefox、Chrome、Opera和Safari等现代浏览器所支持的。对于IE6和IE5浏览器,需要使用ActiveXObject来创建XMLHttpRequest对象。 在创建了XMLHttpRequest对象后,...

    js实现数据导出为EXCEL(支持大量数据导出)

    但这种方法仅限于IE,并不适用于其他浏览器,如Chrome、Firefox等。 3. **HTML Table导出** - 一种常见方法是将数据转化为HTML表格,然后利用浏览器的默认行为让用户选择打印或保存为.xls文件。这种方式简单,但当...

    javascript控制在光标位置插入文字适合表情的插入

    而在不支持document.selection的浏览器(如Firefox,Chrome等),则需要利用selectionStart和selectionEnd属性来获取选区的起始和结束位置,并通过字符串拼接的方式来实现插入。 以下是详细步骤说明: 1. 获取...

    【JavaScript源代码】JavaScript CollectGarbage函数案例详解.docx

    在现代浏览器中,比如Chrome、Firefox或Safari,它们遵循不同的垃圾回收策略,不提供类似的功能。这些浏览器通常使用更先进的垃圾回收算法,如标记-清除、分代收集等,它们能更有效地管理内存,无需开发者手动干预。...

    jQuery插件 文本框、文本域 光标处插入代码

    5. **兼容性**:考虑到不同的浏览器可能有不同的实现,插件需要确保在主流浏览器上都能正常工作,比如Chrome、Firefox、Safari和IE。 6. **用户界面**:可能还需要提供一个友好的用户界面,让用户可以方便地选择...

    JQuery在光标位置插入内容的实现代码

    而在Firefox以及其他基于Webkit内核(如Chrome和Safari)的浏览器中,我们需要获取光标的位置,通过操作`value`属性进行字符串的拼接。 以下是JQuery扩展插件的一个示例,它实现了在光标位置插入内容的功能: ```...

    浅谈jquery的html方法里包含特殊字符的处理

    这段代码在Chrome和Firefox中可能正常工作,但在IE8中因为`'`未转义导致错误。修正后的代码应将`'`转义为`'`,如下所示: ```javascript inst_html = "&lt;a style=color:white' onmouseover = '"; inst_...

    js实现在文本框光标处添加字符的方法介绍

    然而,这种方法仅适用于IE浏览器,因为它依赖于`document.selection`和`Range`对象,这些在其他浏览器如Firefox、Chrome或Safari中并不支持。 对于非IE浏览器,我们可以使用`setSelectionRange`和`getSelection()`...

    ppk on Javascript (pdf)

    1. **主流浏览器介绍**:包括IE、Firefox、Chrome等浏览器的特点及其支持的特性。 2. **浏览器兼容性问题**:探讨不同浏览器之间的差异,以及如何解决这些兼容性问题。 3. **对象检测**:介绍如何通过JavaScript...

    51testing软件测试web开发课堂笔记

    - 字符串拼接使用`.`符号。 - 每条语句以`;`结束。 - **获取表单数据**: - 使用GET和POST方法接收前端表单数据。 - **HTTP请求方式**: - GET请求通常用于获取信息,数据不包含在请求体中。 - POST请求用于提交...

Global site tag (gtag.js) - Google Analytics