JavaScript For In语句
JavaScript基础 2022-04-25 01:33:46小码哥的IT人生shichen
JavaScript For In
For In 循环
JavaScript for in 语句循环遍历对象的属性：
语法
for (key in object) {
// code block to be executed
}
示例代码：
const person = {fname:"Bill", lname:"Gates", age:25};
let text = "";
for (let x in person) {
text += person[x];
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For In Loop</h2>
<p>for in 语句循环遍历对象的属性：</p>
<p id="demo"></p>
<script>
const person = {fname:"Bill", lname:"Gates", age:19};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
运行结果：
Javascript For In Loop for in 语句循环遍历对象的属性： Bill Gates 19
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子解释
- for in 循环遍历 person 对象
- 每次迭代返回一个键 (x)
- 键用于访问键的值
- 键的值为 person[x]
For In 遍历数组
JavaScript for in 语句也可以遍历数组的属性：
语法
for (variable in array) {
code
}
示例代码：
const numbers = [45, 4, 9, 16, 25];
let txt = "";
for (let x in numbers) {
txt += numbers[x];
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For In</h2>
<p>for in 语句可以遍历数组值：</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
for (let x in numbers) {
txt += numbers[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
运行结果：
Javascript For In for in 语句可以遍历数组值： 45 4 9 16 25
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如果索引顺序很重要，请不要在数组上使用 for in。
索引顺序依赖于实现，可能不会按照您期望的顺序访问数组值。
当顺序很重要时，最好使用 for 循环、for of 循环或 Array.forEach()。
Array.forEach()
forEach() 方法为每个数组元素调用一次函数（回调函数）。
示例代码：
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.forEach()</h2>
<p>为每个数组元素调用一次函数。</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array) {
txt += value + "<br>";
}
</script>
</body>
</html>
运行结果：
Javascript Array.forEach() 为每个数组元素调用一次函数。 45 4 9 16 25
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
请注意，该函数采用 3 个参数：
- 项目值
- 项目索引
- 数组本身
上面的例子仅使用 value 参数。可以改写为：
示例代码：
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.forEach()</h2>
<p>为每个数组元素调用一次函数。</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value) {
txt += value + "<br>";
}
</script>
</body>
</html>
运行结果：
Javascript Array.forEach() 为每个数组元素调用一次函数。 45 4 9 16 25
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
