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 框架的的数据绑定， 在 <%= %> 中可以调用到数据呈现。
