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)
            }
        }

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)
                }
            }