Vue开发中常用的 js处理数组的方法

filter

过滤
day1 小黑的书架 ——删除功能的实现

 <button @click="del(item.id)">delete</button>
 
 methods: {
            del(aa) {
                // 数据驱动的特性，所以想删除书籍，就删除数组中的元素就行
                // 通过id删除数组中的对应项  -> filter
                // filter根据条件，保留满足条件的对应项，得到一个新数组，原来的数组不变
                this.bookList = this.bookList.filter(item => item.id != aa)
            }
        }

1
2
3
4
5
6
7
8
9
10
11

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 = ''
            },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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--;
            },
1
2
3
4
5
6
7
8
9
10

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  //一定要写，不然没结果
            }
        }
1
2
3
4
5
6
7
8
9
10
11

Day2 后面 购物车
computed

totalCount() {
                // 而且计算数量，也不是单纯的相加，是选中的条，才加上，没选中的加到100，也不能算上
                //    求和用reduce
                return this.list.reduce((sum, item) => {
                    if (item.isChecked) {
                        return sum + item.count
                    }
                    else return sum
                }, 0)
            },
1
2
3
4
5
6
7
8
9
10

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)
                }
            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

some 方法

用于检查数组中是否至少有一个元素满足指定条件。如果有满足条件的元素，返回值为 true，否则返回 false。

const numbers = [1, 2, 3, 4, 5];

const hasEvenNumber = numbers.some((number) => number % 2 === 0);
console.log(hasEvenNumber); // 输出 true，因为数组中存在偶数
1
2
3
4

const numbers = [1, 2, 3, 4, 5];
const has = numbers.some((number) => {
    console.log(number);
    return number % 2 === 0
    
})
console.log(has);
1
2
3
4
5
6
7

every 方法

用于检查数组中的所有元素是否都满足指定条件。如果所有元素都满足条件，返回值为 true，否则返回 false。

const numbers = [2, 4, 6, 8, 10];

const allEvenNumbers = numbers.every((number) => number % 2 === 0);
console.log(allEvenNumbers); // 输出 true，因为数组中所有元素都是偶数
1
2
3
4

includes 方法

用于检查数组是否包含指定的元素。如果数组中存在该元素，返回值为 true，否则返回 false。

const fruits = ['apple', 'banana', 'orange'];

const hasBanana = fruits.includes('banana');
console.log(hasBanana); // 输出 true，因为数组中包含 'banana'
1
2
3
4

some和include的区别

some 方法和 includes 方法在使用上有一些区别，尽管它们都用于检查数组中是否包含某个元素。

1. 返回值：

   • some 方法返回一个布尔值，表示数组中是否存在满足指定条件的元素。
   • includes 方法返回一个布尔值，表示数组中是否包含指定的元素。

2. 使用条件：

   • some 方法需要传入一个回调函数作为参数，用于定义判断条件。它会遍历数组中的每个元素，并对每个元素执行回调函数。如果有任何元素满足回调函数的条件，some 方法就会返回 true；否则，返回 false。
   • includes 方法只需要传入一个要查找的元素作为参数，它会直接检查数组中是否包含该元素。如果数组中存在指定的元素，includes 方法就会返回 true；否则，返回 false。

3. 使用场景：

   • 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
1
2
3
4
5
6
7
8
9

总结起来，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 是偶数
1
2
3
4

map 方法

用于对数组中的每个元素进行操作，并返回一个新的数组，包含操作后的结果。

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map((number) => number * number);
console.log(squaredNumbers); // 输出 [1, 4, 9, 16, 25]，每个元素都被平方了
1
2
3
4

filter 和 map 方法会返回一个新数组