Detailed explanation of commonly used loop examples in Vue3 Basics

1. Circulation

1. filter

explain:The filter method creates a new array, which contains all elements that meet the specified criteria. This method is very suitable for looping through an array and filtering elements based on specific conditions. For example, you can use the filter method to find outAll elements in the array that are larger than a specific value,orFind strings containing specific keywords。

Complex writing:

const list = reactive({ list: [] })
 = [
  { id: 1, name: 'jack', is_use: false },
  { id: 2, name: 'jacker', is_use: true }
]
for (let i = 0; i < ; i++) {
  if ([i].is_use) {
    ([i].name)
  }
}

Simple writing:

const plist = ((i) => {
  return i.is_use
})

Complex examples:

The year of publication was after 2010.
Books with a page between 300 and 600, moderate length.
Price is less than or equal to $25.

const books = [
  { title: 'Book A', pages: 90, price: 10.99, releaseYear: 2016 },
  { title: 'Book B', pages: 320, price: 18.99, releaseYear: 2011 },
  { title: 'Book C', pages: 250, price: 29.99, releaseYear: 2013 },
  { title: 'Book D', pages: 450, price: 24.99, releaseYear: 2009 },
  { title: 'Book E', pages: 650, price: 35.99, releaseYear: 2001 },
  { title: 'Book F', pages: 370, price: 22.99, releaseYear: 2014 },
  { title: 'Book G', pages: 520, price: 27.99, releaseYear: 2017 }
];
const filteredBooks = (book =&gt; {
  // Filter condition 1: Publication year after 2010  const isRecent =  &gt; 2010;
  // Filter condition 2: The number of pages is between 300 and 600  const isModerateLength =  &gt;= 300 &amp;&amp;  &lt;= 600;
  // Filter 3: Price is less than or equal to US$25  const isAffordable =  &lt;= 25;
  // Only books that meet all the conditions at the same time are returned  return isRecent &amp;&amp; isModerateLength &amp;&amp; isAffordable;
});
(filteredBooks);

2. map

explain:mapThe method is a very powerful functional programming tool for Array objects. It applies a function to each element in the order of the original array and collects the results into a new array. It is ideal for performing data transformations and applying operations to every item in an array without changing the original array.

Example 1: Multiply each number in the array by 2

const numbers = [1, 2, 3, 4, 5];
const doubled = (number => number * 2);
(doubled);  // [2, 4, 6, 8, 10]

Example 2: Extract specific attribute values from an array of objects

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob', age: 24 },
  { name: 'Charlie', age: 28 }
];
const names = (user => );
(names);  // ['Alice', 'Bob', 'Charlie']

Example 3: Operate on the array in the array

const arrays = [[1, 2], [3, 4], [5, 6]];
const flattened = (pair => pair[0] + pair[1]);
(flattened);  // [3, 7, 11]

Complex examples:

Add a new property readable, if the book has less than 300 pages, it is marked as 'Quick read'; if it is between 300 and 600 pages, it is marked as 'Moderate read'; if it is more than 600 pages, it is marked as 'Long read'.
Merge the author's first and last name into a fullName attribute.
Add a new property discountPrice, which is 10% off if the book is released 5 years ago.

const books = [
  { title: 'Book A', author: { firstName: 'John', lastName: 'Doe' }, pages: 150, price: 19.99, releaseYear: 2020 },
  { title: 'Book B', author: { firstName: 'Jane', lastName: 'Smith' }, pages: 450, price: 24.99, releaseYear: 2018 },
  { title: 'Book C', author: { firstName: 'Emily', lastName: 'Jones' }, pages: 700, price: 29.99, releaseYear: 2015 }
];
const transformedBooks = (book =&gt; {
  // Complex logic is here  let readable;
  if ( &lt; 300) {
    readable = 'Quick read';
  } else if ( &gt;= 300 &amp;&amp;  &lt;= 600) {
    readable = 'Moderate read';
  } else {
    readable = 'Long read';
  }
  const fullName = `${} ${}`;
  const currentYear = new Date().getFullYear();
  const discountPrice = currentYear -  &gt; 5 ?  * 0.9 : ;
// ...Properties used to expand objects (equivalent to writing here)  return {
    ...book,
    readable,
    author: { ..., fullName },
    discountPrice: parseFloat((2)) // ensures the price is formatted to 2 decimal places
  };
});
(transformedBooks);

3. for…of…

Explanation: Print each item, often used to print arrays

const books = [1, 2, 3]
for (const i of books) {
  (i)
}
// 1
// 2
// 3

4. for…in…

Explanation: Print the key or subscript of each item (in the array is the subscript), which is often used to print objects.

const books = { id: 1, pname: 2 }
for (const i in books) {
  (`${i}:${books[i]}`)
}
// id: 1
// pname: 2

5. forEach

Explanation: Simplified version of for loop, but only works for arrays

const books = [1, 2]
((element) => {
  (element)
})
// 1
// 2

This is the end of this article about Vue3 basics [common loops]. For more related Vue3 common loop content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!