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

数组》》自定义属性

相关推荐
木斯佳几秒前
前端八股文面经大全: 美团财务科技前端一面 (2026-04-09)·面经深度解析
前端·实习面经·前端初级
天外天-亮1 分钟前
Vue2.0 + jsmind:开发思维导图
javascript·vue.js·jsmind
LIO4 分钟前
React 零基础入门,一篇搞懂核心用法(适合新手)
前端·react.js
TeamDev18 分钟前
JxBrowser 8.18.2 版本发布啦!
java·前端·跨平台·桌面应用·web ui·jxbrowser·浏览器控件
netkiller-BG7NYT19 分钟前
yoloutils - Openclaw Agent Skill
前端·webpack·node.js
北城笑笑23 分钟前
FPGA 51,基于 ZYNQ 7Z010 的 FPGA 高速路由转发加速系统架构设计(Xilinx ZYNQ-MINI 7Z010 CLG400 -1)
前端·fpga开发·系统架构·fpga
蜡台27 分钟前
JavaScript async和awiat 使用
开发语言·前端·javascript·async·await
tzy23330 分钟前
AI 对话的流式输出详解——不止于SSE
javascript·ai·llm·sse·readablestream
挖稀泥的工人32 分钟前
能够插入 DOM 的输入框
前端·javascript·vue.js
xiaotao13135 分钟前
第十五章:企业级部署方案
前端·vite·前端打包