原生js怎么遍历

原生JS遍历对象和数组的方法有哪些？

原生JavaScript遍历对象和数组的方法有：for循环、for…in、for…of、forEach、Object.keys()、Object.values()、Object.entries()。 其中，for循环是最基础和最灵活的方法，适用于数组和类数组对象。下面我们详细讲解一下for循环的用法。

for循环是一种最基础且直观的遍历方法。 它可以用于遍历数组、字符串、甚至是类数组对象。其基本语法为：

for (let i = 0; i < array.length; i++) {
  // 执行代码
}

在这个循环中，i 是一个计数器，从0开始，直到小于数组的长度。每次循环，计数器增加1。在循环体内，可以使用 array[i] 来访问数组的元素。

一、FOR循环

for循环是JavaScript中最基础且常用的遍历方法。它不仅适用于数组，还可以应用于字符串和类数组对象。其基本语法如下：

for (let i = 0; i < array.length; i++) {
  // 执行代码
}

1.1 数组遍历

for循环最常见的用法是遍历数组。以下是一个简单的示例：

let fruits = ['apple', 'banana', 'cherry'];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

在这个例子中，for循环从索引 0 开始，一直到数组的长度减一。每次循环，当前的数组元素都会被打印出来。

1.2 字符串遍历

for循环也可以用于字符串的遍历。以下是一个示例：

let name = 'JavaScript';
for (let i = 0; i < name.length; i++) {
  console.log(name[i]);
}

在这个例子中，for循环遍历了字符串 JavaScript 的每一个字符，并将其打印出来。

二、FOR…IN循环

for…in循环用于遍历对象的可枚举属性，包括从原型链继承的属性。其基本语法如下：

for (let key in object) {
  // 执行代码
}

2.1 对象遍历

for…in循环最常用于遍历对象的属性。以下是一个简单的示例：

let person = {
  name: 'John',
  age: 30,
  city: 'New York'
};
for (let key in person) {
  console.log(key + ': ' + person[key]);
}

在这个例子中，for…in循环遍历了对象 person 的所有属性，并将每个属性的键和值打印出来。

2.2 数组遍历

虽然for…in循环可以用于数组的遍历，但通常不推荐，因为它会遍历数组的所有可枚举属性，包括从原型链继承的属性。以下是一个示例：

let fruits = ['apple', 'banana', 'cherry'];
for (let index in fruits) {
  console.log(fruits[index]);
}

在这个例子中，for…in循环遍历了数组 fruits 的所有索引，并将每个元素打印出来。

三、FOR…OF循环

for…of循环用于遍历可迭代对象（如数组、字符串、Map和Set）。其基本语法如下：

for (let value of iterable) {
  // 执行代码
}

3.1 数组遍历

for…of循环最常用于遍历数组。以下是一个简单的示例：

let fruits = ['apple', 'banana', 'cherry'];
for (let fruit of fruits) {
  console.log(fruit);
}

在这个例子中，for…of循环遍历了数组 fruits 的每一个元素，并将其打印出来。

3.2 字符串遍历

for…of循环也可以用于字符串的遍历。以下是一个示例：

let name = 'JavaScript';
for (let char of name) {
  console.log(char);
}

在这个例子中，for…of循环遍历了字符串 JavaScript 的每一个字符，并将其打印出来。

四、forEach方法

forEach方法是数组的一个内置方法，用于遍历数组的每一个元素。其基本语法如下：

array.forEach(function(element, index, array) {
  // 执行代码
});

4.1 数组遍历

forEach方法最常用于遍历数组。以下是一个简单的示例：

let fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(function(fruit, index) {
  console.log(index + ': ' + fruit);
});

在这个例子中，forEach方法遍历了数组 fruits 的每一个元素，并将其索引和值打印出来。

4.2 高阶函数

forEach方法也是一种高阶函数，因为它接受一个函数作为参数。以下是一个示例：

let fruits = ['apple', 'banana', 'cherry'];
function logFruit(fruit, index) {
  console.log(index + ': ' + fruit);
}
fruits.forEach(logFruit);

在这个例子中，forEach方法接受了一个名为 logFruit 的函数作为参数，并对数组 fruits 的每一个元素调用了该函数。

五、Object.keys()、Object.values()和Object.entries()

这三个方法用于遍历对象的键、值和键值对。其基本语法如下：

Object.keys(object).forEach(function(key) {
  // 执行代码
});
Object.values(object).forEach(function(value) {
  // 执行代码
});
Object.entries(object).forEach(function([key, value]) {
  // 执行代码
});

5.1 Object.keys()

Object.keys()方法返回一个包含对象所有可枚举属性名的数组。以下是一个示例：

let person = {
  name: 'John',
  age: 30,
  city: 'New York'
};
Object.keys(person).forEach(function(key) {
  console.log(key + ': ' + person[key]);
});

在这个例子中，Object.keys()方法返回了对象 person 的所有键，并使用forEach方法遍历了每一个键。

5.2 Object.values()

Object.values()方法返回一个包含对象所有可枚举属性值的数组。以下是一个示例：

let person = {
  name: 'John',
  age: 30,
  city: 'New York'
};
Object.values(person).forEach(function(value) {
  console.log(value);
});

在这个例子中，Object.values()方法返回了对象 person 的所有值，并使用forEach方法遍历了每一个值。

5.3 Object.entries()

Object.entries()方法返回一个包含对象所有可枚举属性键值对的数组。以下是一个示例：

let person = {
  name: 'John',
  age: 30,
  city: 'New York'
};
Object.entries(person).forEach(function([key, value]) {
  console.log(key + ': ' + value);
});

在这个例子中，Object.entries()方法返回了对象 person 的所有键值对，并使用forEach方法遍历了每一个键值对。

六、Map和Set遍历

Map和Set是ES6引入的两种新的数据结构，它们都有自己的遍历方法。

6.1 Map遍历

Map是一种键值对的数据结构，其遍历方法有map.keys()、map.values()和map.entries()。以下是一个示例：

let map = new Map();
map.set('name', 'John');
map.set('age', 30);
map.forEach(function(value, key) {
  console.log(key + ': ' + value);
});

在这个例子中，forEach方法遍历了Map对象 map 的每一个键值对，并将其打印出来。

6.2 Set遍历

Set是一种不重复的值的集合，其遍历方法有set.keys()、set.values()和set.entries()。以下是一个示例：

let set = new Set(['apple', 'banana', 'cherry']);
set.forEach(function(value) {
  console.log(value);
});

在这个例子中，forEach方法遍历了Set对象 set 的每一个值，并将其打印出来。

七、NodeList和HTMLCollection遍历

NodeList和HTMLCollection是两种类数组对象，常见于DOM操作中。它们也可以使用for循环、for…of循环和forEach方法进行遍历。

7.1 NodeList遍历

NodeList是一种类数组对象，常见于 querySelectorAll 方法的返回值。以下是一个示例：

let elements = document.querySelectorAll('div');
elements.forEach(function(element) {
  console.log(element);
});

在这个例子中，forEach方法遍历了NodeList对象 elements 的每一个元素，并将其打印出来。

7.2 HTMLCollection遍历

HTMLCollection是一种类数组对象，常见于 getElementsByTagName 方法的返回值。以下是一个示例：

let elements = document.getElementsByTagName('div');
for (let i = 0; i < elements.length; i++) {
  console.log(elements[i]);
}

在这个例子中，for循环遍历了HTMLCollection对象 elements 的每一个元素，并将其打印出来。

八、总结

遍历是JavaScript中非常常见的操作，无论是数组、对象、字符串还是其他可迭代对象，都有多种方法可以使用。了解并掌握这些遍历方法，不仅可以提高代码的可读性和维护性，还可以在不同的场景中选择最合适的方法进行操作。

在实际项目中，选择合适的遍历方法非常重要。例如，如果需要遍历复杂的数据结构，可以考虑使用for...of循环或forEach方法。如果需要遍历对象的属性，可以使用for...in循环或Object.keys()等方法。而在处理大型项目时，选择合适的项目管理工具如研发项目管理系统PingCode和通用项目协作软件Worktile，也可以极大地提高工作效率和团队协作能力。