vue语法中的常用循环

【警告】本文不考虑性能耗能问题，仅概述循环遍历的使用方法

1.for

for循环是最常规通用的循环遍历方法，适用于数组，

可精确控制索引，可以通过  break 中断遍历

let arr = [1,2,3,4,5]
let total =0;
for(let i=0; i<arr,length; i++) {
    if(i==3) break;
	total += i;
}
console.log("总数："+total);

2.forEach

forEach方法是一个高阶函数，简便高效遍历数组，

不返回新数组，无法终止循环,  但可以使用return来跳过某个条件，类似continue

const list = [1,2,3,4,5];
let total = 0;
numbers.forEach(item => {
  if(item == 3) return;
  total += item;//不会加3
});
console.log(total); 

3.map

遍历数组并返回新数组，元素由回调函数处理

不会修改原数组，新数组长度与原数组相同 

//对原数组进行运算
const numbers = [1,2,3,4,5];
const result = numbers.map(num => num * 2);
console.log(result); // [2,4,6,8,10]

//向对象数组进行取值并返回新数组
let arrs = [{name:"香蕉",price:69},{name:"苹果",price:88},{name:"樱桃",price:99}]
let result = arrs.map(item=>item.name);
console.log(result);// ['香蕉', '苹果', '樱桃']

4.filter

筛选满足条件的元素并返回新数组

const numbers = [1, 2, 3, 4];
const result = numbers.filter(num => return { num > 2});
console.log(result); // [3, 4]

//结合indexOf做数组去重
let arrs = [1,2,5,3,5,3,];
let newArrs = arrs.filter((item,index,self)=>{
	return self.indexOf(item) === index
})
console.log(newArrs);// [1,2,5,3,]

5.every

检查所有元素是否满足条件，返回布尔值

const numbers = [2, 4, 6];
const result = numbers.every(num => num % 2 === 0);
console.log(result); // true

6.some

检查是否至少一个元素满足条件，返回布尔值

遇到第一个满足条件的元素时立即返回 true,不会继续遍历

const numbers = [1,2,3,5];
const result = numbers.every(num => num % 2 === 0);
console.log(result); // true

7.include

检查数组中是否包含某个值，返回布尔值

const numbers = [1, 2, 3];
console.log(numbers.includes(2)); // true
console.log(numbers.includes(4)); // false

//数组包含数组（元素都相同）
let arrs1 = [1,2,3,4,5,6,7];
let arrs2 = [2,5,7];
let result1 = arrs2.every(item=>arrs1.includes(item));
console.log(result1);// true

8.reduce

将数组中的元素进行运算。total是累计值，curr是当前值，0：从0计算

//求和
const numbers = [1, 2, 3];
const result = numbers.reduce((total, curr) => total+ curr, 0);
console.log(sum); // 6

//求大小值
let arrs = [6,,4,1,3,2,7,10,5];
let result = arrs.reduce((prev,current,index)=>{	
	return Math.max(prev,current);
    //return Math.min(prev,current);
},0)
console.log(result);//10

9.for...of

遍历可迭代对象的值（数组、字符串、Map、Set），不遍历对象属性

const numbers = [1, 2, 3];
for (const num of numbers) {
  console.log(num);// 输出：1, 2, 3
}

10.for...in

遍历对象属性，不用于遍历数组

const obj = { username: "张三", password: "password" };
for (const key in obj) {
  console.log(`${key}: ${obj[key]}`);
}
// 输出：
// a: 1
// b: 2