vue3中遍历数组都有哪些方法？

目录

1.for循环遍历

 2.forEach方法

 3.map方法

 4.for...in遍历

 5.for...of遍历

6. Object.keys遍历

 7.其他方法(在Vue模板中，使用v-for指令来遍历数组并渲染列表)

8.小结

---

1.for循环遍历

最基本的遍历方法是使用传统的for循环。这种方法简单直接，可以通过索引访问数组的每个元素。

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

 2.forEach方法

forEach 方法是ES6中引入的数组遍历方法，它为数组中的每个元素执行一次提供的函数。

注意：forEach 方法在遍历数组时不会被打断中止，但是网传有方法可以中断，可自行搜索

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

 3.map方法

map 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

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

 4.for...in遍历

for...in 循环以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

const arr = [1, 2, 3, 4, 5, 6];
const newArr = [];
for (const key in arr) {
  newArr.push(arr[key]);
  console.log(newArr);
}

 5.for...of遍历

for...of 语句在可迭代对象（包括Array，Map，Set，String，TypedArray，arguments对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

const arr = [1, 2, 3, 4, 5, 6];
const newArr = [];
for (const value of arr) {
  newArr.push(value);
  console.log(newArr);
}

 注意：如果遍历对象的话，只能使用for..in遍历对象，for..of不能遍历对象

6. Object.keys遍历

Object.keys 方法会返回一个由给定对象的自身可枚举属性组成的数组。

const arr = [1, 2, 3, 4, 5, 6];
const newArr = [];
Object.keys(arr).forEach(key => {
  newArr.push(arr[key]);
  console.log(newArr);
});

 7.其他方法(在Vue模板中，使用v-for指令来遍历数组并渲染列表)

在Vue模板中，通常使用v-for指令来遍历数组并渲染列表。v-for可以直接在模板中使用，也可以结合v-bind:key来提供每个元素的唯一键值，这有助于Vue跟踪每个节点的身份，从而重用和重新排序现有元素。

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.text }}
    </li>
  </ul>
</template>

8.小结

在选择数组遍历方法时，应考虑到具体的应用场景和需求，以选择最合适的方法。
如果需要修改原数组，可以使用forEach；
如果需要创建一个新数组，可以使用map；
如果需要循环遍历数组渲染一个列表，可以在模板中使用v-for指令
如果需要过滤数组，可以使用filter。
每种方法都有其适用的场景，合理选择可以提高代码的效率和可读性。

---