0
点赞
收藏
分享

微信扫一扫

Vue操作数组的几种常用方法(map、filter、forEach、find 和 findIndex 、some 和 every)


一、map方法 (返回一个新的数组 新数组中的元素是经过map函数内部代码块处理过的数据)

代码示例:

testMap() {
let array = [1, 2, 3, 4];
let newArray = array.map(item=>{
return item += 1;
});
console.log(newArray);
}

结果:

Vue操作数组的几种常用方法(map、filter、forEach、find 和 findIndex 、some 和 every)_vue.js

注意点:map函数内部必须要有return 将数据返回 否则默认返回 undefined

如果不加 return 如下:
代码示例:

testMap() {
let array = [1, 2, 3, 4];
let newArray = array.map(item=>{
item += 1;
});
console.log(newArray);
}

结果:

Vue操作数组的几种常用方法(map、filter、forEach、find 和 findIndex 、some 和 every)_vue.js_02

还有种省略写法 箭头函数省略return (不推荐这种写法)

代码示例:

testMap() {
let array = [1, 2, 3, 4];
let newArray = array.map(item=> item += 1 );
console.log(newArray);
}

结果:

Vue操作数组的几种常用方法(map、filter、forEach、find 和 findIndex 、some 和 every)_vue.js


可以看到和第一种带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);
}

结果:

Vue操作数组的几种常用方法(map、filter、forEach、find 和 findIndex 、some 和 every)_数据_04


类似于map函数 也需要有返回值 否则会返回一个空数组

例:

testFilter() {
let array = [1, 2, 3, 4];
let newArray = array.filter(item=>{
item > 2 ;
});
console.log(newArray);
}

结果:

Vue操作数组的几种常用方法(map、filter、forEach、find 和 findIndex 、some 和 every)_数组_05

三、forEach方法 (无返回值 遍历数组的每一个元素 适用于不处理数组下标或者不需要使用break的情况)

代码示例:

testForEach() {
let array = [1, 2, 3, 4];
let newArray = [];
array.forEach(item => {
newArray.push(item+1);
});
console.log(newArray );
}

结果:

Vue操作数组的几种常用方法(map、filter、forEach、find 和 findIndex 、some 和 every)_代码示例_06

注意 改变item值 并不会改变原数组中的元素值

例如:

testForEach() {
let array = [1, 2, 3, 4];
array.forEach(item => {
item = item +1;
});
console.log(array);
}

结果:

Vue操作数组的几种常用方法(map、filter、forEach、find 和 findIndex 、some 和 every)_vue.js_07

并且forEach函数内 不支持 continue 和 break 操作 (普通for 循环支持这两个操作)

直接语法校验不通过

Vue操作数组的几种常用方法(map、filter、forEach、find 和 findIndex 、some 和 every)_代码示例_08


Vue操作数组的几种常用方法(map、filter、forEach、find 和 findIndex 、some 和 every)_代码示例_09

如果想在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);
}

结果:

Vue操作数组的几种常用方法(map、filter、forEach、find 和 findIndex 、some 和 every)_vue.js_10

四、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);
}

结果:

Vue操作数组的几种常用方法(map、filter、forEach、find 和 findIndex 、some 和 every)_vue.js_11

五、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);

}

结果:

Vue操作数组的几种常用方法(map、filter、forEach、find 和 findIndex 、some 和 every)_vue.js_12


举报

相关推荐

0 条评论