Vue操作数组的几种常用方法小结

更新时间：2023年09月13日 16:01:31 作者：梦之归途

本文主要介绍了Vue操作数组的几种常用方法小结,主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from这几种方法,感兴趣的可以了解一下

一、map方法（返回一个新的数组新数组中的元素是经过map函数内部代码块处理过的数据）
二、filter方法（返回符合过滤条件的元素组成的新数组）
三、forEach方法（无返回值遍历数组的每一个元素适用于不处理数组下标或者不需要使用break的情况）
四、find方法（返回符合条件的第一个元素如果没有符合条件的返回undefined） findIndex方法（返回符合条件的第一个元素位置如果没有符合条件的返回 -1）
五、some方法（如果有任何一个符合条件的元素返回true 否则返回fasle） every方法（所有元素都符合条件才返回true 否则返回false）
六、includes方法
七、Array.from()方法

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

结果：

在这里插入图片描述

六、includes方法

参数：数值 -------- 返回值：true/falseincludes()方法------是查看数组中是否存在这个元素，存在就返回true,不存在就返回false

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { a:5 , c: 3 };
//对象合并，把后面对像合并到第一个对象，对象里相同的属性会覆盖
Object.assign(obj1, obj2, obj3);
console.log(obj1); // { a: 5, b: 2 , c:3}

七、Array.from()方法

作用：将一个类数组对象或者可遍历对象转换成一个真正的数组
类数组对象：最基本的要求就是具体length属性的对象；

类数组对象中必须具有length属性，用于指定数组的长度。如果没有length属性，那么类数组转换后的数组是一个空数组;
类数组对象的属性名必须为数值型或者是字符串型的数字

Array.from还可以接收第二个参数，作用类似于数组的map方法，用来对数组中每个元素进行处理，然后再将处理后的值放入返回一个新的数组

let arr = [2,4,5,6,1,7];
let set = new Set(arr);
console.log(Array.from(set,item=>item+1));// [3,5,6,7,2,8]

将Set结构的数据转换为真正的数组

let arr = [2,4,5,6,1,7];
let set = new Set(arr);
console.log(Array.from(set));// [2,4,5,6,1,7]

将字符串转换为数组

let str = “hello world!”
console.log(Array.from(str));//[“h”, “e”, “l”, “l”, “o”, " ", “w”, “o”, “r”, “l”, “d”, “!”]

函数可接受3个参数（后两个参数可以没有）：

第一个表示将被转换的可迭代对象(如果只有一个参数就是把形参转变成数组)

第二个是回调函数，将对每个数组元素应用该回调函数，然后返回新的值到新数组，

第三个是回调函数内this的指向。

let arr = [1, 2, 3];
let obj = {
    double(n) {
        return n * 2;
    }
}
console.log(Array.from(arr, function (n){
    return this.double(n);
}, obj)); // [2, 4, 6]

//拿到选中的去重
hasMulitIds = Array.from(new Set(hasMulitIds))

到此这篇关于Vue操作数组的几种常用方法小结的文章就介绍到这了,更多相关Vue操作数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue使用keep-alive后清除缓存的方法
这篇文章主要给大家介绍了关于vue使用keep-alive后清除缓存的相关资料,这个问题在我们日常工作中经常会用到,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-08-08
Vue实现图片预览功能的详细指南
在现代 web 应用程序中,图片预览功能提升了用户体验,使用户可以在上传图片之前查看图片内容,本文将详细介绍如何在 Vue.js 应用中实现图片预览功能,包括基本实现、进阶功能、与 Element UI 的集成、常见优化技巧以及与其他库的结合使用,需要的朋友可以参考下
2024-09-09
vue3实现高德地图天气小组件
这篇文章主要为大家详细介绍了如何使用vue3实现一个高德地图天气小组件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-10-10
vue不通过路由直接获取url中参数的方法示例
通过url传递参数是我们在开发中经常用到的一种传参方法，但通过url传递后改如果获取呢？下面这篇文章主要给大家介绍了关于vue如何不通过路由直接获取url中参数的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-08-08
VUE子组件向父组件传值详解（含传多值及添加额外参数场景）
这篇文章主要给大家介绍了关于VUE子组件向父组件传值（含传多值及添加额外参数场景）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
vue基础之详解ElementUI的表单
这篇文章主要为大家详细介绍了vue基础之ElementUI的表单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
Vue.js学习之计算属性
Vue.js 的内联表达式非常方便，但它最合适的使用场景是简单的布尔操作或字符串拼接。如果涉及更复杂的逻辑，你应该使用计算属性。下面这篇文章主要给大家介绍了Vue.js中的计算属性,需要的朋友可以参考借鉴，一起来看看吧。
2017-01-01
vue实现公告栏文字上下滚动效果的示例代码
这篇文章主要介绍了vue实现公告栏文字上下滚动效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
Vue中数组与对象修改触发页面更新的机制与原理解析
这篇文章主要介绍了Vue中关于数组与对象修改触发页面更新的机制与原理简析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-12-12
vue实现虚拟滚动的示例详解
虚拟滚动或者移动是指禁止原生滚动,之后通过监听浏览器的相关事件实现模拟滚动,下面小编就来和大家详细介绍一下vue实现虚拟滚动的示例代码,需要的可以参考下
2023-10-10