uni-app：js实现数组中的相关处理

已于 2023-12-11 10:43:26 修改
阅读量1.5k 收藏 3
点赞数
分类专栏： uni-app 文章标签： uni-app
于 2023-10-20 14:30:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46001736/article/details/133921010
版权

一、查询数组中，某一项中的某个数据为指定值的项（find() 方法）

使用分析

  • 使用数组的 find() 方法来查询 id 为 0 的那一项数据。这个方法会返回满足条件的第一个元素，如果找不到符合条件的元素，则返回 undefined。
  • 使用 find() 方法传入一个回调函数作为参数。回调函数接收一个参数 item，表示数组中的每个元素。我们在回调函数中判断 item.id === 0 来查找 id 为 0 的那一项数据。

效果展示

这里查询id为1的那一项的数据信息

核心代码

const item = array.find(item => item.id === 1);

完整代码

<template>
	<view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {

		},
		onLoad() {
			const array =[
					{
						id:0,
						name:'张三',
						age:18
					},
					{
						id:1,
						name:'李四',
						age:28
					},
	
					{
						id:2,
						name:'王五',
						age:38
					},
					{
						id:3,
						name:'赵六',
						age:48
					}
				]	
			console.log('初始数组');
			console.log(array);
			//查询数组中指定id值的具体项（这里指定id为1） 
			console.log('查询id为1的那一项数据');
			const item = array.find(item => item.id === 1);
			console.log(item);
		}
	};
</script>
<style>

</style>

二、查询数组中，某一项中的某个数据为指定值的项，存在多项数据的情况（filter() 方法）

 使用分析

  • 使用数组的 filter() 方法。filter() 方法会返回一个新数组
  • 使用 filter() 方法传入一个回调函数作为参数。回调函数接收一个参数 item，表示数组中的每个元素。我们在回调函数中判断 item.name === '张三' 来筛选出 name 为 "张三" 的所有项。

效果展示

这里查询name为‘张三’的全部项的数据信息

核心代码

const items = array.filter(item => item.name === '张三');

完整代码

<template>
	<view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		onLoad() {
			const array = [{
					id: 0,
					name: '张三',
					age: 18
				},
				{
					id: 1,
					name: '李四',
					age: 28
				},
				{
					id: 2,
					name: '王五',
					age: 38
				},
				{
					id: 3,
					name: '张三',
					age: 48
				}
			];
			console.log('初始数组');
			console.log(array);
			console.log('查询name为‘张三’的全部项');
			const items = array.filter(item => item.name === '张三');
			console.log(items);

		}
	};
</script>
<style>

</style>

注：find（）和 filter（）,前者只返回满足条件的第一个的元素，而不是所有，后者即返回全部满足条件的数据

三、查询数组中，某一项中的某个数据为指定值时，对应该项中其他值的信息

方法一：使用循环遍历数组进行查询

使用分析

通过for循序对数组进行遍历，array[i].id即为每一项中的id值

效果展示

这里查询id为2时，该项的name值

核心代码

let name = '';
            for (let i = 0; i < array.length; i++) {
                if (array[i].id === 2) {
                    name = array[i].name;
                    break;
                }
            }

完整代码

<template>
	<view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		onLoad() {
			const array = [{
					id: 0,
					name: '张三',
					age: 18
				},
				{
					id: 1,
					name: '李四',
					age: 28
				},
				{
					id: 2,
					name: '王五',
					age: 38
				},
				{
					id: 3,
					name: '张三',
					age: 48
				}
			];
			console.log('初始数组');
			console.log(array);
			console.log('查询id为2的项中的name值');
			let name = '';
			for (let i = 0; i < array.length; i++) {
				if (array[i].id === 2) {
					name = array[i].name;
					break;
				}
			}
			console.log(name);
		}
	};
</script>
<style>

</style>

方法二：使用find()方法和三目运算进行配合

 使用分析

  • find() 方法返回第一个满足条件的元素，而不是所有。如果没有任何元素满足条件，则返回 undefined
  • 如果find()方法查询到了数据，通过三目运算进行输出

效果展示

这里查询id为2时，该项的name值

核心代码

const item = array.find(item => item.id === 2);
const name = item ? item.name : '';

完整代码

<template>
	<view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		onLoad() {
			const array = [{
					id: 0,
					name: '张三',
					age: 18
				},
				{
					id: 1,
					name: '李四',
					age: 28
				},
				{
					id: 2,
					name: '王五',
					age: 38
				},
				{
					id: 3,
					name: '张三',
					age: 48
				}
			];
			console.log('初始数组');
			console.log(array);
			console.log('查询id为2的项中的name值');
			const item = array.find(item => item.id === 2);
			//三目运算，如果item的值存在说明找到了对应的数据就输出值，如果不是就输出空值
			const name = item ? item.name : '';
			console.log(name);
		}
	};
</script>
<style>

</style>

四、判断数组中，是否存在有一项中某个数据为指定值的项

  使用分析

  • 数组的 some() 方法来判断是否存在满足条件的元素。some() 方法会遍历数组中的每一个元素，如果其中任意一个元素返回 true，则 some() 方法的返回值为 true；如果所有元素都返回 false，则 some() 方法的返回值为 false。
  • 使用 some() 方法传入一个回调函数作为参数。回调函数接收一个参数 item，表示数组中的每个元素。我们在回调函数中判断 item.name === '李四' 来查找 name 属性等于 "李四" 的元素。如果找到了匹配的项，则将 hasItem 设置为 true；否则设置为 false。

效果展示

这里判断name中是否含有‘李四’和‘王麻子’

核心代码

const hasItem = array.some(item => item.name === '李四');

if (hasItem) {
        console.log('数组中存在 name 值为 "李四" 的数据');
} else {
        console.log('数组中不存在 name 值为 "李四" 的数据');
}

完整代码

<template>
	<view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		onLoad() {
			const array = [{
					id: 0,
					name: '张三',
					age: 18
				},
				{
					id: 1,
					name: '李四',
					age: 28
				},
				{
					id: 2,
					name: '王五',
					age: 38
				},
				{
					id: 3,
					name: '赵六',
					age: 48
				}
			];
			console.log("初始数组")
			console.log(array)
			//判断是否有name为'李四'的数据
			const hasItem = array.some(item => item.name === '李四');
			if (hasItem) {
				console.log('数组中存在 name 值为 "李四" 的数据');
			} else {
				console.log('数组中不存在 name 值为 "李四" 的数据');
			}
			//判断是否有name为'王麻子'的数据
			const hasItem1 = array.some(item => item.name === '王麻子');
			
			if (hasItem1) {
				console.log('数组中存在 name 值为 "王麻子" 的数据');
			} else {
				console.log('数组中不存在 name 值为 "王麻子" 的数据');
			}
		}
	};
</script>
<style>

</style>

五、修改数组中某一项中的某个值为指定值时，该项对应别的数据的值

   使用分析

  • 使用 find() 方法传入一个回调函数作为参数。回调函数接收一个参数 item，表示数组中的每个元素。我们在回调函数中判断 item.id === 2 来查找 id 属性等于 2 的元素。如果找到了匹配的项，则将对应的 age 值修改为 55，并输出修改后的数组；否则输出“数组中不存在 id 值为 2 的元素”。

效果展示

这里修改id为2对应的age值

原始数据

修改后数据

核心代码

const item = array.find(item => item.id === 2);
if (item) {
        item.age = 55;
        console.log('修改成功，新的数组数据为：', array);
} else {
        console.log('数组中不存在 id 值为 2 的元素');
}

完整代码

<template>
	<view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		onLoad() {
			const array = [{
					id: 0,
					name: '张三',
					age: 18
				},
				{
					id: 1,
					name: '李四',
					age: 28
				},
				{
					id: 2,
					name: '王五',
					age: 38
				},
				{
					id: 3,
					name: '赵六',
					age: 48
				}
			];		
			const item = array.find(item => item.id === 2);
			if (item) {
				item.age = 55;
				console.log('修改成功，新的数组数据为：', array);
			} else {
				console.log('数组中不存在 id 值为 2 的元素');
			}
		}
	};
</script>
<style>

</style>

六、数组的插入（push向后插入，unshift向前插入，splice指定项插入）

1、push向后插入

使用分析

  • push 方法可以在数组末尾添加新元素

效果展示

这里向数组末尾添加了一条新对象

        {
                 id: 4,
                 name: '钱七',
                 age: 58
        }

原始数据

修改后数据

核心代码

array.push({
         id: 4,
         name: '钱七',
         age: 58
});

完整代码

<template>
	<view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		onLoad() {
			const array = [{
					id: 0,
					name: '张三',
					age: 18
				},
				{
					id: 1,
					name: '李四',
					age: 28
				},
				{
					id: 2,
					name: '王五',
					age: 38
				},
				{
					id: 3,
					name: '赵六',
					age: 48
				}
			];		
			array.push({
			  id: 4,
			  name: '钱七',
			  age: 58
			});
			console.log(array); // 打印数组，可以看到新的对象被成功添加
		}
	};
</script>
<style>

</style>

2、unshift向前插入

使用分析

  • 向数组开头插入元素：可以使用 unshift 方法向数组开头插入新元素。

效果展示

这里向数组最前端添加了一条新对象

        {
                 id: -1,

                name: '王小二',

                age: 25
        }

原始数据

修改后数据

核心代码

array.unshift({

        id: -1,

        name: 'New Person',

        age: 25

});

完整代码

<template>
	<view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		onLoad() {
			const array = [{
					id: 0,
					name: '张三',
					age: 18
				},
				{
					id: 1,
					name: '李四',
					age: 28
				},
				{
					id: 2,
					name: '王五',
					age: 38
				},
				{
					id: 3,
					name: '赵六',
					age: 48
				}
			];		
			array.unshift({
			  id: -1,
			  name: '王小二',
			  age: 25
			});
			console.log(array); // 打印数组，可以看到新的对象被成功添加
		}
	};
</script>
<style>

</style>

 3、splice指定位置插入

使用分析

  • 使用 splice 方法在数组中的任意位置插入新元素。该方法可以接受三个参数，第一个参数是要插入的位置（索引），第二个参数是要删除的元素个数（设置为 0 表示不删除元素），第三个参数以及后续参数是要插入到数组中的元素。

效果展示

这里向下标为3的位置添加了一条新对象（也就是该项的下标要为三）

        {

                id: 5,

                name: 'New Person',

                age: 30

        }

原始数据

修改后数据

核心代码

array.splice(3, 0, {
        id: 5,
        name: 'New Person',
        age: 30
 });

完整代码

<template>
	<view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		onLoad() {
			const array = [{
					id: 0,
					name: '张三',
					age: 18
				},
				{
					id: 1,
					name: '李四',
					age: 28
				},
				{
					id: 2,
					name: '王五',
					age: 38
				},
				{
					id: 3,
					name: '赵六',
					age: 48
				}
			];		
			array.splice(3, 0, {
			  id: 5,
			  name: 'New Person',
			  age: 30
			});
			console.log(array); // 打印数组，可以看到新的对象被成功添加
		}
	};
</script>
<style>

</style>

七、寻找数组中某一项中的某个值为指定值时，对这一项进行替换

   使用分析

  • 使用数组的 findIndex 方法找到数组中特定元素的索引，然后使用这个索引进行替换操作，这里通过寻找id为2的值，对这一项进行替换

效果展示

原始数据

修改后数据

核心代码

const index = array.findIndex(item => item.id === 2);
if (index !== -1) {
        array[index] = {
                id: -1,
                name: '替换者',
                age: 30
        };
}

完整代码

<template>
	<view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		onLoad() {
			const array = [{
					id: 0,
					name: '张三',
					age: 18
				},
				{
					id: 1,
					name: '李四',
					age: 28
				},
				{
					id: 2,
					name: '王五',
					age: 38
				},
				{
					id: 3,
					name: '赵六',
					age: 48
				}
			];		
			const index = array.findIndex(item => item.id === 2);
			if (index !== -1) {
			  array[index] = {
			    id: -1,
			    name: '替换者',
			    age: 30
			  };
			}
			console.log(array); // 打印数组，可以看到新的对象被成功添加
		}
	};
</script>
<style>

</style>

八、数组的删除（pop末尾删除，shift开头删除，splice指定位置删除，filter 删除符合特定条件的元素）

1、pop末尾删除

使用分析

  • pop 方法删除数组末尾的元素

效果展示 

原始数据

修改后数据

核心代码

array.pop();//删除数组末尾项

完整代码

<template>
	<view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		onLoad() {
			const array = [{
					id: 0,
					name: '张三',
					age: 18
				},
				{
					id: 1,
					name: '李四',
					age: 28
				},
				{
					id: 2,
					name: '王五',
					age: 38
				},
				{
					id: 3,
					name: '赵六',
					age: 48
				}
			];		
			array.pop();//删除数组末尾项
			console.log(array); // 打印数组，可以看到新的对象被成功添加
		}
	};
</script>
<style>

</style>

2、shift开头删除

使用分析

  • 使用 shift 方法删除数组开头的元素

效果展示

原始数据

修改后数据

核心代码

array.shift();;//删除数组首项

完整代码

<template>
	<view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		onLoad() {
			const array = [{
					id: 0,
					name: '张三',
					age: 18
				},
				{
					id: 1,
					name: '李四',
					age: 28
				},
				{
					id: 2,
					name: '王五',
					age: 38
				},
				{
					id: 3,
					name: '赵六',
					age: 48
				}
			];		
			array.shift();;//删除数组首项
			console.log(array); // 打印数组，可以看到新的对象被成功添加
		}
	};
</script>
<style>

</style>

 3、splice指定位置删除

使用分析

  • splice 方法删除指定位置的元素，第一个参数为索引，第二个参数为要删除的元素个数

效果展示

原始数据

修改后数据

核心代码

array.splice(2, 1);//从数组中的索引为 2 的位置开始，删除 1 个元素。你也可以根据需要指定删除多个元素。这里也就是删除下标为2的元素即name为王五的这一项

完整代码

<template>
	<view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		onLoad() {
			const array = [{
					id: 0,
					name: '张三',
					age: 18
				},
				{
					id: 1,
					name: '李四',
					age: 28
				},
				{
					id: 2,
					name: '王五',
					age: 38
				},
				{
					id: 3,
					name: '赵六',
					age: 48
				}
			];		
			array.splice(2, 1);//找到下标为2的位置，删除一个元素
			console.log(array); // 打印数组，可以看到新的对象被成功添加
		}
	};
</script>
<style>

</style>

 4、filter 删除符合特定条件的元素

使用分析

  • 删除符合特定条件的元素（只是筛选需要的项，组成新数组）

效果展示

原始数据

修改后数据

核心代码

var new_array = array.filter(item => item.id !== 2);//创建一个新的数组，其中不包含 id 为 2 的元素。原始数组不会被修改，而是返回一个新的数组

完整代码

<template>
	<view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		onLoad() {
			const array = [{
					id: 0,
					name: '张三',
					age: 18
				},
				{
					id: 1,
					name: '李四',
					age: 28
				},
				{
					id: 2,
					name: '王五',
					age: 38
				},
				{
					id: 3,
					name: '赵六',
					age: 48
				}
			];		
			var new_array = array.filter(item => item.id !== 2);
			console.log("原数组",array); // 原数组
			console.log("新数组",new_array); // 打印数组，可以看到新的对象被成功添加
			
		}
	};
</script>
<style>

</style>

九、数组的拷贝（复制）

uni-app：js实现数组中的相关处理-数组复制-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/weixin_46001736/article/details/134283969?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22134283969%22%2C%22source%22%3A%22weixin_46001736%22%7D

 

25号底片~
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp 根据后台返回的id取数组中对应的值
weixin_43886375的博客
12-28 2347
举例下面是详情页接口返回案件类型 mainTypeId指的是大类的id subclassId指的是小类的id。已知大类和小类id 后台都返回了 怎么取对应的值呢 这个时候我们会用到。大类获取接口返回的数据如下。小类获取接口返回的数据如下。
uni-app:从运行原理上面解决性能优化问题
01-27
Uni-App，从了解到开发，相信大家都会觉得Uni-App性能不好，其实也这是非原生的弊病。React Native、Flutter等，非原生框架，性能上都会或多或少的折损。但各个框架，都会做出性能提升建议，所以开发者在开发前，多了解一下，后面维护升级等就会更方便一点，否则项目越来越大，后续开发就会越来越难。现在我们就从uni-app运行原理上，了解一下，在哪些方面存在性能折损问题？ 逻辑层和视图层分离，非H5端通信
php实现给二维数组中所有一维数组添加值的方法
10-20
主要介绍了php实现给二维数组中所有一维数组添加值的方法,涉及php针对数组的遍历、转换、赋值等相关操作技巧,需要的朋友可以参考下
uniapp：如何在数组中添加新的对象和删除对象，以及更改对象中的属性（vue）
m0_65069237的博客
09-26 3983
'':''}}删除</button></li><input v-model="newItemName" placeholder="请输入新对象的名字"><input v-model="newItemImage" placeholder="请输入新对象的图片"><button @click="addItem">添加</button>
关于uni-app中请求获取到数据，但无法渲染、无法赋值。或可以渲染，但无法赋值、取值。其原因是this指向问题
Huathy的博客
07-07 9637
从图中可以看出，这个goodsList的数据是可以取到的，但是在AppData中没有看到记录，并且使用vue中的v-for指令循环数据时也没有渲染。 这个问题主要是出在了请求成功的赋值部分。 错误示例： success(res) { console.log(res) //这里的this，指向的是当前的res对象，故这样子写，是无法将值赋给goodsList的 this.goodsList = res.data }, fail(err) { uni.showToast({ title:"请求失
uniapp 数组遍历组成新数组map，数组过滤filter，删除数组某一项findIndex，添加push
qq_59175937的博客
07-01 6755
数组遍历组成新数组，用数组方法map， 数组过滤filter，删除数组中重复的某一项findIndex，不重复的就push到新数组中
uniapp选择框遍历数组
Csignificanc的博客
03-31 2469
uniapp选择框遍历数组 代码如下 <!-- 遍历数组 --> <view class="itemList"> <view class="item acea-row row-between-wrapper" v-for="(item, indexw) in hnUserlist" :key="indexw"> <view class="namele">{{ item.name }}</view> &
uniapp 数组的用法
热门推荐
joker6295的博客
04-29 2万+
【使数组发生更新】方法：修改了原始数组，会触发视图更新push() 、 pop()、shift()、unshift()、 splice() 、sort()、 reverse()、 join() 【返回新数组、替换数组】：不会变更原始数组，而总是返回一个新数组filter()、concat() 、 slice()、 map() 【 .filter() 】方法 filter创建一个新数组，新数组中的元素是符合指定条件的元素。 filter方法不会改变原数组，不对空数组进行检测。 举例： co.
uniapp vue 数组map遍历方法 类似forEach 箭头函数
qq_36632604的博客
07-20 8399
分析内容 1. map 数组遍历方法 (1) 返回一个经过处理后的新数组，但不改变原数组的值。 1 2 3 4 5 6 var a = [1,2,3,4,5] var b = a.map((item) => { return item = item * 2 }) console.log(a) // [1,2,3,4,5] console.log(b) // [2,4,6,8...
[每天进步一点点~] vue uni-app 数组的17个操作方法
DarlingYL的博客
12-07 7738
详细学习请看：vue数组操作方法JavaScript Array 对象参考手册 【使数组发生更新】方法：修改了原始数组，会触发视图更新push() 、 pop()、shift()、unshift()、 splice() 、sort()、 reverse()、 join() 【返回新数组、替换数组】：不会变更原始数组，而总是返回一个新数组filter()、concat() 、 slice()、 ...
uni-ajax：uni-app的轻量级HTTP客户端
02-04
根目录又没有package.json文件的话，请先执行如下命令：# npm init -y# 安装npm install uni-ajax# 更新npm update uni-ajax :croissant:实例新建ajax.js文件（文件名可自定义）用于处理拦截器，接口根地址，替代...
uni-app-template:uni-app 通用模板
04-06
uni-app 通用模板官网地址 平台兼容说明模板说明：基于cli创建的轻量化项目模板，只保留vue最基础的使用方式，保证打包到多端时不需要作太多判断处理状态管理不建议使用vuex，因为会导致代码变得冗余，而且在编辑器...
uni-auto-pages:uni-app 自动配置pages.json
05-31
uni-auto-pagesuni-app 开发中根据规则自动配置页面 pages，分包 subPackages,和 condition 生成 pages.josn 的 webpack 插件，使得开发者不需要手动的去维护 pages.json。类似 vue-auto-routing,使用非常简单。安装...
持续记录｜UNIAPP适配APP遇到的问题以及解决方案
最新发布
灵壹Eli的博客
04-29 77
在使用UNIAPP开发APP的时候遇到的一些奇奇怪怪问题记录。
uniapp实现相册、拍照及视频录制功能
qq_40063198的博客
04-25 399
uniapp实现相册、拍照及视频录制功能
uniapp 阿里云点播 视频播放
shelter123456的博客
04-25 396
以下是uniapp 阿里云点播（加密）**
uniapp获取当前位置及检测授权状态
Smile_ping的博客
04-26 631
uniapp App端获取当前位置、检测当前定位是否授权，并给予弹窗提示用户；
uniapp H5实现签名
李木子的博客
04-25 388
【代码】uniapp H5实现签名。
uniapp：K线图，支持H5，APP
sunluyi的博客
04-28 758
K线，1分钟搞定。备注详细，无需理解，直接复制即可。
uni-app清空数组数据
05-27
要清空一个数组，在uni-app中可以使用JavaScript提供的Array.prototype.splice()方法，该方法可以删除数组中的元素并返回被删除的元素。 例如，如果要清空名为arr的数组，可以使用以下代码： ``` arr.splice(0, arr.length); ``` 这行代码将从数组的索引0开始删除arr.length个元素，也就是整个数组的元素都被删除了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值