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

你可能感兴趣的:(javascript,vue.js,前端)