浅谈js中的in-for循环
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
[removed][removed]
</head>
<body>
<input type="checkbox" name="test" value="1"/><span>a</span>
<input type="checkbox" name="test" value="2"/><span>b</sp
在JavaScript中，`for...in`循环是一种遍历对象属性的机制，而非传统的数组循环方式。这个循环结构常用于迭代对象的所有可枚举属性，包括从原型链继承的属性。在给定的描述中，虽然没有直接使用`for...in`循环，但提到了一个与循环相关的函数`fun()`，它利用了`getElementsByName`方法来获取所有具有特定名称的HTML元素，然后通过`for`循环处理这些元素。这里我们将深入探讨`for...in`循环以及与之相关的JavaScript概念。
**1. for...in 循环：**
`for...in`循环的语法如下：
```javascript
for (变量 in 对象) {
// 执行的代码块
}
```
在这个结构中，`变量`将被赋值为对象的每一个可枚举属性名，依次执行循环体内的代码。例如，遍历一个对象的所有属性：
```javascript
let obj = {a: 1, b: 2, c: 3};
for (let prop in obj) {
console.log(prop + ": " + obj[prop]);
}
```
这将输出：
```
a: 1
b: 2
c: 3
```
**2. 可枚举属性：**
在JavaScript中，属性有两类，可枚举属性和不可枚举属性。`for...in`循环只遍历对象的可枚举属性，不包括不可枚举属性和Symbol属性。默认情况下，自定义属性是可枚举的，而内置属性（如数组的length）和方法（如数组的push）通常是不可枚举的。
**3. 原型链：**
在JavaScript中，每个对象都有一个隐式的原型（prototype），可以通过`__proto__`属性或`Object.getPrototypeOf()`方法访问。`for...in`循环不仅遍历对象自身的可枚举属性，还会遍历其原型链上的可枚举属性。如果你不希望遍历原型链上的属性，可以使用`hasOwnProperty()`方法进行过滤：
```javascript
for (let prop in obj) {
if (obj.hasOwnProperty(prop)) {
console.log(prop + ": " + obj[prop]);
}
}
```
**4. 示例代码分析：**
在给定的HTML和JavaScript代码中，`fun()`函数获取所有name为"test"的复选框元素，并通过常规的`for`循环检查哪些被选中。如果复选框被选中，它的值就会被添加到`check_val`数组中。这个例子并没有使用`for...in`循环，而是用了一个普通的索引循环，通过数组的索引`k`来访问元素。这种做法适用于处理DOM元素集合，而不是对象的属性。
总结来说，`for...in`循环是JavaScript中一种重要的遍历对象属性的工具，主要用于处理对象的可枚举属性。在实际编程中，我们应谨慎使用`for...in`，特别是在处理对象和数组时，因为它可能会涉及到原型链和不可枚举属性的问题。同时，理解并正确使用`hasOwnProperty()`方法能够帮助我们更好地控制循环行为，避免不必要的原型链遍历。
