• 欢迎大家分享资料!前往留言板评论即可!

Loadsh的学习

合宙 模组资料网 1年前 (2021-05-15) 283次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

简述

Lodash内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数;
也有很多工程师把自己喜欢的一些三方库进行封装处理,为了后续方便开发,保证代码健壮性。

为何用

在实际任务需求开发中,前端可能需要处理很多数据,根据不同的UI库将数据处理成相应的格式;也有可能你没有使用UI库,但是不免也会存在处理数据的情况。
最常见的应该就是数组/对象的处理。比如:数组的拆分、合并、嵌套等这是最常见的需求;也许你会说使用ES6、ES7语法能实现,确实,有些需求可通过ES6、ES7语法进行实现,但是也有很多不能实现,只能通过各种对数据循环迭代进行处理,耗费百万脑细胞。。。假如你使用Lo呢?会出现什么情况呢?目前,主要是对数组和对象的操作比较频繁,这里也主要粗略讲解一下Array/Collocation这两个模块(本人暂时就只用这两个模块进行需求开发,也确实是能力有限),其他的模块(func,num….)可去官网进行了解学习。。。

如何用

在React + Webpack + Babel(ES6)的开发环境中,使用Lodash需要安装插件babel-plugin-lodash并更新Babel配置文件:
npm install --save lodash
npm install --save-dev babel-plugin-lodash

更新Bable的配置文件 .babelrc:

{
    "presets":[
        "react",
        "es2015",
        "stage-0"
    ],
    "plugins":[
        "lodash"
    ]
}

使用方式:

import Lo from 'lodash';

Lo.map([1, 2, 3], xxxxx);

Array

1、一个简单的循环

// 正常使用
for(var i = 0; i < 5; i++){
    //...
}

// 2. 使用forEach
Array.apply(null, Array(5)).forEach(function(){
    //...
});

// 使用Lodash(times:Lo的使用函数)
(拓展:
     Lo.times(n, [iteratee=_.identity]
    调用 iteratee n 次,每次调用返回的结果存入到数组中。
     i teratee 调用入 1个参数: (index)。
  参数:
    n (number)
    要调用 iteratee 的次数

    [iteratee=_.identity] (Function)
     这个函数会处理每一个元素

   返回值 (Array)
   返回调用结果的数组
  )
Lo.times(5, function(){
    //...
});

2、深层查找

var jin = [{
    "jin1": "Colin",
    "pets": [{"name": "dog1"}, {"name": "dog2"}]
}, {
    "jin2": "John",
    "pets": [{"name": "dog3"}, {"name": "dog4"}]
}];

// 使用map
jin.map(function(owner){
    return owner.pets[0].name;
});

//使用 Lodash
Lo.map(jin, "pets[0].name");

Lo.map 方法是对原生 map 方法的改进;
其中使用 pets[0].name 字符串对嵌套数据取值的方式简化了很多冗余的代码。

3、深拷贝( warning:使用序列化parse进行深拷贝,会存在一些问题:value值为函数、undefine等,希望大家自己动手查查看)

var obj = {
    "name": "colin"
}
// Lodash
var objB = Lo.cloneDeep(obj);
objB === a  // false

还有很多:
chunk
compact
difference
random(随机数)
等等…..;;;
对象扩展extend各种…..
Lo.times(9999*99...9,Lo.constant(一点))
成功=一点+一点+一点

一个让你后悔“没有”“没有”“没有”学习的js三方工具库,你后悔了吗!!!


转载请注明原文链接:Loadsh的学习
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址