lodash 常用

uniapp使用lodash

安装lodash： npm i lodash -S

//main.js中引入
import lodash from 'lodash';
Vue.prototype._ = lodash

<template>
    <view class="content">
        lodash  
    </view>
</template>

<script>      
    export default {  
        onShow(){            
            this.ls_compact()
            this.ls_concat()
            this.ls_head()
            this.ls_arr_obj()
            this.ls_pull()
            this.ls_tail()
            this.ls_arr()       
            this.ls_coll()
            this.ls_memoize()
        }, 
        methods: { 
            //过滤假值2种方式
            ls_compact(){
                let arr=[0, 1, false, 2, '', 3];
                let res=_.compact(arr); 
                //let res=[0, 1, false, 2, '', 3].filter(_ => _)
                console.log("过滤假值:",res)    // [1, 2, 3]
            },
            //数组拼接
            ls_concat(){ 
                let res=_.concat([1], [2, 3, 4], [5, 6]);   
                console.log("数组拼接:",res) //[1, 2, 3, 4, 5, 6]
            },
            //获取第一个元素的2种方式
            ls_head(){ 
                const res = _.head([1, 2, 3])
                const [res1,res2] = [1, 2, 3] 
                console.log("获取第一个元素:",res,res1,res2) //1 1 2
            },
            //entries类型数组转换为对象
            ls_arr_obj(){
                let res=_.fromPairs([['fred', 30], ['barney', 40]])
                console.log("数组转换为对象:",res)//{fred: 30, barney: 40}
            },  
            //移除指定元素
            ls_pull(){
                let res=_.pull([1, 2, 4, 1, 2, 3,5], 2, 3, 5)//参数1，参数...都是移除 
                console.log("移除指定元素:",res)//[1, 4, 1]
            }, 
            //不包含第一个元素的数组的2种方式
            ls_tail(){
                const res=_.tail([1, 2, 3])
                var [first,...res1] = [1, 2, 3] // 可扩展不包含前第n个元素
                console.log("返回不包含第一个元素的数组:",res,res1,first)
                // [2, 3]   [2, 3]  1
            },  
            //数组操作
            ls_arr(){               
                console.log("从数组1中去掉数组2存在的元素:",_.difference([1,2,3,4,5,6], [2,4,7]))    
                
                let arr = [1, 2, 3, 4, 5]
                //鸡肋方法
                let res = _.take(arr, 1,3) // 创建一个数组切片,从下标0到n-1
                const arr2 = [1, 2, 3, 4, 5]
                arr2.length = 2 // 修改长度，直接删除后面元素，可用于清空数组
                console.log("删除数组元素后:",res,arr2) //[1]  [1,2]
                
                // 倒数解构
                const [a,b] = _.takeRight([1, 2, 3, 4,5,6], 2)
                console.log("倒数解构:",a,b)  // 5 6
                const res3 = _.zipObject(['a', 'b'], [1, 2]);
                console.log("k数组与v数组合并为对象:",res3)  // { 'a': 1, 'b': 2 }
                
                // 遍历数组有点多余
                _([1, 2]).forEach((v,k) => {
                    console.log(v,k)
                })
            }, 
            //集合操作
            ls_coll(){
                console.log("对象操作") 
               // 遍历对象就
               const obj={ a: 1, b: 2 }
               _(obj).forEach((val, key) => {
                 console.log(val, key)
               })
               // 原生js写法   **** 注意数组解构顺序
               Object.entries(obj).forEach(([key, val]) => {
                 console.log(val, key)
               }) 
               
               const users = [
                  { user: 'barney', age: 40, active: false },
                  { user: 'fred', age: 41, active: false },
                  { user: 'ABC', age: 42, active: false },
               ]
                //遍历‘集合’元素返回查询到的‘对象’
                console.log(_.find(users, { user: 'fred' })) //{user: "fred", age: 41, active: false}
                //返回一个新的过滤后的数组
                console.log(_.filter(users, { user: 'fred' })) // [{user: "fred", age: 41, active: false}]
                // 检查集合中的元素是否存在,一定查询到就停止遍历并返回true
                console.log(_.some(users, { user: 'fred' }))  //true
                
                const ux = [
                   { id: 'a', age: 40, height: 1 },
                   { id: 'b', age: 39, height: 2 },
                   { id: 'c', age: 38, height: 3 },
                   { id: 'd', age: 40, height: 4 },
                   { id: 'e', age: 40, height: 1 }
                ] 
                console.log(_.groupBy(ux, 'age'))// 按age分组:{38:obj for ['a'], 39:obj for ['b'], 40:obj for ['c', 'd']}
                console.log(_.groupBy(ux, ({ age, height }) => age + height)) // 按age和height分组
                const sort=_.orderBy(ux, ['age', 'height'], ['asc', 'desc']); // 以 `user` 升序排序 再  `age` 以降序排序。          }
                console.log("排序：",sort)
            },
            //函数相关
            ls_fun(){
                
            },
            ls_memoize(){
                var object = { 'a': 1, 'b': 2 };
                var other = { 'c': 3, 'd': 4 };
                 
                var values = _.memoize(_.values);
                console.log(values(object))
                // => [1, 2]
                 
                console.log(values(other))
                // => [3, 4]
                
                // 直接修改无效
                object.a = 3;
                console.log(values(object))
                // => [1, 2]
                 
                // 修改结果缓存 
                values.cache.set(object, ['a', 'b']);
                console.log(values(object)) 
                // =>  ['a', 'b']
            }
        }, 
    }
</script>