【IE不支持for...in / Object.keys、Object.values、字符串索引undefined】兼容IE的对象(字典)遍历

ps:低版本不支持JSON.stringifyJSON.parse

JSON3库传送门:在线JSON兼容库

文章目录

  • 问题一:都知道,IE对for...in语法并不支持,强行使用便会产生各种问题
    • IE11~9会出现以下格式,IE8及以下直接报错不支持
  • 问题二:IE8及以下版本不支持Object.keys、IE全版本都不支持Object.values
    • IE9正常显示
    • IE8及以下报错
  • 超兼容写法一:分割 "," 与 ":" 形成二维数组(别忘了JSON3库)
  • ====================>方法二冗余繁杂不推荐,仅供思路参考
  • 超兼容写法二:将 ":" 替换为 "," ,再分别填入数组,根据长度相等特性,一同遍历打印(别忘了JSON3库)
    • 谨慎掉坑:IE7及以下版本,字符串无法通过数组索引获取每个字符
      • 问题:undefined
      • 解决:str[i] ==> charAt(i)

问题一:都知道,IE对for…in语法并不支持,强行使用便会产生各种问题

(function() {
	var obj = {
		key1 : 'val1',
		key2 : 'val2',
		key3 : 'val3'
	}
	
	//转换为JSON格式的字符串
	var json_str = JSON.stringify(obj);
	
	//转换为JSON格式
	var myJSON = JSON.parse(json_str);
	
	//使用for...in遍历
	var html = '
    ' for (item in myJSON) { html += '
  • '+item+' : '+myJSON[item]+'
  • '
    ; } html += '
'
; document.getElementById('demo').innerHTML = html; })();

IE11~9会出现以下格式,IE8及以下直接报错不支持

【IE不支持for...in / Object.keys、Object.values、字符串索引undefined】兼容IE的对象(字典)遍历_第1张图片

问题二:IE8及以下版本不支持Object.keys、IE全版本都不支持Object.values

若不考虑 IE8 及以下版本的兼容问题,可使用Object.keys+for…length

(function() {
	var obj = {
		key1 : 'val1',
		key2 : 'val2',
		key3 : 'val3'
	}
	
	//转换为JSON格式的字符串
	var json_str = JSON.stringify(obj);
	
	//转换为JSON格式
	var myJSON = JSON.parse(json_str);
	
	//获取所有key
	var arr_keys = Object.keys(obj);
	
	//通过key遍历对应value(IE不支持for...in遍历)
	var html = '
    ' for (var i=0; i<arr_keys.length; i++) { html += '
  • '+arr_keys[i]+' : '+myJSON[arr_keys[i]]+'
  • '
    ; } html += '
'
; document.getElementById('demo').innerHTML = html; })();

IE9正常显示

【IE不支持for...in / Object.keys、Object.values、字符串索引undefined】兼容IE的对象(字典)遍历_第2张图片

IE8及以下报错

【IE不支持for...in / Object.keys、Object.values、字符串索引undefined】兼容IE的对象(字典)遍历_第3张图片

超兼容写法一:分割 “,” 与 “:” 形成二维数组(别忘了JSON3库)

(function() {
	var obj = {
		key1 : 'val1',
		key2 : 'val2',
		key3 : 'val3'
	}
	
	//转换为JSON格式的字符串,并移除双引号(先split成数组,再join成字符串)
	var json_str = JSON.stringify(obj).split('"').join('');

	//移除花括号,并以','分割数组
	var json_arr = json_str.substring(1, json_str.length-1).split(',');

	var html = '
    '; for (var i=0; i < json_arr.length; i++) { //以':'分割数组,并获取各项值 var k = json_arr[i].split(':')[0]; var val = json_arr[i].split(':')[1]; html += '
  • ' + k + ' : ' + val +'
  • '
    ; } html += '
'
; document.getElementById('demo').innerHTML = html; })();

【IE不支持for...in / Object.keys、Object.values、字符串索引undefined】兼容IE的对象(字典)遍历_第4张图片

====================>方法二冗余繁杂不推荐,仅供思路参考

超兼容写法二:将 “:” 替换为 “,” ,再分别填入数组,根据长度相等特性,一同遍历打印(别忘了JSON3库)

(function() {
	var obj = {
		key1 : 'val1',
		key2 : 'val2',
		key3 : 'val3'
	}
	
	//转换为JSON格式的字符串,并移除双引号(先split成数组,再join成字符串)
	var json_str = JSON.stringify(obj).split('"').join('');

	//定义一个空字符串
	var str='';

	//遍历重写字符串,替换冒号,移除花括号
	for (var n = 0; n < json_str.length; n++) {

		//注意:字符串在早期IE版本中不支持数组方式索引,不能写为str[i],应为str.charAt(i)

		//替换':'为','
		if (json_str.charAt(n) === ':') {
			//str += ',';
			str += json_str.charAt(n).replace(':', ',');

		//移除花括号
		} else if (json_str.charAt(n) === '{' || json_str.charAt(n) === '}') {
			str += '';
		
		//添加入字符串
		} else {
			str += json_str.charAt(n);
		}
	}

	//以','分割数组
	var arr = str.split(',');

	//分别定义用于存储key与value的空数组,并通过遍历填充
	var keys = [];
	var values = [];
	for (var i = 0; i < arr.length; i++) {
	
		//余为0则为偶数,即key
		if (i%2 === 0) {
			keys.push(arr[i]);
	
		//余不为0则为奇数,即value
		} else {
			values.push(arr[i]);
		}
	}

	var html = '
    '; //因为keys与values等长,所以遍历其中一个数组长度即可 for (var j = 0; j < keys.length; j++) { html += '
  • ' + keys[j] + ' : ' + values[j] + '
  • '
    ; } html += '
      '; document.getElementById('demo').innerHTML = html; })();

【IE不支持for...in / Object.keys、Object.values、字符串索引undefined】兼容IE的对象(字典)遍历_第5张图片

谨慎掉坑:IE7及以下版本,字符串无法通过数组索引获取每个字符

问题:undefined

(function() {
	var str = 'Hello World';

	//IE7即以下,遍历数组,枚举会出现 undefined
	for (var i = 0; i < str.length; i++) {
		console.log(str[i]);
		//console.log(str.charAt(i));
	}
})();

【IE不支持for...in / Object.keys、Object.values、字符串索引undefined】兼容IE的对象(字典)遍历_第6张图片
【IE不支持for...in / Object.keys、Object.values、字符串索引undefined】兼容IE的对象(字典)遍历_第7张图片

解决:str[i] ==> charAt(i)

(function() {
	var str = 'Hello World';

	//IE7即以下,遍历数组,枚举会出现 undefined
	for (var i = 0; i < str.length; i++) {
		//console.log(str[i]);
		console.log(str.charAt(i));
	}
})();

【IE不支持for...in / Object.keys、Object.values、字符串索引undefined】兼容IE的对象(字典)遍历_第8张图片

你可能感兴趣的:(ie,兼容性问题积累)