资讯专栏INFORMATION COLUMN

loadsh简介

clasnake / 1663人阅读

摘要:愚人码头注即创建一个新数组,这个数组中的值,为第一个数字参数排除了给定数组中的值。如果迭代函数显式的返回,迭代会提前退出。如此方法类似于,除了它允许指定迭代函数结果如何排序。

loadsh简介

      Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。
Lodash 的模块化方法 非常适用于:

遍历 array、object 和 string

对值进行操作和检测

创建符合功能的函数

1、 lodash的引用

npm i -g npm
npm i --save lodash
import _ from "lodash"

2、 lodash的常用方法

数组 Array

_.difference(array, [values])
创建一个具有唯一array值的数组,每个值不包含在其他给定的数组中。(愚人码头注:即创建一个新数组,这个数组中的值,为第一个数字(array 参数)排除了给定数组中的值。)该方法使用 SameValueZero做相等比较。结果值的顺序是由第一个数组中的顺序确定。

如: _.difference([2, 1, 1994], [4, 2]);
 // => [1, 1994] 

_.remove(array, [predicate=_.identity])
移除数组中predicate(断言)返回为真值的所有元素,并返回移除元素组成的数组。predicate(断言) 会传入3个参数: (value, index, array)。

 如:var array = [1, 2, 3, 4];
 var evens = _.remove(array, function(n) {
 return n % 2 == 0;
 });
 console.log(array);
 // => [1, 3]
  
 console.log(evens);
 // => [2, 4]

_.uniq(array)
创建一个去重后的array数组副本。使用了 SameValueZero 做等值比较。只有第一次出现的元素才会被保留。

 如:_.uniq([2, 1, 2]);
 // => [2, 1]

_.last(array)
获取array中的最后一个元素。

 如:_.last([1, 2, 3]);
 // => 3

集合 Collection

_.forEach(collection, [iteratee=_.identity])
调用 iteratee 遍历 collection(集合) 中的每个元素, iteratee 调用3个参数: (value, index|key, collection)。 如果迭代函数(iteratee)显式的返回 false ,迭代会提前退出。

  如:_([1, 2]).forEach(function(value) {
    console.log(value);
  });
  // => Logs `1` then `2`.
   
  _.forEach({ "a": 1, "b": 2 }, function(value, key) {
    console.log(key);
  });
  // => Logs "a" then "b" (iteration order is not guaranteed).

_.filter(collection, [predicate=_.identity])
遍历 collection(集合)元素,返回 predicate(断言函数)返回真值 的所有元素的数组。 predicate(断言函数)调用三个参数:(value, index|key, collection)。

  如:var users = [
    { "user": "barney", "age": 36, "active": true },
    { "user": "fred",   "age": 40, "active": false }
  ];
   
  _.filter(users, function(o) { return !o.active; });
  // => objects for ["fred"]
   
  // The `_.matches` iteratee shorthand.
  _.filter(users, { "age": 36, "active": true });
  // => objects for ["barney"]
   
  // The `_.matchesProperty` iteratee shorthand.
  _.filter(users, ["active", false]);
  // => objects for ["fred"]
   
  // The `_.property` iteratee shorthand.
  _.filter(users, "active");
  // => objects for ["barney"]

_.groupBy(collection, [iteratee=_.identity])
创建一个对象,key 是 iteratee 遍历 collection(集合) 中的每个元素返回的结果。 分组值的顺序是由他们出现在 collection(集合) 中的顺序确定的。每个键对应的值负责生成 key 的元素组成的数组。iteratee 调用 1 个参数: (value)。

  如:var users = [
     { "user": "barney", "age": 36, "active": true },
     { "user": "fred",   "age": 40, "active": false }
   ];
   _.groupBy(users, "user");
   // => {"barney":[{"user":"barney","age":36,"active":true}],"fred":[{"user":"fred","age":40,"active":false}]}
   
   

_.includes(collection, value, [fromIndex=0])
检查 value(值) 是否在 collection(集合) 中。如果 collection(集合)是一个字符串,那么检查 value(值,子字符串) 是否在字符串中, 否则使用 SameValueZero 做等值比较。 如果指定 fromIndex 是负数,那么从 collection(集合) 的结尾开始检索。

  如:_.includes([1, 2, 3], 1);
      // => true
       
      _.includes([1, 2, 3], 1, 2);
      // => false
       
      _.includes({ "user": "fred", "age": 40 }, "fred");
      // => true
       
      _.includes("pebbles", "eb");
      // => true
      
      

_.orderBy(collection, [iteratees=[_.identity]], [orders])
此方法类似于_.sortBy,除了它允许指定 iteratee(迭代函数)结果如何排序。 如果没指定 orders(排序),所有值以升序排序。 否则,指定为"desc" 降序,或者指定为 "asc" 升序,排序对应值。

  如:var users = [
    { "user": "fred",   "age": 48 },
    { "user": "barney", "age": 34 },
    { "user": "fred",   "age": 40 },
    { "user": "barney", "age": 36 }
  ];
   
  // 以 `user` 升序排序 再  `age` 以降序排序。
  _.orderBy(users, ["user", "age"], ["asc", "desc"]);
  // => objects for [["barney", 36], ["barney", 34], ["fred", 48], ["fred", 40]]
  

_.sortBy(collection, [iteratees=[_.identity]])
创建一个元素数组。 以 iteratee 处理的结果升序排序。 这个方法执行稳定排序,也就是说相同元素会保持原始排序。 iteratees 调用1个参数: (value)。

  如:var users = [
    { "user": "fred",   "age": 48 },
    { "user": "barney", "age": 36 },
    { "user": "fred",   "age": 40 },
    { "user": "barney", "age": 34 }
  ];
   
  _.sortBy(users, function(o) { return o.user; });
  // => objects for [["barney", 36], ["barney", 34], ["fred", 48], ["fred", 40]]
   
  _.sortBy(users, ["user", "age"]);
  // => objects for [["barney", 34], ["barney", 36], ["fred", 40], ["fred", 48]]
   
  _.sortBy(users, "user", function(o) {
    return Math.floor(o.age / 10);
  });
  // => objects for [["barney", 36], ["barney", 34], ["fred", 48], ["fred", 40]]
  
  

_.debounce(func, [wait=0], [options={}])
创建一个 debounced(防抖动)函数,该函数会从上一次被调用后,延迟 wait 毫秒后调用 func 方法。 debounced(防抖动)函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options(选项) 对象决定如何调用 func 方法,options.leading 与|或 options.trailing 决定延迟前后如何触发(愚人码头注:是 先调用后等待 还是 先等待后调用)。 func 调用时会传入最后一次提供给 debounced(防抖动)函数 的参数。 后续调用的 debounced(防抖动)函数返回是最后一次 func 调用的结果。

注意: 如果 leading 和 trailing 选项为 true, 则 func 允许 trailing 方式调用的条件为: 在 wait 期间多次调用防抖方法。

如果 wait 为 0 并且 leading 为 false, func调用将被推迟到下一个点,类似setTimeout为0的超时。

  如:// 避免窗口在变动时出现昂贵的计算开销。
  jQuery(window).on("resize", _.debounce(calculateLayout, 150));
   
  // 当点击时 `sendMail` 随后就被调用。
  jQuery(element).on("click", _.debounce(sendMail, 300, {
    "leading": true,
    "trailing": false
  }));
   
  // 确保 `batchLog` 调用1次之后,1秒内会被触发。
  var debounced = _.debounce(batchLog, 250, { "maxWait": 1000 });
  var source = new EventSource("/stream");
  jQuery(source).on("message", debounced);
   
  // 取消一个 trailing 的防抖动调用
  jQuery(window).on("popstate", debounced.cancel);

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100516.html

相关文章

  • [译] npm, yarn以及pnpm的不同之处

    摘要:以及的不同之处原文译者我并不是一个包管理器的专家。因此如果一年后我运行,会安装版本号为的最新版本的。这会导致循环依赖以及增加了版本不匹配的可能。从我目前收集的来看,的最初的主要目的是针对由于之前章节提及的相关行为导致的安装的不确定性。 npm, yarn以及pnpm的不同之处 原文:Overview of differences between npm, yarn and pnpm ...

    Betta 评论0 收藏0
  • 理解节流和防抖

    摘要:所以针对此类事件则需要进行节流,或者防抖动处理。节流判断是否已空闲,如果在执行中,则直接函数节流二防抖对于一定时间段内的连续的函数调用,只执行一次原理其实就是一个定时器,当我们触发一个事件时,让这个事件延迟一会在执行。 在浏览器dom事件里面,一些事件会随着用户的操作不间断的触发,比如:为一个元素绑定拖拽事件,为页面绑定resize事件(重新调整浏览器窗口大小),页面滚动。如果dom操...

    zebrayoung 评论0 收藏0
  • 前端那些小众而又精美的网站及工具

    摘要:写此文的目的是为了总结在开发中能增加我们开发速度及能给我们带来方便的工具与网站及一些小众框架只限于简介不负责教程如有相应的教程希望大家自荐或推荐我在这里感激不尽让我们发现美并记录它第一次写文章请多多包涵如有我没有写到的但又是一些好用的工具及 写此文的目的是为了总结在开发中能增加我们开发速度及能给我们带来方便的工具与网站及一些小众框架只限于简介不负责教程如有相应的教程希望大家自荐或推荐我...

    Edison 评论0 收藏0
  • 前端那些小众而又精美的网站及工具

    摘要:写此文的目的是为了总结在开发中能增加我们开发速度及能给我们带来方便的工具与网站及一些小众框架只限于简介不负责教程如有相应的教程希望大家自荐或推荐我在这里感激不尽让我们发现美并记录它第一次写文章请多多包涵如有我没有写到的但又是一些好用的工具及 写此文的目的是为了总结在开发中能增加我们开发速度及能给我们带来方便的工具与网站及一些小众框架只限于简介不负责教程如有相应的教程希望大家自荐或推荐我...

    tigerZH 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<