美文网首页
vue里使用lodash

vue里使用lodash

作者: w_小伍 | 来源:发表于2020-06-09 10:33 被阅读0次

    lodash中文文档:https://www.lodashjs.com/docs/lodash.omit
    这里可以搜索包:https://www.npmjs.com/
    安装

    npm install lodash-S

    在src下新建plugins,新建lodash.js

    import * as _ from 'lodash';
    import Vue from 'vue';
    Vue.prototype._ = _;
    

    在main.js里引入

    import './plugins/lodash';

    使用

    _.get(res, 'Msg')
    

    单独使用
    lodash.map

    yarn add lodash.map -S

    import _map from 'lodash.map'
    data: 
    arr: [
              { id: 0,name: 'qq',age: 20 },
              { id: 1,name: 'ww',age: 21 },
              { id: 2,name: 'dd',age: 19 },
              { id: 3,name: 'gg',age: 20 },
              { id: 4,name: 'aa',age: 20 },
            ],
    methods:
    // 遍历
            _map(this.arr, item => {
              console.log(item.id) // 0 1 2 3 4
            })
    

    lodash.get -安装同上
    当获取后端的数据的时候,对象层级深,可以用,可以指定默认值

    import _get from 'lodash.get'
    person: {
              tom: {
                name: 'tom'
              }
            }
    const item = _get(this.person, 'tom.name', 'jeny')
    // _get(获取的对象,获取的值,默认值)
    console.log(item) // tom
    

    lodash.tonumber

    import _toNumber from 'lodash.tonumber'
    const page = '12'
    const numberPage = _toNumber(page)
     console.log(numberPage) // 12
    

    lodash.split

    import _split from 'lodash.split'
    const str1 = 'a,b,c,d'
    const strArr = _split(str1, ',',2)
    // _split(str1, '分隔符', 限制结果的数量)
    console.log(strArr) // ["a", "b"]
    

    lodash.sortby
    按某个字段排序

    import _sortBy from 'lodash.sortby'
    const obj1 = [
              { age: 19, fav: '篮球' },
              { age: 20, fav: '足球' },
              { age: 17, fav: '足球' },
            ]
    const sortArr = _sortBy(obj1, item => item.age) // 升序
    // const sortArr = _sortBy(obj1, item => -item.age) // 降序
    console.log(sortArr)
    

    lodash.uniqby
    去重

    const obj1 = [
              { age: 19, fav: '篮球' },
              { age: 20, fav: '足球' },
              { age: 17, fav: '足球' },
            ]
    import _uniqBy from 'lodash.uniqby'
    const uniqArr = _uniqBy(obj1, 'fav')
     // _uniqBy(obj1, '按哪个字段去重')
    console.log(uniqArr)
    

    lodash.filter-过滤

    import _filter from 'lodash.filter'
    const obj1 = [
              { age: 19, fav: '篮球' },
              { age: 20, fav: '足球' },
              { age: 17, fav: '足球' },
            ]
    const filterArr = _filter(obj1, item => item.age > 19)
    console.log(filterArr)
    

    lodash.omitby

    _.omit(object, [props])
    这个对象由忽略属性之外的object自身和继承的可枚举属性组成。(注:可以理解为删除object对象的属性)

    import _omitBy from 'lodash.omitby'
    const obj2 = {
              name: 'xiao',
              age: undefined,
              fav: null,
              height: 180
            }
    const omitObj = _omitBy(obj2, v => v) // 把有效值去掉了
    const omitObj1 = _omitBy(obj2, v => !v) // 把有效值留下
     // _omitBy(目标对象, 要被忽略的属性)
    console.log(omitObj)
    console.log(omitObj1)
    
    image.png

    相关文章

      网友评论

          本文标题:vue里使用lodash

          本文链接:https://www.haomeiwen.com/subject/jtqstktx.html