JavaScript》》JS》》ES6》》 foreach 、for in 、for of

在 C# 中,使用 foreach 循环时,不能直接修改值类型的实例。这是因为 foreach 循环的迭代变量是只读的,无法更改其成员。但JS中是可以更改的

foreach

forEach 是数组原型的方法,用于遍历数组元素,无法中断遍历(如使用 break 或 return)。

forEach 方法也是遍历数组的一种方式,它可以用来在每个数组元素上执行一些操作,例如,修改、删除、或执行其他操作等。forEach 方法的语法如下:

javascript 复制代码
//其中,currentValue 为当前遍历到的元素的值,index 为当前遍历到元素的下标,array 为操作的数组
array.forEach(function(currentValue, index, array) {
  // code
});
javascript 复制代码
let arr = [1, 2, 3, 4];

arr.forEach(function(item, index) {
  arr[index] = item * 2;
});

console.log(arr);
// [2, 4, 6, 8]

for of

for of 是 ES6 引入的遍历语法,支持可迭代对象(如数组、字符串、Map、Set),允许使用 break 或 continue 控制流程。

还可以使用解构语法来获取每个元素的完整内容

for...of 方法的语法如下:

javascript 复制代码
for (let [value] of array) {
  // code
}


// 
let arr = [1, 2, 3, 4];

for (let item of arr) {
  console.log(item);
}

//解构
let books = [
  {title: 'JavaScript1', author: 'A'},
  {title: 'JavaScript2', author: 'B'},
  {title: 'JavaScript3', author: 'C'}
];

for (let { title, author } of books) {
  console.log(title + '的作者是' + author);
}

注意:普通对象 {} 默认不是可迭代对象,不能直接使用 for...of。如果要用,可以使用 Object.keys(), Object.values() 或 Object.entries() 先将其转化为数组。

javascript 复制代码
// 对于对象,需要先获取其键、值或条目
const obj = { name: 'Alice', age: 30 };
for (const key of Object.keys(obj)) {
  console.log(key); // 输出:name, age
}
for (const value of Object.values(obj)) {
  console.log(value); // 输出:Alice, 30
}
javascript 复制代码
// 用于数组(不推荐的做法)
const arr = ['a', 'b', 'c'];
arr.customProperty = 'I am custom'; // 给数组添加一个自定义属性

for (const index in arr) {
  console.log(`Index: ${index}, Value: ${arr[index]}`);
}
// 输出:
// Index: 0, Value: a
// Index: 1, Value: b
// Index: 2, Value: c
// Index: customProperty, Value: I am custom (这就是问题所在!)

for in

遍历对象:for in

for in 用于遍历对象的可枚举属性(包括原型链上的属性),通常需要配合 hasOwnProperty 过滤。

javascript 复制代码
const obj = { a: 1, b: 2 };
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]); // 输出:a 1, b 2
  }
}

数组》》自定义属性

相关推荐
coding随想6 小时前
浏览器如何检测用户环境光变化:揭秘Ambient Light Events(环境光事件)
前端
ZSQA6 小时前
Hbuilder X cli项目使用本地的node执行编译。
前端
龙在天6 小时前
介绍一个🔥火热的React 应用状态管理库
前端
字节逆旅6 小时前
CodeBuddy+Figma+MCP,我指挥AI写代码,老板夸我鱼摸得好
前端·人工智能·mcp
满分观察网友z6 小时前
JavaScript 趣味编程:从基础循环到函数式,解锁打印三角形的 N 种姿势
前端
Null1556 小时前
前端ZIP处理:JSZip vs fflate 全方位对比,让你的文件操作效率翻倍!
前端
Mishi6 小时前
前端踩坑日记-sass-resources-loader在Windows上遇到的问题
前端
Jacob02347 小时前
为什么现代 JavaScript 开发者正在远离回调与框架?
前端·javascript·前端框架
ZXT7 小时前
依赖管理
前端