JavaScript 循环遍历: for in/for of/forEach 的使用

1.for in

遍历时的 key 值为数组的索引,所有要用其值的时候需要 Arr[key]获取他的值

let lessons = [
	{title: '媒体查询响应式布局',category: 'css'},
  {title: 'FLEX 弹性盒模型',category: 'css'},
	{title: 'MYSQL多表查询随意操作',category: 'mysql'}
];

for (const key in lessons) {
	console.log('key',key)
    console.log(`标题: ${lessons[key].title}`);
}

2.for of

for/of 每次循环取其中的值而不是索引

let lessons = [
	{title: '媒体查询响应式布局',category: 'css'},
  {title: 'FLEX 弹性盒模型',category: 'css'},
	{title: 'MYSQL多表查询随意操作',category: 'mysql'}
];

for (const item of lessons) {
  console.log('item',item);
  console.log(`
    标题: ${item.title}
    栏目: ${item.category == "css" ? "前端" : "数据库"}
  `);
}

3.forEach

forEach使函数作用在每个数组元素上，但是没有返回值。
下面例子是截取标签的2个字符。

let lessons = [
	{title: '媒体查询响应式布局',category: 'css'},
  {title: 'FLEX 弹性盒模型',category: 'css'},
	{title: 'MYSQL多表查询随意操作',category: 'mysql'}
];

lessons.forEach((item, index, array) => {
    item.title = item.title.substr(0, 5);
});
console.log(lessons);

对于值类型的数组，还是需要用其索引改变他的值

let arr=[1,2,3,4,5]

arr.forEach((val,index)=>{
   arr[index]*=10
})
console.log(arr);//[10, 20, 30, 40, 50]

//对于值类型的数组，还是需要用其索引改变他的值
let arr=[1,2,3,4,5]
let arr1= arr.forEach((val,index)=>{
   val*=10
   console.log(val);//10.20,30,40,50
})
console.log(arr);//(5) [1, 2, 3, 4, 5]

注意：如果要改变数组里面的值，要分辩其是引用类型还是值类型，如果是引用类型（如数组，对象），就可以直接对这个值进行操作，如果是值类型，就需要arr[index]对这个值进行操作