js数组对象的遍历

js 数组对象的遍历

// 数组遍历方法

var arr = [{ code: 10 }, { value: 100 }, { name: "大乔" }, { age: "18" }];

// 1. for...of 循环
console.log("for...of 循环：");
for (let item of arr) {
  console.log(item);
}
/* 输出结果：
{ code: 10 }
{ value: 100 }
{ name: '大乔' }
{ age: '18' }
*/

// 2. forEach 方法
console.log("forEach 方法：");
arr.forEach((item) => {
  console.log(item);
});
/* 输出结果：
{ code: 10 }
{ value: 100 }
{ name: '大乔' }
{ age: '18' }
*/

// 3. map 方法
console.log("map 方法：");
const mappedArr = arr.map((item) => {
  console.log(item);
  return item;
});
/* 输出结果：
{ code: 10 }
{ value: 100 }
{ name: '大乔' }
{ age: '18' }
*/

// 4. for 循环
console.log("for 循环：");
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
/* 输出结果：
{ code: 10 }
{ value: 100 }
{ name: '大乔' }
{ age: '18' }
*/

// 对象遍历方法

var obj = { code: 10, value: 100, name: "大乔", age: "18" };

// 1. for...in 循环
console.log("for...in 循环：");
for (let key in obj) {
  console.log(key + ": " + obj[key]);
}
/* 输出结果：
code: 10
value: 100
name: 大乔
age: 18
*/

// 2. Object.keys 方法
console.log("Object.keys 方法：");
Object.keys(obj).forEach((key) => {
  console.log(key + ": " + obj[key]);
});
/* 输出结果：
code: 10
value: 100
name: 大乔
age: 18
*/

// 3. Object.values 方法
console.log("Object.values 方法：");
Object.values(obj).forEach((value) => {
  console.log(value);
});
/* 输出结果：
10
100
大乔
18
*/

// 4. Object.entries 方法
console.log("Object.entries 方法：");
Object.entries(obj).forEach(([key, value]) => {
  console.log(key + ": " + value);
});
/* 输出结果：
code: 10
value: 100
name: 大乔
age: 18
*/

// 5. 升级版 foreach
Array.prototype.forEach.call(arr, (item) => {
  console.log("升级版", item);
});
/**
升级版 { code: 10 }
升级版 { value: 100 }
升级版 { name: '大乔' }
升级版 { age: '18' }
 */