Vue操作数组的⼏种常⽤⽅法(map、filter、forEach、find和findIn。。。⼀、map⽅法(返回⼀个新的数组新数组中的元素是经过map函数内部代码块处理过的数据)
代码⽰例:
testMap(){
let array =[1,2,3,4];
let newArray = array.map(item=>{
return item +=1;
});
console.log(newArray);
filter过滤对象数组
}
结果:
注意点:map函数内部必须要有return 将数据返回否则默认返回 undefined
如果不加 return 如下:
代码⽰例:
testMap(){
let array =[1,2,3,4];
let newArray = array.map(item=>{
item +=1;
});
console.log(newArray);
}
结果:
还有种省略写法箭头函数省略return (不推荐这种写法)
代码⽰例:
testMap(){
let array =[1,2,3,4];
let newArray = array.map(item=> item +=1);
console.log(newArray);
}
结果:
可以看到和第⼀种带return的相⽐ item=>{return item += 1; }
少了⼤括号 和 return 即 item=> item += 1
不推荐这种省略写法
⼆、filter⽅法(返回符合过滤条件的元素组成的新数组)
代码⽰例:
testFilter(){
let array =[1,2,3,4];
let newArray = array.filter(item=>{
return item >2;
});
console.log(newArray);
}
结果:
类似于map函数 也需要有返回值 否则会返回⼀个空数组
例:
testFilter(){
let array =[1,2,3,4];
let newArray = array.filter(item=>{
item >2;
});
console.log(newArray);
}
结果:
三、forEach⽅法(⽆返回值遍历数组的每⼀个元素适⽤于不处理数组下标或者不需要使⽤break的情况)
代码⽰例:
testForEach(){
let array =[1,2,3,4];
let newArray =[];
array.forEach(item =>{
newArray.push(item+1);
});
console.log(newArray );
}
结果:
注意改变item值并不会改变原数组中的元素值
例如:
testForEach(){
let array =[1,2,3,4];
array.forEach(item =>{
item = item +1;
});
console.log(array);
}
结果:
并且forEach函数内不⽀持 continue 和 break 操作(普通for 循环⽀持这两个操作)
直接语法校验不通过
如果想在forEach中使⽤ continue 操作可以使⽤return 即可(注意这⾥的return 功能和 continue⼀样是结束本次循环开始下⼀次循环)
testForEach(){
let array =[1,2,3,4];
let newArray =[];
array.forEach(item =>{
if(item ===2){
return;
}
newArray.push(item);
});
console.log(newArray);
}
结果:
四、find⽅法(返回符合条件的第⼀个元素如果没有符合条件的返回undefined) findIndex⽅法(返回符合条件的第⼀个元素位置如果没有符合条件的返回 -1)
testFindAndFindIndex(){
let array =[1,2,3,4];
let item1 = array.find(item=> item >3);
console.log(item1);
let index1 = array.findIndex(item=> item >3);
console.log(index1);
let item2 = array.find(item=> item >4);
console.log(item2);
let index2 = array.findIndex(item=> item >4);
console.log(index2);
}
结果:
五、some⽅法(如果有任何⼀个符合条件的元素返回true 否则返回fasle) every⽅法(所有元素都符合条件才返回true 否则返回false)
代码⽰例:
testSomeAndEvery(){
let array =[1,2,3,4];
let flagSome = array.some(item=> item >3);
console.log(flagSome);
let indexEvery = array.every(item=> item >3);
console.log(indexEvery);
}
结果:

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。