首页
Preview

JavaScript中的9种遍历方法

在JavaScript中,遍历数组、对象等数据结构是非常常见的操作。为了方便开发者操作数据,JavaScript提供了多种遍历方法。本文将介绍JavaScript中的多种遍历方法。

1. for循环

for循环是最基本、最常用的遍历方法。for循环通过设置计数器,来遍历数组或对象的每一个元素。

const arr = [1, 2, 3, 4, 5];
for(let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

const obj = {a: 1, b: 2, c: 3};
for(let key in obj) {
  console.log(key, obj[key]);
}

2. forEach方法

forEach方法是ES5新增的遍历方法,它可以遍历数组的每一个元素,对每一个元素执行回调函数。

const arr = [1, 2, 3, 4, 5];
arr.forEach((item) => {
  console.log(item);
});

3. map方法

map方法也是ES5新增的遍历方法,它可以遍历数组的每一个元素,对每一个元素执行回调函数,并将回调函数的返回值组成一个新的数组返回。

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((item) => {
  return item * 2;
});
console.log(newArr); // [2, 4, 6, 8, 10]

4. filter方法

filter方法也是ES5新增的遍历方法,它可以遍历数组的每一个元素,对每一个元素执行回调函数,并返回一个新的数组,该数组包含符合回调函数条件的元素。

const arr = [1, 2, 3, 4, 5];
const newArr = arr.filter((item) => {
  return item % 2 === 0;
});
console.log(newArr); // [2, 4]

5. reduce方法

reduce方法也是ES5新增的遍历方法,它可以遍历数组的每一个元素,对每一个元素执行回调函数,并返回一个累加值。

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((prev, cur) => {
  return prev + cur;
}, 0);
console.log(sum); // 15

6. for...of循环

for...of循环是ES6新增的遍历方法,它可以遍历数组、Set、Map等数据结构的每一个元素。

const arr = [1, 2, 3, 4, 5];
for(let item of arr) {
  console.log(item);
}

const set = new Set([1, 2, 3, 4, 5]);
for(let item of set) {
  console.log(item);
}

const map = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
for(let [key, value] of map) {
  console.log(key, value);
}

7. Object.keys方法

Object.keys方法可以获取对象的所有属性名,并返回一个数组。可以通过遍历该数组来遍历对象的属性。

const obj = {a: 1, b: 2, c: 3};
const keys = Object.keys(obj);
for(let key of keys) {
  console.log(key, obj[key]);
}

8. Object.values方法

Object.values方法可以获取对象的所有属性值,并返回一个数组。可以通过遍历该数组来遍历对象的属性值。

const obj = {a: 1, b: 2, c: 3};
const values = Object.values(obj);
for(let value of values) {
  console.log(value);
}

9. Object.entries方法

Object.entries方法可以获取对象的所有属性名和属性值,并返回一个二维数组。可以通过遍历该二维数组来遍历对象的属性名和属性值。

const obj = {a: 1, b: 2, c: 3};
const entries = Object.entries(obj);
for(let [key, value] of entries) {
  console.log(key, value);
}

以上就是JavaScript中的9种遍历方法。在实际开发中,可以根据具体需求选择合适的遍历方法。

版权声明:本文内容由TeHub注册用户自发贡献,版权归原作者所有,TeHub社区不拥有其著作权,亦不承担相应法律责任。 如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

点赞(0)
收藏(0)
炒鸡霸王龙
无喜无悲

评论(0)

添加评论