vue3+ts中,使用lodash工具中cloneDeep方法实现深拷贝 & 数组-深拷贝、去重、提取相同元素、切分、去除假值、查找、过滤、key的值数组、最值

lodashjs官网(js工具库)——https://www.lodashjs.com/

underscorejs官网(js工具库)——https://underscorejs.net/

Lodash 和 Underscore 是非常优秀的当代JavaScript的工具集合框架。一开始Lodash只是Underscore.js的一个fork,之后再原有的成功基础上取得了更大的成果,lodash的性能远远的超过了Underscore。目前,lodash是npm仓库中依赖最多的库。lodash的使用极大的减少了你的代码量以及编写代码时间。

1、安包

npm i --save lodash

npm install --save @types/lodash

2、vue3文件中进行使用

index.vue

<script lang="ts">
import { cloneDeep } from 'lodash';
    
var s = [{ 'a': 1 }, { 'b': 2 }];
var d =cloneDeep(s);
console.log("d",d);  // => 同s
console.log(d[0] === s[0]);  // => false
</script>
3、实例集合

index.vue

<script>
    import { cloneDeep,uniq,uniqWith,isEqual,chunk,compact,reject,find,filter,map,max,min,sum } from 'lodash';
    // 1.0、数组深拷贝
    var s = [{ 'a': 1 }, { 'b': 2 }];

    var d =cloneDeep(s);
    console.log("数组深拷贝",d); //同上
    console.log(d[0] === s[0]);  //false

    // 2.0、数组去重
    var arr = [1,1,2,3,3,4]
    var ary = uniq(arr)
    // var ary1 = [...new Set(arr)]
    var ary2 =Array.from(new Set(arr))
    console.log('数组去重',ary,ary2);// [1,2,3,4]

    var arrObj = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 },{ 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];
    var a14 = uniqWith(arrObj, isEqual)  
    console.log('数组对象去重',a14);  // [ { x: 1, y: 2 }, { x: 2, y: 1 } ]

    var arr84 = [1,2,3,5,9,8]
    var arr82 = [2,3,]
    var arr83 = [2,3,4,6,8]
    var arr86 = intersection(arr84,arr82,arr83)
    console.log("提取数组相同元素",arr86);  // [2,3]

    // 3.0、数组切分
    var arr31 = [1,2,3,4,5,6,7,8,9]
    var ary32 = chunk(arr31,3)
    console.log("数组切分",ary32);// [[1,2,3],[4,5,6],[7,8,9]]

    //4.0、去除假值
    //在JavaScript中,假值有false、null、0、""、undefined 和 NaN。
    var arr41 = ['1','2',' ',0,"",NaN,null,undefined,false]
    var ary42 = compact(arr41)
    console.log('去除假值',ary42);

    // 5.0、根据条件去除某个元素
    var arr51 = [ 
      {id: 0, name: "aaa", age: 33},
      {id: 0, name: "bbb", age: 33},
      {id: 1, name: "bbb", age: 25}
    ];
    var ary52 =reject(arr51, ['name', 'bbb'])
    console.log("去除元素",ary52); // [{id: 0, name: "aaa", age: 33}]

    // 6.0、查找数组
    var arr61 = [ 
      {id: 0, name: "aaa", age: 33},
      {id: 0, name: "bbb", age: 33},
      {id: 1, name: "bbb", age: 25}
    ];
    var ary62 =find(arr61, ['name', 'bbb'])
    console.log("查找数组",ary62); //  {id: 0, name: "bbb", age: 33},查找结果的第一个值

    // 7.0、过滤数组——根据条件过滤出符合条件的元素,返回新数组
    var arr71 = [ 
      {id: 0, name: "aaa", age: 33},
      {id: 1, name: "bbb", age: 33},
      {id: 2, name: "bbb", age: 25}
    ];
    var ary72 =filter(arr71, ['name', 'bbb'])
    console.log("过滤数组",ary72); // [{id: 1, name: "bbb", age: 33},{id: 2, name: "bbb", age: 25}]

    // 8.0、从集合中挑出一个key,将其值作为数组返回
    var arr81 = [ 
      {id: 0, name: "aaa", age: 33},
      {id: 1, name: "bbb", age: 33},
      {id: 2, name: "bbb", age: 25}
    ];
    var ary82 =map(arr81, 'name')
    console.log("key的值数组",ary82);  // ['aaa', 'bbb', 'bbb']

    // 9.0、最值
    var arr91 = [12,1,13,14,25]
    var ary92 = max(arr91)
    console.log('最大值',ary92); // 25
    var ary93 = min(arr91)
    console.log('最小值',ary93); // 1
    var ary94 = sum(arr91)
    console.log('数组和',ary94); // 65
</script>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐