vue3【侦测|过滤|数组方法】数据变化侦测&&信息筛选过滤&&常用数组方法.filter() .map() .forEach(). find()

文章简介

内容回顾 点击快速复习v-for👏👏👏。本期内容主要是数据变化的检测和信息的过滤筛选以及常用的数组方法👇
(.filter()、.map()、.forEach()、.find()、.findIndex()、.some()、.every()、.fill())。

延展一下：👏👏👏

• 关于数据的变化——比如，对表格数据进行的搜索，当你清除输入框内容时，页面内的数据会还原到初始状态，即未经筛选的状态。这时就需要对数据检测，检测搜索框中的数据，消失则还原原始状态。
• 关于信息的筛选——比如，对表格数据进行筛选，筛选和搜索可以说是绑在一起的，搜索意味着在表格数据中进行筛选，并将筛选过后的结果返回给页面。
• 后期会专门出一期搜索框实现搜索过滤的推文

主要内容

数组变化侦测

变更方法

Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

• 🔺push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

🔺替换一个数组

变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变 (immutable) 方法，例如 filter()，concat() 和 slice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的。👇👇👇

// `items` 是一个数组的 ref
// 箭头函数的应用
items.value = items.value.filter((item) => item.message.match(/Foo/))

你可能认为这将导致 Vue 丢弃现有的 DOM 并重新渲染整个列表——幸运的是，情况并非如此。
Vue 实现了一些巧妙的方法来最大化对 DOM 元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会是一种非常高效的操作。

🔺展示过滤或排序后的结果

有时，我们希望显示数组经过 过滤或排序后的内容，而不实际变更或重置原始数据。在这种情况下，你可以创建返回已过滤或已排序数组的计算属性。

举例来说：
ts

const numbers = ref([1, 2, 3, 4, 5])

const evenNumbers = computed(() => {
  // 必须有一个返回值return
  return numbers.value.filter((n) => n % 2 === 0) 
  // filter过滤numbers数组中满足条件的数据
  // 【注意】这里用的是全等于"==="
})

template

<li v-for="n in evenNumbers">{{ n }}</li>

在计算属性不可行的情况下 (例如在多层嵌套的 v-for 循环中)，你可以使用以下方法👇👇👇
ts

const sets = ref([
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10]
]) // 定义一个响应式数组

// 定义函数 也可以用箭头函数
function even(numbers) { 
  // filter过滤有效数据
  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() 的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法之前创建一个原数组的副本：

- return numbers.reverse()
+ return [...numbers].reverse()

🔺常见数组方法

🔺.filter()

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

• 是否改变原数组：否
• 是否对空数组进行检测：否

语法：

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() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。

• 是否改变原数组：否
• 是否对空数组进行检测：否

语法：

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() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

tips: forEach()中不支持使用break(报错)和return(不能结束循环)，有需要时可使用常规的for循环。

语法：

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() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回 undefined

注意:

• find() 对于空数组，函数是不会执行的。
• find() 并没有改变数组的原始值。

语法：

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() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回 -1

注意:

• findIndex() 对于空数组，函数是不会执行的。
• findIndex() 并没有改变数组的原始值。

语法：

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() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
• 如果没有满足条件的元素，则返回false。

注意：

• some() 不会对空数组进行检测。
• some() 不会改变原始数组。

语法：

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() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用 指定函数检测数组中的所有元素

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
• 如果所有元素都满足条件，则返回 true。

注意：

• every() 不会对空数组进行检测。
• every() 不会改变原始数组。

语法：

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() 方法用于将一个固定值替换数组的元素。

注意：

• fill() 不会对空数组进行填充。
• fill() 会改变原始数组。

语法：

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

以上就是关于数据变化的检测和信息的过滤筛选以及常用的数组方法的相关内容。
如果当中有什么错误和不足，欢迎各位大佬指出！！！

下期预告

vue watch监听器

vue+typescript实战——搜索筛选功能