VUE 引入使用lodash与常用API以及组合用法

分手后的思念是犯贱 2021-11-22 22:50 506阅读 0赞

VUE 引入使用lodash与常用API

先安装lodash到项目文件

npm i loadsh -s

使用

let _ = require('loadsh')
    
    _.API

Lodash常用的API

\_.reject  
根据条件去除某个元素。

var foo = [
        {id: 0, name: "aaa", age: 33},
        {id: 1, name: "bbb", age: 25}
    ]
    var bar = _.reject(foo, ['id', 0])
    
    //bar = [{id: 1, name: "bbb", age: 25}]

\_.pick  
根据第二个参数的key的数组，筛选第一个参数中的值并返回

var foo = {id: 0, name: "aaa", age: 33}
    var bar = _.pick(foo, ['name', 'age'])
    //bar = {name: "aaa", age: 33}

\_.keys  
返回object中的所有key

var foo = {id: 0, name: "aaa", age: 33}
    var bar = _.keys(foo)
    //bar = ['id', 'name', 'age']

\_.find  
查找数组，没有找到会返回一个undefined

var foo = [
        {id: 0, name: "aaa", age: 33},
        {id: 1, name: "bbb", age: 25}
    ]
    var bar = _.find(foo, ['id', 0])
    //bar = {id: 0, name: "aaa", age: 33}

\_.keyBy  
以某个属性为键，将数组转为对象

var foo = var foo = [
        {id: 0, name: "aaa", age: 33},
        {id: 1, name: "bbb", age: 25}
    ]
    var bar = _.keyBy(foo, 'name')
    //bar = {
    //    aaa: {id: 0, name: "aaa", age: 33},
    //    bbb: {id: 1, name: "bbb", age: 25}
    //}

\_.filter  
根据条件过滤出符合条件的元素，返回新数组

var foo = var foo = [
        {id: 0, name: "aaa", age: 33},
        {id: 1, name: "bbb", age: 25}
    ]
    var bar = _.filter(foo, ['name', "aaa"])
    //bar = {
    //    aaa: {id: 0, name: "aaa", age: 33}
    //}

\_.map  
从集合中挑出一个key，将其值作为数组返回

var foo = var foo = [
        {id: 0, name: "aaa", age: 33},
        {id: 1, name: "bbb", age: 25}
    ]
    var bar = _.map(foo, 'name')
    //bar = ["aaa", "bbb"]

\_.map  
从集合中挑出一个key，将其值作为数组返回

var foo = var foo = [
        {id: 0, name: "aaa", age: 33},
        {id: 1, name: "bbb", age: 25}
    ]
    var bar = _.map(foo, 'name')
    //bar = ["aaa", "bbb"]

*.max/*.min/\_.sum  
数组中最大值、最小值、数组求和

var foo = [1, 2, 3, 4]
    var bar = _.max(foo)
    //bar = 4
    bar = _.min(foo)
    //bar = 1
    bar = _.sum(foo)
    //bar = 10

*.pad/*.padStart/\_.padEnd  
在两端、开头、末尾补齐字符

var foo = "helloworld"
    var bar = _.pad(foo, 14, '-')
    //bar = --helloworld--
    bar = _.padStart(foo, 14, '-')
    //bar = ----helloworld
    bar = _.padEnd(foo, 14, '-')
    //bar = helloworld----

将两个数组进行比较  
\_.isEqual(value, other)

var object = { 'a': 1 };
    var other = { 'a': 1 };
    _.isEqual(object, other);
    // => true
    object === other;
    // => false

深拷贝  
\_.cloneDeep(value)

var objects = [{ 'a': 1 }, { 'b': 2 }];
     
    var deep = _.cloneDeep(objects);
    console.log(deep[0] === objects[0]);
    // => false

**组合用法**  
选出json数组中id最大的一项

var foo = [
        {id: 0, name: "aaa", age: 33},
        {id: 1, name: "bbb", age: 25}
    ]
    var bar = _.find(foo, ['id', _.max(_.map(foo, 'id'))])
    // bar = {id: 1, name: "bbb", age: 25}

更新json数组中某一项的值

var foo = [
        {id: 0, name: "aaa", age: 33},
        {id: 1, name: "bbb", age: 25}
    ]
    let list = _.keyBy(foo, 'id')
    list[0].name = "ccc"
    var bar = _.map(list)
    // bar = [
    //    {id: 0, name: "ccc", age: 33},
    //    {id: 1, name: "bbb", age: 25}
    //]