当前位置：首页 > news >正文

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

news 来源：原创 2024/5/2 23:13:35

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

代码示例：

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

结果：

在这里插入图片描述

注意点：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的情况）

代码示例：

结果：
在这里插入图片描述

注意改变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);

}

结果：
在这里插入图片描述