# lodash

# 1. 介绍

发音:

  • low dash

文档:

# 2. get

语法:

  • lodash.get(object, path, [defaultValue])

作用:

  • 获取对象属性的值

示例:

import get from 'lodash.get';

const person = { hobby: [ { name: 'football' } ] };

console.log( get(person, 'hobby[0].name') ); // 'football'
console.log( get(person, [ 'hobby', 0, 'name' ]) ); // 'football'

# 3. set

语法:

  • lodash.set(object, path, value)

作用:

  • Sets the value at path of object

# 4. has

语法:

  • lodash.has(object, path)

作用:

  • Checks if path is a direct property of object.

# 5. hasIn

语法:

  • lodash.hasIn(object, path)

作用:

  • Checks if path is a direct or inherited property of object.

# 6. cloneDeep

语法:

  • lodash.cloneDeep(value)

作用:

  • 深拷贝

# 7. merge

语法:

  • lodash.merge(object, [sources])

作用:

  • 合并

# 8. debounce

语法:

lodash.debounce(func, [wait=0], [options={}])

作用:

  • 防抖
  • bounce [baʊns]

# 9. throttle

语法:

  • lodash.throttle(func, [wait=0], [options={}])
  • options.trailing = true, 等待时间结束后也会执行一次。(默认)

作用:

  • 节流
  • [ˈθrɒtl]

使用:

const fn = () => {
  console.log(Date.now());
};

// 三秒内,只执行一次。
const throttledFn = _.throttle(fn, 3 * 1000, { trailing: false });

setTimeout(throttledFn, 100);
setTimeout(throttledFn, 200);
setTimeout(throttledFn, 300);

# 10. isPlainObject

语法:

  • lodash.isPlainObject(value)

作用:

  • Checks if value is a plain object, that is, an object created by the Object constructor or one with a [[Prototype]] of null.

# 11. once

语法:

  • once(func)

作用:

  • 创建一个只能调用 func 一次的函数。 重复调用返回第一次调用的结果。
  • func 调用时, this 绑定到创建的函数,并传入对应参数。

示例:

var initialize = _.once(createApplication);
initialize();
initialize();
// `initialize` 只能调用 `createApplication` 一次。


// 在类中使用
class Test {
  url = '/api/user';

  getUserInfo = _.once(() => {
    return axios.post(this.url);
  });
}

# 12. template

语法:

  • template(str)

作用:

  • 创建一个预编译模板方法,可以插入数据到模板中 "interpolate" 分隔符相应的位置。
  • <%= data.html %> 可以插入不转义的 HTML

示例:

// 使用 ES 分隔符代替默认的 "interpolate" 分隔符
var compiled = _.template('hello ${ user }!');
compiled({ 'user': 'pebbles' });
// => 'hello pebbles!'

示例2:(嵌入 JS 代码)

const template = require('lodash.template');

const compiled = template(`\
<ul>\
<% users.forEach(function(user) { %>
  <li><%- user %></li>\
<% }); %>
</ul>\
`);

const html = compiled({ users: ['fred', 'barney'] });

console.log(html);
/* =>
<ul>
  <li>fred</li>
  <li>barney</li>
</ul>
*/

# 13. find

语法:

  • _.find(collection, [predicate=_.identity], [fromIndex=0])

说明:

  • 从 列表 中查找对象,没找到返回 undefined

示例:

var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];
 
_.find(users, function(o) { return o.age < 40; });
// => object for 'barney'
 
// The `_.matches` iteratee shorthand.
_.find(users, { 'age': 1, 'active': true });
// => object for 'pebbles'
 
// The `_.matchesProperty` iteratee shorthand.
_.find(users, ['active', false]);
// => object for 'fred'
 
// The `_.property` iteratee shorthand.
_.find(users, 'active');
// => object for 'barney'

# 14. sortBy

说明:

  • 返回数组副本

示例:

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]]

# 15. groupBy

说明:

  • 对数组进行分组

示例:

_.groupBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': [4.2], '6': [6.1, 6.3] }
 
// The `_.property` iteratee shorthand.
_.groupBy(['one', 'two', 'three'], 'length');
// => { '3': ['one', 'two'], '5': ['three'] }

// 给 对象数组 进行分组
_.groupBy(
  [
    { group: '1', user: 'zhangsan1' },
    { group: '2', user: 'zhangsan2' },
    { group: '2', user: 'zhangsan3' },
    { group: '3', user: 'zhangsan4' },
  ], 
  'group'
);
/* =>
{
  '1': [
    { group: '1', user: 'zhangsan1' },
  ],
  '2': [
    { group: '2', user: 'zhangsan2' },
    { group: '2', user: 'zhangsan3' },
  ],
  '3': [
    { group: '3', user: 'zhangsan4' },
  ]
}
*/

# 16. isEmpty

Checks if value is an empty object, collection, map, or set.

_.isEmpty(null);
// => true
 
_.isEmpty(true);
// => true
 
_.isEmpty(1); // !!!!!! 基本类型返回 true
// => true
 
_.isEmpty([1, 2, 3]);
// => false
 
_.isEmpty({ 'a': 1 });
// => false

# 17. findIndex

从 左往右 找第一个匹配元素的索引

var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];
 
_.findIndex(users, function(o) { return o.user == 'barney'; });
// => 0
 
// The `_.matches` iteratee shorthand.
_.findIndex(users, { 'user': 'fred', 'active': false });
// => 1
 
// The `_.matchesProperty` iteratee shorthand.
_.findIndex(users, ['active', false]);
// => 0
 
// The `_.property` iteratee shorthand.
_.findIndex(users, 'active');
// => 2

# 18. findLastIndex

从 右往左 找第一个匹配元素的索引

var users = [
  { 'user': 'barney',  'active': true },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': false }
];
 
_.findLastIndex(users, function(o) { return o.user == 'pebbles'; });
// => 2
 
// The `_.matches` iteratee shorthand.
_.findLastIndex(users, { 'user': 'barney', 'active': true });
// => 0
 
// The `_.matchesProperty` iteratee shorthand.
_.findLastIndex(users, ['active', false]);
// => 2
 
// The `_.property` iteratee shorthand.
_.findLastIndex(users, 'active');
// => 0

# 19. uniq

去重。对元素的值 进行去重

uniq([2, 1, 2]);
// => [2, 1]

# 20. uniqBy

去重。传入迭代器,基于迭代器返回的 数值 进行去重

// 指定元素的某个属性的值作为 比较值
uniqBy(
  [
    { 'x': 1 }, 
    { 'x': 2 }, 
    { 'x': 1 }
  ], 
  'x'
);

// => 
// [
//    { 'x': 1 }, 
//    { 'x': 2 }
// ]


uniqBy([2.1, 1.2, 2.3], Math.floor);
// => [2.1, 1.2]

# 21. uniqWith

去重。传入比较器,基于比较器返回的 布尔值 进行去重

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];
 
_.uniqWith(objects, _.isEqual);
// => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]

# 22. remove

删除匹配的元素。会改变原始数组, 返回已删除的元素组成的数组。

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]

# 23. escape

转义 HTML 字符串,转义如下符号:

  • & --> &amp;
  • < --> &lt;
  • > --> &gt;
  • " (双引号) --> &quot;
  • ' (单引号) --> &#39;
escape('fred, barney, & pebbles');
// => 'fred, barney, &amp; pebbles'

# 24. unescape

反转义:

  • &amp; --> &
  • &lt; --> <
  • &gt; --> >
  • &quot; --> " (双引号)
  • &#39; --> ' (单引号)
unescape('fred, barney, &amp; pebbles');
// => 'fred, barney, & pebbles'
本章目录