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

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

使用分析

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

效果展示

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

核心代码

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

完整代码

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

 使用分析

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

效果展示

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

核心代码

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

完整代码

注：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;
                }
            }

完整代码

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

 使用分析

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

效果展示

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

核心代码

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

完整代码

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

  使用分析

• 数组的 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 值为 "李四" 的数据');
}

完整代码

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

   使用分析

• 使用 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 的元素');
}

完整代码