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

ps：低版本不支持JSON.stringify、JSON.parse

👉👉👉JSON3库传送门：在线JSON兼容库

---

问题一：都知道，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 = '<ul>'
	for (item in myJSON) {
		html += '<li>'+item+' : '+myJSON[item]+'</li>';
	}
	html += '</ul>';
	
	document.getElementById('demo').innerHTML = html;
})();

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

问题二：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 = '<ul>'
	for (var i=0; i<arr_keys.length; i++) {
		html += '<li>'+arr_keys[i]+' : '+myJSON[arr_keys[i]]+'</li>';
	}
	html += '</ul>';
	
	document.getElementById('demo').innerHTML = html;
})();

IE9正常显示

IE8及以下报错

超兼容写法一：分割 “,” 与 “:” 形成二维数组（别忘了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 = '<ul>';
	for (var i=0; i < json_arr.length; i++) {
		//以':'分割数组，并获取各项值
		var k = json_arr[i].split(':')[0];
		var val = json_arr[i].split(':')[1];

		html += '<li>' + k + ' : ' + val +'</li>';
	}
	html += '</ul>';

	document.getElementById('demo').innerHTML = html;
})();

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

超兼容写法二：将 “:” 替换为 “,” ，再分别填入数组，根据长度相等特性，一同遍历打印（别忘了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 = '<ul>';
	//因为keys与values等长，所以遍历其中一个数组长度即可
	for (var j = 0; j < keys.length; j++) {
		html += '<li>' + keys[j] + ' : ' + values[j] + '</li>';
	}
	html += '<ul>';

	document.getElementById('demo').innerHTML = html;
})();

谨慎掉坑：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));
	}
})();

解决：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));
	}
})();