vue---循环方式以及跳出循环

发布时间 2024-01-13 16:43:19作者: 帅到要去报警

在做VUE项目开发过程中,数据循环是常见的操作方式,以下是几种常见的数据循环方式:

一、for循环

let data = [1,2,3,4,5,6,7,8,9,10];
for(let i=0; i<data.length; ++i){
    console.log(data[i]);
    if(i>5){
        break;
    }
}

二、forEach循环

let data = [1,2,3,4,5,6,7,8,9,10];
data.map((item,key) => {
    console.log(item,key);
});

map循环会分配内存空间,存储新的数据并返回

三、forEach循环

let data = [1,2,3,4,5,6,7,8,9,10];
data.forEach((item,key) => {
    console.log(item,key);
});

四、filter循环

let data = [1,2,3,4,5,6,7,8,9,10];
let result = data.filter((item,index) => {
    return item < 5;
});
console.log(result); // 1 2 3 4

过滤不满足条件的元素,把满足条件的元素返回一个新的数组,不会改变原来的数组

五、every循环(return false跳出循环)

let data = [1,2,3,4,5,6,7,8,9,10];
let result = data.every((item,key) => {
    return item > 10;
});
console.log(result); // false

every遍历数组,当每一项为true时返回true,否则为false

六、some循环(return true跳出循环)

let data = [1,2,3,4,5,6,7,8,9,10];
data.some((item,key) => {
    if(item==5){
        return true;
    }
});

遍历数组,当条件为true的时候,就会停止循环