一、查詢(xún)數(shù)組中，某一項(xiàng)中的某個(gè)數(shù)據(jù)為指定值的項(xiàng)（find() 方法）

使用分析

• 使用數(shù)組的 find() 方法來(lái)查詢(xún) id 為 0 的那一項(xiàng)數(shù)據(jù)。這個(gè)方法會(huì)返回滿(mǎn)足條件的第一個(gè)元素，如果找不到符合條件的元素，則返回 undefined。
• 使用 find() 方法傳入一個(gè)回調(diào)函數(shù)作為參數(shù)?；卣{(diào)函數(shù)接收一個(gè)參數(shù) item，表示數(shù)組中的每個(gè)元素。我們?cè)诨卣{(diào)函數(shù)中判斷 item.id === 0 來(lái)查找 id 為 0 的那一項(xiàng)數(shù)據(jù)。

效果展示

這里查詢(xún)id為1的那一項(xiàng)的數(shù)據(jù)信息

核心代碼

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('初始數(shù)組');console.log(array);//查詢(xún)數(shù)組中指定id值的具體項(xiàng)（這里指定id為1） console.log('查詢(xún)id為1的那一項(xiàng)數(shù)據(jù)');const item = array.find(item => item.id === 1);console.log(item);}};
</script>
<style></style>

二、查詢(xún)數(shù)組中，某一項(xiàng)中的某個(gè)數(shù)據(jù)為指定值的項(xiàng)，存在多項(xiàng)數(shù)據(jù)的情況（filter() 方法）

?使用分析

• 使用數(shù)組的 filter() 方法。filter() 方法會(huì)返回一個(gè)新數(shù)組
• 使用 filter() 方法傳入一個(gè)回調(diào)函數(shù)作為參數(shù)?；卣{(diào)函數(shù)接收一個(gè)參數(shù) item，表示數(shù)組中的每個(gè)元素。我們?cè)诨卣{(diào)函數(shù)中判斷 item.name === '張三' 來(lái)篩選出 name 為 "張三" 的所有項(xiàng)。

效果展示

這里查詢(xún)name為‘張三’的全部項(xiàng)的數(shù)據(jù)信息

核心代碼

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('初始數(shù)組');console.log(array);console.log('查詢(xún)name為‘張三’的全部項(xiàng)');const items = array.filter(item => item.name === '張三');console.log(items);}};
</script>
<style></style>

注：find（）和 filter（）,前者只返回滿(mǎn)足條件的第一個(gè)的元素，而不是所有，后者即返回全部滿(mǎn)足條件的數(shù)據(jù)

三、查詢(xún)數(shù)組中，某一項(xiàng)中的某個(gè)數(shù)據(jù)為指定值時(shí)，對(duì)應(yīng)該項(xiàng)中其他值的信息

方法一：使用循環(huán)遍歷數(shù)組進(jìn)行查詢(xún)

使用分析

通過(guò)for循序?qū)?shù)組進(jìn)行遍歷，array[i].id即為每一項(xiàng)中的id值

效果展示

這里查詢(xún)id為2時(shí)，該項(xiàng)的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('初始數(shù)組');console.log(array);console.log('查詢(xún)id為2的項(xiàng)中的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()方法和三目運(yùn)算進(jìn)行配合

?使用分析

• find() 方法返回第一個(gè)滿(mǎn)足條件的元素，而不是所有。如果沒(méi)有任何元素滿(mǎn)足條件，則返回 undefined
• 如果find()方法查詢(xún)到了數(shù)據(jù)，通過(guò)三目運(yùn)算進(jìn)行輸出

效果展示

這里查詢(xún)id為2時(shí)，該項(xiàng)的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('初始數(shù)組');console.log(array);console.log('查詢(xún)id為2的項(xiàng)中的name值');const item = array.find(item => item.id === 2);//三目運(yùn)算，如果item的值存在說(shuō)明找到了對(duì)應(yīng)的數(shù)據(jù)就輸出值，如果不是就輸出空值const name = item ? item.name : '';console.log(name);}};
</script>
<style></style>

四、判斷數(shù)組中，是否存在有一項(xiàng)中某個(gè)數(shù)據(jù)為指定值的項(xiàng)

??使用分析

• 數(shù)組的 some() 方法來(lái)判斷是否存在滿(mǎn)足條件的元素。some() 方法會(huì)遍歷數(shù)組中的每一個(gè)元素，如果其中任意一個(gè)元素返回 true，則 some() 方法的返回值為 true；如果所有元素都返回 false，則 some() 方法的返回值為 false。
• 使用 some() 方法傳入一個(gè)回調(diào)函數(shù)作為參數(shù)。回調(diào)函數(shù)接收一個(gè)參數(shù) item，表示數(shù)組中的每個(gè)元素。我們?cè)诨卣{(diào)函數(shù)中判斷 item.name === '李四' 來(lái)查找 name 屬性等于 "李四" 的元素。如果找到了匹配的項(xiàng)，則將 hasItem 設(shè)置為 true；否則設(shè)置為 false。

效果展示

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

核心代碼

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

if (hasItem) {
????????console.log('數(shù)組中存在 name 值為 "李四" 的數(shù)據(jù)');
} else {
????????console.log('數(shù)組中不存在 name 值為 "李四" 的數(shù)據(jù)');
}

完整代碼

<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("初始數(shù)組")console.log(array)//判斷是否有name為'李四'的數(shù)據(jù)const hasItem = array.some(item => item.name === '李四');if (hasItem) {console.log('數(shù)組中存在 name 值為 "李四" 的數(shù)據(jù)');} else {console.log('數(shù)組中不存在 name 值為 "李四" 的數(shù)據(jù)');}//判斷是否有name為'王麻子'的數(shù)據(jù)const hasItem1 = array.some(item => item.name === '王麻子');if (hasItem1) {console.log('數(shù)組中存在 name 值為 "王麻子" 的數(shù)據(jù)');} else {console.log('數(shù)組中不存在 name 值為 "王麻子" 的數(shù)據(jù)');}}};
</script>
<style></style>

五、修改數(shù)組中某一項(xiàng)中的某個(gè)值為指定值時(shí)，該項(xiàng)對(duì)應(yīng)別的數(shù)據(jù)的值

???使用分析

• 使用 find() 方法傳入一個(gè)回調(diào)函數(shù)作為參數(shù)?；卣{(diào)函數(shù)接收一個(gè)參數(shù) item，表示數(shù)組中的每個(gè)元素。我們?cè)诨卣{(diào)函數(shù)中判斷 item.id === 2 來(lái)查找 id 屬性等于 2 的元素。如果找到了匹配的項(xiàng)，則將對(duì)應(yīng)的 age 值修改為 55，并輸出修改后的數(shù)組；否則輸出“數(shù)組中不存在 id 值為 2 的元素”。

效果展示

這里修改id為2對(duì)應(yīng)的age值

原始數(shù)據(jù)

修改后數(shù)據(jù)

核心代碼

const item = array.find(item => item.id === 2);
if (item) {
????????item.age = 55;
? ? ? ? console.log('修改成功，新的數(shù)組數(shù)據(jù)為：', array);
} else {
? ? ? ? console.log('數(shù)組中不存在 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('修改成功，新的數(shù)組數(shù)據(jù)為：', array);} else {console.log('數(shù)組中不存在 id 值為 2 的元素');}}};
</script>
<style></style>