网站职业技能培训班,应当首先满足,大型的PC网站适合vue做吗,企业邮箱如何登录一、查询数组中#xff0c;某一项中的某个数据为指定值的项#xff08;find() 方法#xff09;
使用分析 使用数组的 find() 方法来查询 id 为 0 的那一项数据。这个方法会返回满足条件的第一个元素#xff0c;如果找不到符合条件的元素#xff0c;则返回 undefined。使用…一、查询数组中某一项中的某个数据为指定值的项find() 方法
使用分析 使用数组的 find() 方法来查询 id 为 0 的那一项数据。这个方法会返回满足条件的第一个元素如果找不到符合条件的元素则返回 undefined。使用 find() 方法传入一个回调函数作为参数。回调函数接收一个参数 item表示数组中的每个元素。我们在回调函数中判断 item.id 0 来查找 id 为 0 的那一项数据。 效果展示
这里查询id为1的那一项的数据信息 核心代码 const item array.find(item item.id 1); 完整代码
templateview/view
/template
scriptexport 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 张三); 完整代码
templateview/view
/template
scriptexport 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; } } 完整代码
templateview/view
/template
scriptexport 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 : ; 完整代码
templateview/view
/template
scriptexport 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 值为 李四 的数据); } 完整代码
templateview/view
/template
scriptexport 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 的元素); } 完整代码
templateview/view
/template
scriptexport 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
