JS数组与对象的遍历方法大全
2025-04-23 23:45
PHP
113
0
0
0
标题录入
封面图
在 JavaScript 中,数组和对象都有多种遍历方式。以下是常见的遍历方法: ### 一、数组的遍历方法 1. **`for` 循环** ```javascript const arr = [1, 2, 3, 4]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } ``` 2. **`for...of` 循环** ```javascript const arr = [1, 2, 3, 4]; for (const item of arr) { console.log(item); } ``` 3. **`forEach` 方法** ```javascript const arr = [1, 2, 3, 4]; arr.forEach((item) => { console.log(item); }); ``` 4. **`map` 方法** ```javascript const arr = [1, 2, 3, 4]; const newArr = arr.map((item) => item * 2); console.log(newArr); // [2, 4, 6, 8] ``` 5. **`filter` 方法** ```javascript const arr = [1, 2, 3, 4]; const filteredArr = arr.filter((item) => item > 2); console.log(filteredArr); // [3, 4] ``` 6. **`reduce` 方法** ```javascript const arr = [1, 2, 3, 4]; const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // 10 ``` 7. **`every` 方法** ```javascript const arr = [1, 2, 3, 4]; const allEven = arr.every((item) => item % 2 === 0); console.log(allEven); // false ``` 8. **`some` 方法** ```javascript const arr = [1, 2, 3, 4]; const hasEven = arr.some((item) => item % 2 === 0); console.log(hasEven); // true ``` 9. **`find` 方法** ```javascript const arr = [1, 2, 3, 4]; const foundItem = arr.find((item) => item > 2); console.log(foundItem); // 3 ``` 10. **`keys` 和 `values` 遍历** ```javascript const arr = [1, 2, 3, 4]; for (const key of arr.keys()) { console.log(key); // 0, 1, 2, 3 } for (const value of arr.values()) { console.log(value); // 1, 2, 3, 4 } ``` 11. **`entries` 遍历** ```javascript const arr = [1, 2, 3, 4]; for (const [index, value] of arr.entries()) { console.log(index, value); // 0 1, 1 2, 2 3, 3 4 } ``` --- ### 二、对象的遍历方法 1. **`for...in` 循环** ```javascript const obj = { a: 1, b: 2, c: 3 }; for (const key in obj) { if (obj.hasOwnProperty(key)) { console.log(key, obj[key]); // "a" 1, "b" 2, "c" 3 } } ``` 2. **`Object.keys`** ```javascript const obj = { a: 1, b: 2, c: 3 }; Object.keys(obj).forEach((key) => { console.log(key, obj[key]); // "a" 1, "b" 2, "c" 3 }); ``` 3. **`Object.values`** ```javascript const obj = { a: 1, b: 2, c: 3 }; Object.values(obj).forEach((value) => { console.log(value); // 1, 2, 3 }); ``` 4. **`Object.entries`** ```javascript const obj = { a: 1, b: 2, c: 3 }; Object.entries(obj).forEach(([key, value]) => { console.log(key, value); // "a" 1, "b" 2, "c" 3 }); ``` 5. **`for...of` 循环配合 `Object.entries`** ```javascript const obj = { a: 1, b: 2, c: 3 }; for (const [key, value] of Object.entries(obj)) { console.log(key, value); // "a" 1, "b" 2, "c" 3 } ``` 6. **`Object.getOwnPropertyNames`** ```javascript const obj = { a: 1, b: 2, c: 3 }; Object.getOwnPropertyNames(obj).forEach((key) => { console.log(key, obj[key]); // "a" 1, "b" 2, "c" 3 }); ``` 7. **`Object.assign` 和扩展运算符** ```javascript const obj = { a: 1, b: 2, c: 3 }; const newObj = { ...obj }; for (const key in newObj) { console.log(key, newObj[key]); // "a" 1, "b" 2, "c" 3 } ``` --- ### 总结 - 数组的遍历方法更侧重于功能性(如 `map`, `filter`, `reduce` 等)。 - 对象的遍历方法更灵活,可以根据需要选择遍历键值对或只遍历键。 根据具体需求选择合适的遍历方法,可以提高代码的可读性和性能。
上一篇:
js数组的操作
下一篇:
json数组对象和对象数组
标题录入,一次不能超过6条
勇气是什么?个人勇气如何掌握?
T:0.008623s,M:247.23 KB
返回顶部
留言
留言
评论