Vue中 引入使用 Lodash

1. 简介

Lodash 中文网
Lodash 是一个著名的 javascript 原生库，不需要引入其他第三方依赖，是一个意在提高开发者效率,提高 JS 原生方法性能的JS 库。简单的说就是，很多方法 lodash 已经帮你写好了，直接调用就行，不用自己费尽心思去写了，而且可以统一方法的一致性。Lodash 使用了一个简单的 _ 符号，就像 Jquery 的 $ 一样，十分简洁。类似的还有 Underscore.js 和 Lazy.js。

2. 安装

浏览器环境：

<script src="lodash.js"></script>

通过 npm：

npm i --save lodash

引入完整版本：

var _ = require('lodash');

3. 常见函数的使用

3.1 N次循环
for 语句是执行循环的不二选择，但在下面代码的使用场景下，_.times() 的解决方式更加简洁和易于理解。

export default {
  methods: {
    usePrimordial(){
      for(var i = 0; i < 5; i++){
          console.log(i); // 0 1 2 3 4
      }
    },
    useLodash(){
      var _ = require('lodash');
      _.times(5,function(a){
        console.log(a); // 0 1 2 3 4
      });
    }
  }
}
</script>

3.2 深层查找属性值
Lodash 中的_.map 方法和 JavaScript 中原生的数组方法非常的像，但它还是有非常有用的升级。 你可以通过一个字符串而不是回调函数来浏览深度嵌套的对象属性。

<script>
export default {
  data(){
    return{
      ownerArr:[
        {
          "owner": "Colin",
          "pets": [{"name": "dog1"}, {"name": "dog2"}]
        },{
          "owner": "John",
          "pets": [{"name": "dog3"}, {"name": "dog4"}]
        }
      ]
    }
  },
  methods: {
    usePrimordial(){
      var jsMap = this.ownerArr.map((owner)=> {
        return owner.pets[0].name;
      });
      console.log(jsMap); // ["dog1", "dog3"]
    },
    useLodash(){
      var _ = require('lodash');
      var lodashMap = _.map(this.ownerArr, 'pets[0].name');
      console.log(lodashMap); // ["dog1", "dog3"]
    }
  },
  beforeMount(){
    this.usePrimordial()
    this.useLodash()
  }
}
</script>

3.3 深克隆对象
深度克隆 JavaScript 对象是困难的，并且也没有什么简单的解决方案。
你可以使用原生的解决方案: JSON.parse(JSON.stringify(objectToClone)) 进行深度克隆。但是，这种方案仅在对象内部没有方法的时候才可行。

<script>
export default {
  data(){
    return{
      objA:{
        a: 1,
        b: 2,
        c: {
          c1: 3,
          c2:function(){ // 无法实现对对象中方法的深拷贝
            console.log('深拷贝') 
          }
        }
      }
    }
  },
  methods: {
    useLodash(){
      var _ = require('lodash');
      var objB = _.cloneDeep(this.objA);
      console.log(this.objA); // {a:1,b:2,c:{c1:3,c2:f()}}
      console.log(objB); // {a:1,b:2,c:{c1:3,c2:f()}}
    }
  },
  beforeMount(){
    this.useLodash()
  }
}
</script>

3.4 在指定范围内获取一个随机值

Lodash 中的 _.random 方法要比原生方法更强大与灵活。你可以只传入一个参数作为最大值， 你也可以指定返回的结果为浮点数 _.random(15,20,true)

<script>
export default {
  data(){
    return{
    }
  },
  methods: {
    usePrimordial(min,max){
      console.log(Math.floor(Math.random() * (max - min)) + min) // 18
    },
    useLodash(min,max){
      var _ = require('lodash');
      console.log(_.random(min,max)) // 16
    }
  },
  beforeMount(){
    this.usePrimordial(15,20)
    this.useLodash(15,20)
  }
}
</script>

3.5 在检验值是否为空
_.isEmpty()

<script>
export default {
  methods: {
    useLodash(){
      var _ = require('lodash');
      console.log(_.isEmpty(null)); // true

      console.log(_.isEmpty(true)); // true

      console.log(_.isEmpty(1)); // true

      console.log(_.isEmpty([1, 2, 3])); //  false

      console.log(_.isEmpty({ 'a': 1 })); //  false
    }
  },
  beforeMount(){
    this.useLodash()
  }
}
</script>

3.6 查找属性

_.find() 第一个返回真值的第一个元素。
_.filter() 返回真值的所有元素的数组。
_.reject() 是_.filter的反向方法，不返回真值的（集合）元素

<script>
export default {
  data(){
    return{
      users:[
        {'user': 'barney', 'age': 36, 'active': true},
        {'user': 'fred', 'age': 40, 'active': false},
        {'user': 'pebbles', 'age': 1, 'active': true}
      ]
    }
  },
  methods: {
    useLodash(){
      var _ = require('lodash');
      console.log(_.find(this.users, function (o) {return o.age < 40})); 
      // {user: 'barney', age: 36, active: true},
      console.log(_.find(this.users, {'age': 1, 'active': true})); 
      // {user: 'pebbles', age: 1, active: true}
      console.log(_.filter(this.users, {'age': 1, 'active': true}));
      // [{user: 'pebbles', age: 1, active: true}]
      console.log(_.find(this.users, ['active', false]));
      // {user: 'fred', age: 40, active: false},
      console.log(_.filter(this.users, ['active', false]));
      // [{user: 'fred', age: 40, active: false}]
      console.log(_.filter(this.users, 'active'));
      // [{user: 'barney', age: 36, active: true},{user: 'pebbles', age: 1, active: true}]
      console.log(_.reject(this.users, 'active'));
      // [{user: 'fred', age: 40, active: false}]
    }
  },
  beforeMount(){
    this.useLodash()
  }
}
</script>

3.7 查找属性
_.uniq(array) 创建一个去重后的 array 数组副本。
参数：array 要检查的数组。

<script>
export default {
  data(){
    return{
      arr1 : [2, 1, 2, 1, 4, 2, 3],
      arr2 : [2, 1, 2, 1, 4, 2, 3]
    }
  },
  methods: {
    usePrimordial(arr){
      var newArr = [];
      for (var i = 0; i < arr.length; i++) {
        if(newArr.indexOf(arr[i]) == -1){
          newArr.push(arr[i]);
        }
      }
      console.log(newArr)  // [2,1,4,3]
    },
    useLodash(){
      var _ = require('lodash');
      let ldnewArr = _.uniq(this.arr1);
      console.log(ldnewArr) // [2,1,4,3]
    }
  },
  beforeMount(){
    this.usePrimordial(this.arr1)
    this.useLodash()
  }
}
</script>

_.uniqBy(array,[iteratee=_.identity]) 这个方法类似 _.uniq，除了它接受一个 iteratee（迭代函数），
调用每一个数组（array）的每个元素以产生唯一性计算的标准。
iteratee 调用时会传入一个参数：(value)。

<script>
export default {
  methods: {
    useLodash(){
      var _ = require('lodash');
      // Math.floor 只是向下取整，去重，并没有改变原有的数组，所以还是2.1和1.2，不是2和1。
      console.log(_.uniqBy([2.1, 1.2, 2.3], Math.floor)); // [2.1, 1.2]
      
      console.log(_.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x')); // [{ 'x': 1 }, { 'x': 2 }]
    }
  },
  beforeMount(){
    this.useLodash()
  }
}
</script>

3.8 模板插入
_.template([string=’’], [options={}])

<div id="container"></div>

<script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var data = [{name: '戈德斯文'}, {name: '柴硕'}, {name: '杨海月'}];
        var t = _.template($("#tpl").html());
        $("#container").html(t(data));
    });
</script>
<script type="text/template" id="tpl">
    <% _.each(obj,function(e,i){ %>
        <ul>
            <li><%= e.name %><%= i %></li>
        </ul>
    <%})%>
</script>

注意：这个 <script> 标签的 type 是 text/template，类似于 react 的 JSX 的写法，就是 js 和 html 可以混写，
用 <% %> 括起来的就是 js 代码，可以执行，直接写的就是 html 的标签，并且有类似 MVC 框架的的数据绑定，
在 <%= %> 中可以调用到数据呈现。