一、Vue3基础[常用的循环]
2024-01-09 19:37:37
一、循环
1. filter
解释:filter 方法会创建一个新的数组,其中包含满足指定条件的所有元素。这个方法非常适合循环遍历数组并根据特定条件过滤元素的情况。例如,可以使用 filter 方法来找出数组中所有大于特定值的元素,或者找出包含特定关键词的字符串。
复杂写法:
const list = reactive({ list: [] })
list.list = [
{ id: 1, name: 'jack', is_use: false },
{ id: 2, name: 'jacker', is_use: true }
]
for (let i = 0; i < list.list.length; i++) {
if (list.list[i].is_use) {
console.log(list.list[i].name)
}
}
简单写法:
const plist = list.list.filter((i) => {
return i.is_use
})
复杂例子:
- 出版年份在2010年以后。
- 页数在300到600之间,适中长度的书籍。
- 价格低于或等于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 = books.filter(book => {
// 筛选条件1: 出版年份在2010年以后
const isRecent = book.releaseYear > 2010;
// 筛选条件2: 页数在300到600之间
const isModerateLength = book.pages >= 300 && book.pages <= 600;
// 筛选条件3: 价格低于或等于25美元
const isAffordable = book.price <= 25;
// 只有同时满足所有条件的书籍被返回
return isRecent && isModerateLength && isAffordable;
});
console.log(filteredBooks);
2. map
解释:map 方法是 Array 对象的一个非常强大的函数式编程工具。它按照原始数组的顺序,对每个元素应用一个函数,并将结果收集到一个新数组中。它非常适合于执行数据转换和应用操作到数组里的每一个项目,而不会改变原始的数组。
例一:将数组中的每个数字乘以2
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
例二:从对象数组中提取特定的属性值
const users = [
{ name: 'Alice', age: 22 },
{ name: 'Bob', age: 24 },
{ name: 'Charlie', age: 28 }
];
const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob', 'Charlie']
例三:对数组里面的数组进行操作
const arrays = [[1, 2], [3, 4], [5, 6]];
const flattened = arrays.map(pair => pair[0] + pair[1]);
console.log(flattened); // [3, 7, 11]
复杂例子:
- 添加一个新的属性readable,如果书本的页数少于300页,标记为’Quick read’;如果在300到600页之间,标记为’Moderate read’;超过600页的,标记为’Long read’。
- 把作者的名字和姓氏合并成一个fullName属性。
- 添加一个新的属性discountPrice,如果书本的发布年份在5年之前,则价格打9折。
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 = books.map(book => {
// 复杂逻辑在这里
let readable;
if (book.pages < 300) {
readable = 'Quick read';
} else if (book.pages >= 300 && book.pages <= 600) {
readable = 'Moderate read';
} else {
readable = 'Long read';
}
const fullName = `${book.author.firstName} ${book.author.lastName}`;
const currentYear = new Date().getFullYear();
const discountPrice = currentYear - book.releaseYear > 5 ? book.price * 0.9 : book.price;
// ...用于展开对象的属性(相当于写在这里)
return {
...book,
readable,
author: { ...book.author, fullName },
discountPrice: parseFloat(discountPrice.toFixed(2)) // ensures the price is formatted to 2 decimal places
};
});
console.log(transformedBooks);
3. for…of…
解释:打印每一项,常用于打印数组
const books = [1, 2, 3]
for (const i of books) {
console.log(i)
}
// 1
// 2
// 3
4. for…in…
解释:打印每一项的键或下标(在数组里面是下标),常用于打印对象
const books = { id: 1, pname: 2 }
for (const i in books) {
console.log(`${i}:${books[i]}`)
}
// id: 1
// pname: 2
5. forEach
解释:简化版的for循环,但是只是适用于数组
const books = [1, 2]
books.forEach((element) => {
console.log(element)
})
// 1
// 2
文章来源:https://blog.csdn.net/weixin_46765649/article/details/135419743
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!