文章簡介
內容回顧點擊快速復習v-for??????。本期內容主要是數(shù)據變化的檢測和信息的過濾篩選以及常用的數(shù)組方法??
(.filter()、.map()、.forEach()、.find()、.findIndex()、.some()、.every()、.fill())。
延展一下：??????
- 關于數(shù)據的變化——比如，對表格數(shù)據進行的搜索，當你清除輸入框內容時，頁面內的數(shù)據會還原到初始狀態(tài)，即未經篩選的狀態(tài)。這時就需要對數(shù)據檢測，
檢測搜索框中的數(shù)據，消失則還原原始狀態(tài)。- 關于信息的篩選——比如，對表格數(shù)據進行篩選，篩選和搜索可以說是綁在一起的，搜索意味著
在表格數(shù)據中進行篩選，并將篩選過后的結果返回給頁面。后期會專門出一期搜索框實現(xiàn)搜索過濾的推文
主要內容
數(shù)組變化偵測
變更方法
Vue 能夠偵聽響應式數(shù)組的變更方法，并在它們被調用時觸發(fā)相關的更新。這些變更方法包括：
- ??
push()pop()shift()unshift()splice()sort()reverse()
??替換一個數(shù)組
變更方法，顧名思義，就是會對調用它們的原數(shù)組進行變更。相對地，也有一些不可變 (immutable) 方法，例如 filter()，concat() 和 slice()，這些都不會更改原數(shù)組，而總是返回一個新數(shù)組。當遇到的是非變更方法時，我們需要將舊的數(shù)組替換為新的。??????
// `items` 是一個數(shù)組的 ref
// 箭頭函數(shù)的應用
items.value = items.value.filter((item) => item.message.match(/Foo/))
你可能認為這將導致 Vue 丟棄現(xiàn)有的 DOM 并重新渲染整個列表——幸運的是，情況并非如此。
Vue 實現(xiàn)了一些巧妙的方法來最大化對 DOM 元素的重用，因此用另一個包含部分重疊對象的數(shù)組來做替換，仍會是一種非常高效的操作。
??展示過濾或排序后的結果
有時，我們希望顯示數(shù)組經過 過濾或排序后的內容，而不實際變更或重置原始數(shù)據。在這種情況下，你可以創(chuàng)建返回已過濾或已排序數(shù)組的計算屬性。
舉例來說：
ts
const numbers = ref([1, 2, 3, 4, 5])
const evenNumbers = computed(() => {
// 必須有一個返回值return
return numbers.value.filter((n) => n % 2 === 0)
// filter過濾numbers數(shù)組中滿足條件的數(shù)據
// 【注意】這里用的是全等于"==="
})
template
<li v-for="n in evenNumbers">{{ n }}</li>
在計算屬性不可行的情況下 (例如在多層嵌套的 v-for 循環(huán)中)，你可以使用以下方法??????
ts
const sets = ref([
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10]
]) // 定義一個響應式數(shù)組
// 定義函數(shù) 也可以用箭頭函數(shù)
function even(numbers) {
// filter過濾有效數(shù)據
return numbers.filter((number) => number % 2 === 0)
}
template
<ul v-for="numbers in sets">
<!--第一層是sets里的元素numbers-->
<li v-for="n in even(numbers)">{{ n }}</li>
<!--第二層是過濾出numbers中符合要求的n-->
</ul>
在計算屬性中使用 reverse() 和 sort() 的時候務必小心！這兩個方法將變更原始數(shù)組，計算函數(shù)中不應該這么做。請在調用這些方法之前創(chuàng)建一個原數(shù)組的副本：
- return numbers.reverse()
+ return [...numbers].reverse()
??常見數(shù)組方法
??.filter()
filter() 方法創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。
- 是否改變原數(shù)組：否
- 是否對空數(shù)組進行檢測：否
語法：文章來源：http://www.zghlxwxcb.cn/news/detail-695767.html
const arr= [32, 33, 16, 40];
const arr1 = arr.filter(item => item >= 18)
console.log(arr) // [32, 33, 16, 40]
console.log(arr1) // [32, 33, 40]
??.map()
map() 方法返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調用函數(shù)處理后的值。map() 方法按照原始數(shù)組元素順序依次處理元素。
- 是否改變原數(shù)組：否
- 是否對空數(shù)組進行檢測：否
語法：
const arr= [4, 9, 16, 25];
const arr1 = arr.map(item => item+2)
console.log(arr) // [4, 9, 16, 25]
console.log(arr1) // [6, 11, 18, 27]
??.forEach()
forEach() 方法用于調用數(shù)組的每個元素，并將元素傳遞給回調函數(shù)。
注意: forEach() 對于空數(shù)組是不會執(zhí)行回調函數(shù)的。
tips: forEach()中不支持使用break(報錯)和return(不能結束循環(huán))，有需要時可使用常規(guī)的for循環(huán)。
語法：
const arr= [4, 9, 16, 25];
const arr1 = [];
arr.forEach(item => arr1.push(item))
console.log(arr) // [4, 9, 16, 25]
console.log(arr1) // [4, 9, 16, 25]
??.find()
find() 方法返回通過測試（函數(shù)內判斷）的數(shù)組的第一個元素的值。
find() 方法為數(shù)組中的每個元素都調用一次函數(shù)執(zhí)行：
- 當數(shù)組中的元素在測試條件時返回 true 時,
find()返回符合條件的元素，之后的值不會再調用執(zhí)行函數(shù)。 - 如果沒有符合條件的元素返回 undefined
注意:
-
find()對于空數(shù)組，函數(shù)是不會執(zhí)行的。 -
find()并沒有改變數(shù)組的原始值。
語法：
const arr= [4, 9, 16, 25];
const b = arr.find(item => item>10)
const c = arr.find(item => item<1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // 16
console.log(c) // undefined
.findIndex()
findIndex() 方法返回傳入一個測試條件（函數(shù)）符合條件的數(shù)組第一個元素位置。
findIndex() 方法為數(shù)組中的每個元素都調用一次函數(shù)執(zhí)行：
- 當數(shù)組中的元素在測試條件時返回 true 時,
findIndex()返回符合條件的元素的索引位置，之后的值不會再調用執(zhí)行函數(shù)。 - 如果沒有符合條件的元素返回 -1
注意:
-
findIndex()對于空數(shù)組，函數(shù)是不會執(zhí)行的。 -
findIndex()并沒有改變數(shù)組的原始值。
語法：
const arr= [4, 9, 16, 25];
const b = arr.findIndex(item => item>10)
const c = arr.findIndex(item => item<1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // 2
console.log(c) // -1
.some()
some() 方法用于檢測數(shù)組中的元素是否滿足指定條件（函數(shù)提供）。
some() 方法會依次執(zhí)行數(shù)組的每個元素：
- 如果有一個元素滿足條件，則表達式返回true , 剩余的元素不會再執(zhí)行檢測。
- 如果沒有滿足條件的元素，則返回false。
注意：
-
some()不會對空數(shù)組進行檢測。 -
some()不會改變原始數(shù)組。
語法：
const arr= [4, 9, 16, 25];
const b = arr.some(item => item>10)
const c = arr.some(item => item<1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // true
console.log(c) // false
.every()
every() 方法用于檢測數(shù)組所有元素是否都符合指定條件（通過函數(shù)提供）。
every() 方法使用 指定函數(shù)檢測數(shù)組中的所有元素
- 如果數(shù)組中檢測到有一個元素不滿足，則整個表達式返回 false ，且剩余的元素不會再進行檢測。
- 如果所有元素都滿足條件，則返回 true。
注意：
-
every()不會對空數(shù)組進行檢測。 -
every()不會改變原始數(shù)組。
語法：
const arr= [4, 9, 16, 25];
const b = arr.every(item => item>10)
const c = arr.every(item => item>1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // false
console.log(c) // true
.fill()
fill() 方法用于將一個固定值替換數(shù)組的元素。
注意：
-
fill()不會對空數(shù)組進行填充。 -
fill()會改變原始數(shù)組。
語法：
const arr1= [4, 9, 16, 25];
const b = arr1.fill(100);
const arr2= [4, 9, 16, 25];
const c = arr2.fill(100, 2, 4) // 2為開始填充的起始位置，4為結束位置（不包含）
const arr3= [];
const d = arr3.fill(100);
console.log(arr1) // [100, 100, 100, 100]
console.log(b) // [100, 100, 100, 100]
console.log(arr2) // [4, 9, 100, 100]
console.log(c) // [4, 9, 100, 100]
console.log(arr3) // []
console.log(d) // []
summary
以上就是關于數(shù)據變化的檢測和信息的過濾篩選以及常用的數(shù)組方法的相關內容。
如果當中有什么錯誤和不足，歡迎各位大佬指出?。?！文章來源地址http://www.zghlxwxcb.cn/news/detail-695767.html
下期預告
vue watch監(jiān)聽器
vue+typescript實戰(zhàn)——搜索篩選功能
到了這里，關于vue3【偵測|過濾|數(shù)組方法】數(shù)據變化偵測&&信息篩選過濾&&常用數(shù)組方法.filter() .map() .forEach(). find()的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
