# 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
本章目录