computed的getter 和setter 方法 、 一些常用数组方法 和本地储存空间、会话储存空间 、cookie

computed 默认情况下只有getter ,不过你也可以提供一个setter

  computed: {
                // 默认下只有getter
                // fullName() {
                //     return this.fireName + this.lastName
                // }

                // 完整写法
                fullName: {
                    get() {
                        return this.fireName + ' ' + this.lastName
                    },
                    // setter是对计算属性直接赋值时触发,回调参数为设置的值
                    set(val) {
                        console.log(val)
                        // 使用空格把字符串分割成数组
                        let arr = val.split(' ')

                        console.log(arr)

                        // 数组的第一个元素就是姓
                        this.fireName = arr[0] ? arr[0] : ''

                        // 数组的第二个元素就是名字
                        this.lastName = arr[1] ? arr[1] : ''
                    }
                }
            }

一些数组的常用方法

        数组名.reduce(回调函数,pre的初始值)

arr.reduce(function (totla, current) {

}

                reduce这个方法被调用时,会遍历这个数组的每一个元素,每遍历一个元素,就执行一侧这里的代码

里面的参数:

                current(第二个参数)表示当前正在遍历的这个元素

                totla (第一个参数)表示 上一次 的这个函数return 的值

                !!!因为第一次遍历没有上一个return值,所以交给了第二个参数,设置totla的初始值

                !!!并且reduce方法最终会返回一次return的值

举个计算总数的例子:

let arr =[1,2,3]
arr.reduce(function(pre,item)=>{
    
    pre +=item
    //pre 就是arr数组的总数
    return pre 
}
)

map()方法

返回值是一个新数组,新数组中的元素为原始数组中处理过后得到的值

不会改变原数组

实例:

     let arr2 = [
            { name: 'alex', age: 18, sex: 0 },
            { name: 'tom', age: 8, sex: 1 },
            { name: 'sky', age: 22, sex: 0 },
            { name: 'roy', age: 6, sex: 1 },
            { name: '表妹', age: 16, sex: 0 },
            { name: '表姐', age: 18, sex: 0 },
            { name: '表哥', age: 26, sex: 1 },
        ]
     
        let res2 = arr2.map(item => {
            // 1. 添加成年信息
            if (item.age >= 18) {
                item.a = '已成年'
            } else {
                item.a = '未成年'
            }

            // 2. 添加性别信息
            if (item.sex == 1) {
                item.sexStr = '男'
            } else {
                item.sexStr = '女'
            }

            return item
        })

        console.log(res2)

filter()方法:

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

         * map与filter的区别

         * map是把返回值用于数组元素生成

         * filter通过返回值是否为true决定把当前的元素放新数组中。

localStorage 

        永久储存,只要不主动删除,就会一直存在,一般不用于保存敏感信息

1.储存格式是以键值对格式存在的

  let user = {
            name: '小明',
            age: 18,
            sex: 1
        }

2.需要把对象变成json格式的字符串进行保存

let user_json = JSON.stringify(user)

3.设置数据方法

第一个值是变量名,第二个是数据   (设置的数据只能是字符串)

localStorage.setItem('user', user_json)

4.调用数据的方法

localStorage.getItem('user')

调用的数据内容是字符串,所以要转换成原来的格式

5.数据转换

let userRes = JSON.parse(localStorage.getItem('user'))

然后就可以拿到数据啦

6.清除数据

 localStorage.clear()

SessionStorage

        会话储存,会话结束自动消失,浏览器关闭后,数据会自动销毁,安全性要更高

        格式同上

       PS:本地存储方式因为安全性的原因是跟随网站使用的。不同的网站会有不同的Storage。

            别的网站是访问不了其它网站Storage

        cookie需要大家扩展,然后回来教我

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值