Loadsh的学习

简述

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三方工具库，你后悔了吗！！！