filter
过滤
day1 小黑的书架 ——删除功能的实现
<button @click="del(item.id)">delete</button>
methods: {
del(aa) {
// 数据驱动的特性,所以想删除书籍,就删除数组中的元素就行
// 通过id删除数组中的对应项 -> filter
// filter根据条件,保留满足条件的对应项,得到一个新数组,原来的数组不变
this.bookList = this.bookList.filter(item => item.id != aa)
}
}
unshift
在数组头部增加
Day1 小黑记事本—— 增加待办事项
<button @click="add">添加任务</button>
add() {
if (this.todoName.trim() == '') {
// 输入许多的空格,无效输入,不让添加
alert('请输入内容')
return
}
this.todoList.unshift({
id: +new Date(),//正常id是后台传过来的
name: this.todoName
})
// 点击添加之后,输入框清空
this.todoName = ''
},
find
Day2 购物车 —— 查找对应id
add(tt) {
// 根据id找到数组中的对应项 -> find
const fruit = this.list.find(item => item.id == tt)
fruit.count++;
},
sub(tt) {
const fruit = this.list.find(item => item.id == tt)
fruit.count--;
},
reduce
常用在computed计算属性求和
Day2 前面 小黑的礼物清单 —— 求和
computed: {
totalCount() {
// 计算属性内部,可直接通过this访问到app实例
// 对this.list数组里的num进行求和 -> reduce
// sum是阶段性求和结果 求和起始值0
let total = this.list.reduce((sum, item) => sum + item.num, 0)
return total //一定要写,不然没结果
}
}
Day2 后面 购物车
computed
totalCount() {
// 而且计算数量,也不是单纯的相加,是选中的条,才加上,没选中的加到100,也不能算上
// 求和用reduce
return this.list.reduce((sum, item) => {
if (item.isChecked) {
return sum + item.count
}
else return sum
}, 0)
},
slice
Day2 计算属性完整写法—— 截取字符
fullName: {
// fullName计算属性,被获取求值时,执行get(有缓存,优先读缓存)
// 将返回值作为求和结果
get() {
return this.LastName + this.FirstName
},
// 当fillName计算属性,被修改赋值时,执行set
// 修改的值,传递给set方法的形参
set(value) {
// 截取字符
this.LastName = value.slice(0, 1)
this.FirstName = value.slice(1)
}
}
some
方法
用于检查数组中是否至少有一个元素满足指定条件。如果有满足条件的元素,返回值为 true
,否则返回 false
。
const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some((number) => number % 2 === 0);
console.log(hasEvenNumber); // 输出 true,因为数组中存在偶数
const numbers = [1, 2, 3, 4, 5];
const has = numbers.some((number) => {
console.log(number);
return number % 2 === 0
})
console.log(has);
every
方法
用于检查数组中的所有元素是否都满足指定条件。如果所有元素都满足条件,返回值为 true
,否则返回 false
。
const numbers = [2, 4, 6, 8, 10];
const allEvenNumbers = numbers.every((number) => number % 2 === 0);
console.log(allEvenNumbers); // 输出 true,因为数组中所有元素都是偶数
includes
方法
用于检查数组是否包含指定的元素。如果数组中存在该元素,返回值为 true
,否则返回 false
。
const fruits = ['apple', 'banana', 'orange'];
const hasBanana = fruits.includes('banana');
console.log(hasBanana); // 输出 true,因为数组中包含 'banana'
some和include的区别
some
方法和 includes
方法在使用上有一些区别,尽管它们都用于检查数组中是否包含某个元素。
-
返回值:
some
方法返回一个布尔值,表示数组中是否存在满足指定条件的元素。includes
方法返回一个布尔值,表示数组中是否包含指定的元素。
-
使用条件:
some
方法需要传入一个回调函数作为参数,用于定义判断条件。它会遍历数组中的每个元素,并对每个元素执行回调函数。如果有任何元素满足回调函数的条件,some
方法就会返回true
;否则,返回false
。includes
方法只需要传入一个要查找的元素作为参数,它会直接检查数组中是否包含该元素。如果数组中存在指定的元素,includes
方法就会返回true
;否则,返回false
。
-
使用场景:
some
方法常用于判断数组中是否至少存在满足某个条件的元素。例如,判断数组中是否有偶数、是否有满足某个条件的对象等。includes
方法常用于检查数组中是否包含某个具体的值。例如,判断数组中是否包含某个特定的字符串、数字等。
下面是一些示例代码来展示 some
和 includes
方法的使用:
const numbers = [1, 2, 3, 4, 5];
// 使用 some 方法判断数组中是否有偶数
const hasEvenNumber = numbers.some((number) => number % 2 === 0);
console.log(hasEvenNumber); // 输出 true
// 使用 includes 方法判断数组中是否包含特定的数字
const hasNumberThree = numbers.includes(3);
console.log(hasNumberThree); // 输出 true
总结起来,some
方法用于判断数组中是否存在满足条件的元素,而 includes
方法用于检查数组中是否包含指定的元素。根据具体的需求,选择适合的方法来进行判断。
filter
方法
用于根据指定条件筛选数组中的元素,返回一个新的数组,包含满足条件的元素。
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // 输出 [2, 4],因为只有 2 和 4 是偶数
map
方法
用于对数组中的每个元素进行操作,并返回一个新的数组,包含操作后的结果。
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((number) => number * number);
console.log(squaredNumbers); // 输出 [1, 4, 9, 16, 25],每个元素都被平方了
filter 和 map 方法会返回一个新数组