标签：指定 接受 tricks firefox 定位 bool 产生 style 为什么
Lodash是一个著名的javascript原生库，不需要引入其他第三方依赖。是一个意在提高开发者效率,提高JS原生方法性能的JS库。简单的说就是，很多方法lodash已经帮你写好了，直接调用就行，不用自己费尽心思去写了，而且可以统一方法的一致性。Lodash使用了一个简单的 _ 符号，就像Jquery的 $ 一样，十分简洁。 类似的还有Underscore.js和Lazy.js
chrome 43往上
Firefox 38往上
IE 6-11
MS Edge
Safari 5往上
（几乎涵盖现在市面上可以见到的大部分浏览器）
<script src="lodash.js"></script> 直接下载下来引入，或者使用cdn
$ npm i -g npm
$ npm i --save lodash
先全局安装，在单独安装到项目中
var _ = require(‘lodash‘);
通过使用数组，数字，对象，字符串等方法，Lodash使JavaScript变得更简单。
（参考版本lodash v4.16.1）
<script type="text/javascript"> console.log(‘------- javascript -------‘); //js原生的循环方法 for(var i = 0; i < 5; i++){ console.log(i); } console.log(‘------- lodash -------‘); //ladash的times方法 _.times(5,function(a){ console.log(a); }); </script>
for语句是执行循环的不二选择，但在上面代码的使用场景下，_.times()的解决方式更加简洁和易于理解。
<script type="text/javascript"> var ownerArr = [{ "owner": "Colin", "pets": [{"name": "dog1"}, {"name": "dog2"}] }, { "owner": "John", "pets": [{"name": "dog3"}, {"name": "dog4"}] }]; var jsMap = ownerArr.map(function (owner) { return owner.pets[0].name; }); console.log(‘------- jsMap -------‘); console.log(jsMap); var lodashMap = _.map(ownerArr, ‘pets[0].name‘); console.log(‘------- lodashMap -------‘); console.log(lodashMap); </script>
Lodash中的_.map方法和JavaScript中原生的数组方法非常的像，但它还是有非常有用的升级。 你可以通过一个字符串而不是回调函数来浏览深度嵌套的对象属性。
<script type="text/javascript"> var objA = { "name": "戈德斯文" }; var objB = _.cloneDeep(objA); console.log(objA); console.log(objB); console.log(objA === objB); </script>
深度克隆JavaScript对象是困难的，并且也没有什么简单的解决方案。你可以使用原生的解决方案:JSON.parse(JSON.stringify(objectToClone)) 进行深度克隆。但是，这种方案仅在对象内部没有方法的时候才可行。
<script type="text/javascript"> function getRandomNumber(min, max){ return Math.floor(Math.random() * (max - min)) + min; } console.log(getRandomNumber(15, 20)); console.log(_.random(15, 20)); </script>
Lodash中的 _.random 方法要比上面的原生方法更强大与灵活。你可以只传入一个参数作为最大值， 你也可以指定返回的结果为浮点数_.random(15,20,true)
<script type="text/javascript"> Object.prototype.extend = function(obj) { for (var i in obj) { if (obj.hasOwnProperty(i)) { //判断被扩展的对象有没有某个属性， this[i] = obj[i]; } } }; var objA = {"name": "戈德斯文", "car": "宝马"}; var objB = {"name": "柴硕", "loveEat": true}; objA.extend(objB); console.log(objA); console.log(_.assign(objA, objB)); </script>
_.assign 方法也可以接收多个参数对象进行扩展，都是往后面的对象上合并
<script type="text/javascript"> var smartTeam = ["戈德斯文", "杨海月", "柴硕", "师贝贝"]; function randomSmarter(smartTeam){ var index = Math.floor(Math.random() * smartTeam.length); return smartTeam[index]; } console.log(randomSmarter(smartTeam)); // Lodash console.log(_.sample(smartTeam)); console.log(_.sampleSize(smartTeam,2)); </script>
此外，你也可以指定随机返回元素的个数_.sampleSize(smartTeam,n)，n为需要返回的元素个数
<script type="text/javascript"> var smartPerson = { ‘name‘: ‘戈德斯文‘, ‘gender‘: ‘male‘ }, smartTeam = ["戈德斯文", "杨海月", "柴硕", "师贝贝"]; console.log(_.includes(smartPerson, ‘戈德斯文‘)); console.log(_.includes(smartTeam, ‘杨海月‘)); console.log(_.includes(smartTeam, ‘杨海月‘,2)); </script>
_.includes()第一个参数是需要查询的对象，第二个参数是需要查询的元素，第三个参数是开始查询的下标
<script type="text/javascript"> _([1, 2]).forEach(function(value) { console.log(value); }); _.forEach([1, 3] , function(value, key) { console.log(key,value); }); </script>
这两种方法都会分别输出‘1’和‘2’，不仅是数组，对象也可以，数组的是后key是元素的下标，当传入的是对象的时候，key是属性，value是值
_.map()
<script type="text/javascript"> function square(n) { return n * n; } console.log(_.map([4, 8], square)); // => [16, 64] console.log(_.map({ ‘a‘: 4, ‘b‘: 8 }, square)); // => [16, 64] (iteration order is not guaranteed) var users = [ { ‘user‘: ‘barney‘ }, { ‘user‘: ‘fred‘ } ]; // The `_.property` iteratee shorthand. console.log(_.map(users, ‘user‘)); // => [‘barney‘, ‘fred‘] </script>
_.isEmpty()
<script type="text/javascript"> _.isEmpty(null); // => true _.isEmpty(true); // => true _.isEmpty(1); // => true _.isEmpty([1, 2, 3]); // => false _.isEmpty({ ‘a‘: 1 }); // => false </script>
_.find()、_.filter()、_.reject()
<script type="text/javascript"> var users = [ {‘user‘: ‘barney‘, ‘age‘: 36, ‘active‘: true}, {‘user‘: ‘fred‘, ‘age‘: 40, ‘active‘: false}, {‘user‘: ‘pebbles‘, ‘age‘: 1, ‘active‘: true} ]; console.log(_.find(users, function (o) { return o.age < 40; })); console.log(_.find(users, {‘age‘: 1, ‘active‘: true})); console.log(_.filter(users, {‘age‘: 1, ‘active‘: true})); console.log(_.find(users, [‘active‘, false])); console.log(_.filter(users, [‘active‘, false])); console.log(_.find(users, ‘active‘)); console.log(_.filter(users, ‘active‘)); </script>
_.find()第一个返回真值的第一个元素。 _.filter()返回真值的所有元素的数组。 _.reject()是_.filter的反向方法，不返回真值的（集合）元素
_.uniq(array)创建一个去重后的array数组副本。
参数 array (Array): 要检查的数组。
返回新的去重后的数组
<script type="text/javascript"> var arr1 = [2, 1, 2]; var arr2 = _.uniq(arr1); function unique(arr) { var newArr = []; for (var i = 0; i < arr.length; i++) { if(newArr.indexOf(arr[i]) == -1){ newArr.push(arr[i]); } } return newArr; } console.log(arr1); console.log(arr2); console.log(unique(arr1)); </script>
_.uniqBy(array,[iteratee=_.identity])这个方法类似 _.uniq，除了它接受一个 iteratee（迭代函数），调用每一个数组（array）的每个元素以产生唯一性计算的标准。iteratee 调用时会传入一个参数：(value)。<script type="text/javascript"> 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 }] </script>
Math.floor只是向下取整，去重，并没有改变原有的数组，所以还是2.1和1.2，不是2和1。_.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>
14、
_.throttle(func, [wait=0], [options={}])
创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。 该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options 对象决定如何调用 func 方法， options.leading 与|或 options.trailing 决定 wait 前后如何触发。 func 会传入最后一次传入的参数给这个函数。 随后调用的函数返回是最后一次 func 调用的结果。 注意: 如果 leading 和 trailing 都设定为 true 则 func 允许 trailing 方式调用的条件为: 在 wait 期间多次调用。 如果 wait 为 0 并且 leading 为 false, func调用将被推迟到下一个点，类似setTimeout为0的超时。
查看 David Corbacho‘s article 了解 _.throttle 与 _.debounce 的区别。
func (Function): 要节流的函数。[wait=0] (number): 需要节流的毫秒。[options={}] (Object): 选项对象。[options.leading=true] (boolean): 指定调用在节流开始前。[options.trailing=true] (boolean): 指定调用在节流结束后。// 避免在滚动时过分的更新定位 jQuery(window).on(‘scroll‘, _.throttle(updatePosition, 100)); // 点击后就调用 `renewToken`，但5分钟内超过1次。 var throttled = _.throttle(renewToken, 300000, { ‘trailing‘: false }); jQuery(element).on(‘click‘, throttled); // 取消一个 trailing 的节流调用。 jQuery(window).on(‘popstate‘, throttled.cancel);
lodash入门，使用 。throttle和debounce
标签：指定 接受 tricks firefox 定位 bool 产生 style 为什么
原文地址：https://www.cnblogs.com/yuanjili666/p/12170683.html
