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
  }
}

数组》》自定义属性

相关推荐
wefly201710 分钟前
m3u8live.cn 在线M3U8播放器,免安装高效验流排错
前端·后端·python·音视频·前端开发工具
C澒42 分钟前
微前端容器标准化 —— 公共能力篇:通用打印
前端·架构
德育处主任Pro1 小时前
前端元素转图片,dom-to-image-more入门教程
前端·javascript·vue.js
木斯佳1 小时前
前端八股文面经大全:小红书前端一二面OC(下)·(2026-03-17)·面经深度解析
前端·vue3·proxy·八股·响应式
陈天伟教授1 小时前
人工智能应用- 预测新冠病毒传染性:04. 中国:强力措施遏制疫情
前端·人工智能·安全·xss·csrf
叫我一声阿雷吧1 小时前
JS 入门通关手册(23):JS 异步编程:回调函数与异步本质
javascript·es6·前端面试·回调函数·回调地狱·js异步编程·异步本质
zayzy2 小时前
前端八股总结
开发语言·前端·javascript
今天减肥吗2 小时前
前端面试题
开发语言·前端·javascript
Rabbit_QL2 小时前
【前端UI行话】前端 UI 术语速查表
前端·ui·状态模式
小码哥_常2 小时前
一文带你吃透Android BLE蓝牙开发全流程
前端