JS for in 循环中的key ,value 详解。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS for in 循环中的key ,value 详解。相关的知识，希望对你有一定的参考价值。
for in 循环中的key ，key一般指的是什么，遇到radio后，key又是什么？
<input type="radio" value="radio" id="radio"/>
<script>
function fn()
this.aa = "obj1";
this.bb = "obj2";
var json = "aa":"json1","bb":"json2";
var obj = new fn();
var radio = document.getElementById("radio");
console.log("-------------json----------------");
for(var key in json)
console.log(key+"--"+json[key]);
console.log("-------------new obj----------------");
for(key in obj)
console.log(key+"--"+obj[key]);
console.log("-------------document----------------");
for(key in radio)
console.log(key+"--"+radio[key]);
</script>
从上面例子中可以看出：
1、 for in 可以遍历自己定义的json对象 ，和自己new的函数对象。
2、for in 不能遍历页面节点对象，但是把radio换成遍历document不会报错。
3、不建议用for in来遍历节点对象，因为不是所有节点对象属性都支持in运算符的访问。
参考技术A for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。实例
for...in 语句
如何使用 for...in 语句来遍历数组内的元素。
javascript for...in 语句
for...in 语句用于对数组或者对象的属性进行循环操作。
for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。
语法：
for (变量 in 对象)
在此执行代码
“变量”用来指定变量，指定的变量可以是数组元素，也可以是对象的属性。
实例：
使用 for ... in 循环遍历数组。
<html>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
document.write(mycars[x] + "<br />")
</script>
</body>
</html>
ES6: for...of VS for...in
for...of和for...in是js中常用的两个遍历的方法，但是它们遍历是有区别的，最主要的区别就是：
（1）for...of是遍历key, value中的value即键值，for...of一般是forEach的替代方法。
for...in是遍历key, value中的key即键名，而key一般就是索引index的作用，所以记忆的话in可以对应index，for...in是遍历index的，这样可以很容易区分出for..of和for..in。
（2）for...of循环可以使用的范围包括数组、Set和Map结构、某些类似数组的对象（比如arguments对象、DOM NodeList对象）、Generator对象，以及字符串。
（3）for...of是ES6提供的方法，for...in是js原生的方法
（4） for..of不能遍历普通对象而for..in能遍历普通对象
var es6 = {
edition: 6,
committee: "TC39",
standard: "ECMA-262"
};
for (e in es6) {
console.log(e);
}
// edition
// committee
// standard
for (e of es6) {
console.log(e);
}
// TypeError: es6 is not iterable
（5）for...in和for...of遍历过程中可以用break，return，其他的遍历方法不能用这两个关键字
var es6 = {
edition: 6,
committee: "TC39",
standard: "ECMA-262"
};
for (e in es6) {
if(e == ‘committee‘) {
break;
} else {
console.log(e);
}
}
//edition
var arr1 = [1,2,3,4];
for(value of arr1){
if(value == 3) {
break;
}else{
console.log(value)
}
}
// 1
// 2
（6）for...in循环有几个缺点
- 数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
- for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
- 某些情况下，for...in循环会以任意顺序遍历键名。
总之，for...in循环主要是为遍历对象而设计的，不适用于遍历数组。
（7）for...of的优点
- 有着同for...in一样的简洁语法，但是没有for...in那些缺点。
- 不同用于forEach方法，它可以与break、continue和return配合使用。
- 提供了遍历所有数据结构的统一操作接口。
以上是关于JS for in 循环中的key ,value 详解。的主要内容，如果未能解决你的问题，请参考以下文章