JS数组遍历的几种方法

一、使用for循环遍历数组


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

使用for循环遍历数组是最基本的方法。通过设置循环的初始值和循环条件来遍历数组中的元素。每次循环，我们都会访问下一个元素。

for循环还可以倒序遍历数组。这是因为我们只需要修改循环的初始值和循环条件，使它们反向即可。


for (let i = arr.length - 1; i >= 0; i--) {
  console.log(arr[i]);
}

二、使用forEach遍历数组


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

forEach方法是一个数组的函数方法，它将数组中的每个元素传递给回调函数，并依次执行回调函数。它在每个元素上运行回调函数，但它不返回新数组。回调函数的参数包括元素的值、元素的索引和数组本身。

和for循环不同，forEach方法不能跳过或者停止循环，但它在代码可读性上却非常友好。

三、使用map遍历数组并返回新数组


const arr = [1, 2, 3, 4];
const newArray = arr.map(function(item) {
  return item * 2;
});
console.log(newArray);

和forEach方法类似，map方法也是一个数组的函数方法。它将元素传递给回调函数，允许我们修改元素值，最后返回一个新的数组。

map方法最有用处的地方在于不改变原数组。如果需要对原数组进行改变，使用数组的forEach方法或者for循环会更合适。

四、使用for-in遍历数组


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

for-in循环通常用于枚举对象。但是它也可以枚举数组，它会枚举数组元素和属性（包括非数字属性）。如果只是想遍历数组，for-in循环并不是最好的选择。

五、使用for-of遍历数组


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

for-of循环是ES6引入的，它是一种用于遍历可迭代对象的循环，包括数组、字符串、Set和Map等。for-of循环提供了一种更简洁、更简单的语法来遍历数组。

六、使用while循环遍历数组


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

while循环和for循环一样，也可以用于遍历数组。只要设置好退出循环的条件，使用while循环遍历数组同样可行。

七、遍历字符串并转换为数组


const str = 'hello world';
const arr = str.split('');
for (let item of arr) {
  console.log(item.toUpperCase());
}

当需要遍历字符串时，我们可以使用JavaScript的split()方法将它转换为数组，然后使用for-of循环来遍历每一个单独的字符。在这个示例中，我们把字符串中的所有字符转换为大写的形式。

八、使用Array.from()将类数组转换为数组并遍历


const obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};
const arr = Array.from(obj);
for (let item of arr) {
  console.log(item);
}

有些时候，我们需要遍历类数组。虽然类数组不是真正的JavaScript数组形式，但是可以使用Array.from()方法将它转换为真正的JavaScript数组。

九、使用reduce()方法遍历数组并计算元素总和


const arr = [1, 2, 3, 4];
const sum = arr.reduce(function(prev, curr) {
  return prev + curr;
}, 0);
console.log(sum);

reduce()方法也是一个数组的函数方法。它接收一个回调函数，其中前一个元素的结果会传递到下一个元素中。一旦处理完所有元素，reduce()方法将返回一个结果。

在这个示例中，我们使用reduce()方法计算了数组中所有元素的总和。在回调函数中，prev代表前一个元素的结果，而curr代表当前的元素。

十、ES6的解构赋值和剩余运算符遍历数组


const arr = ['a', 'b', 'c', 'd'];
const [first, second, ...others] = arr;
console.log(first, second, others);

ES6的解构赋值和剩余运算符可以帮助我们更容易地遍历和操作数组。

在这个示例中，我们使用解构赋值从数组中提取了前两个元素，并使用了剩余运算符将剩下的元素存入了一个新数组中。

十一、使用for-await-of循环遍历异步生成器生成的数组


async function* generateArr() {
  yield 'a';
  yield 'b';
  yield 'c';
  yield 'd';
}

(async () => {
  for await (let item of generateArr()) {
    console.log(item);
  }
})();

异步生成器是ES2018中引入的新特性之一。在这个示例中，我们创建了一个异步生成器来生成一个数组，然后使用for-await-of循环来遍历这个数组。

在遍历异步生成器生成的数组时，我们使用了(async () => {})()自执行函数，以便在程序中使用async/await语法。

原创文章，作者：VYLT，如若转载，请注明出处：https://www.506064.com/n/149626.html