Gauss Zhou

# 一文带你入门 Lodash

Lodash 是一个现代 JavaScript 工具库，提供了一系列高效的工具函数，帮助开发者更轻松地操作数组、对象、函数等等。

它的功能设计上借鉴了 Underscore.js，但提供了更多的灵活性和更好的性能。

这里我们只介绍 ES6+ 没有提供的方法

# Array

  • chunk 分块，将一个数组中的元素按一定大小分割
  • groupBy 分组，将一个数组中的元素按一定规则分组
  • zip 转置，创建一个分组元素数组，其中第一个元素包含给定数组的第一个元素，第二个元素包含给定数组的第二个元素，依此类推。
chunk(['a', 'b', 'c', 'd'], 2) // => [['a', 'b'], ['c', 'd']]
chunk(['a', 'b', 'c', 'd'], 3); // => [['a', 'b', 'c'], ['d']]
groupBy(['one', 'two', 'three'], 'length'); // => { '3': ['one', 'two'], '5': ['three'] }
zip(['a', 'b'], [1, 2], [true, false]); // => [['a', 1, true], ['b', 2, false]]

# Collection

  • intersection 交集
  • union 并集
  • difference 补集，创建一个不包含在其他给定数组中的数组值
  • xor 差集，创建一个唯一值数组，该数组是给定数组的对称差。
intersection([2, 1], [2, 3]) // => [2]
union([2], [1, 2]); // => [2, 1]
difference([2, 1], [2, 3]); // => [1]
xor([2, 1], [2, 3]); // => [1, 3]

# Object

  • has 判断对象之后具有某个属性，支持路径表达式
  • get 支持路径表达式
  • set 支持路径表达式，注意这个方法会修改原对象
  • merge 递归版的 assign，注意这个方法会修改原对象
var object = { 'a': { 'b': 2 } };
has(object, 'a'); // => true

var object = { 'a': [{ 'b': { 'c': 3 } }] };
get(object, 'a[0].b.c'); // => 3

var object = { 'a': [{ 'b': { 'c': 3 } }] };
set(object, 'a[0].b.c', 4);
console.log(object.a[0].b.c); // => 4

var object = {
  'a': [{ 'b': 2 }, { 'd': 4 }]
};
 
var other = {
  'a': [{ 'c': 3 }, { 'e': 5 }]
};
 
_.merge(object, other);
// => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }

# Math

  • max 求最大值，用法 max(list) 相当于 Math.max(...list)
  • maxBy 求最大值，用法 maxBy(list, callback) 相当于 Math.max(...list.map(callback))
  • min 求最小值，不在赘述
  • minBy 求最小值，不在赘述
  • sum 求和
  • sumBy 求和，数组对象
  • mean 求均值
  • meanBy 求均值，数组对象
sum([4, 2, 8, 6]); // => 20
sumBy([{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }], function(o) { return o.n; }); // => 20
mean([4, 2, 8, 6]); // => 5
meanBy([{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }], function(o) { return o.n; });// => 5

# Function

  • curry 柯里化，只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数
  • debounce 防抖，创建一个 debounced 函数，该函数将调用 func 延迟到自上次调用 debounced 函数以来经过了 wait 毫秒之后
  • throttle 节流，创建一个节流函数，该函数每等待几毫秒最多调用一次 func
// 函数柯里化
var add = curry(function(x, y) {
    return x + y;
})
var increment = add(1);
var addTen = add(10);
increment(2); // 3
addTen(2); // 12

// 按钮防抖
jQuery(element).on('click', debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}));
// 按钮节流
jQuery(element).on('click', throttle(renewToken, 300000, { 
  'trailing': false 
}));

# String

  • camelCase 小驼峰
  • capitalize 大驼峰
  • kebabCase 中划线
  • snakeCase 下划线
camelCase('Foo Bar'); // => 'fooBar'  in js java
capitalize('FRED'); // => 'Fred' in class
kebabCase('Foo Bar'); // => 'foo-bar' in css
snakeCase('Foo Bar'); // => 'foo_bar' in python

# Util

  • range 创建一个从开始到结束（但不包括结束）的数字数组（正数和/或负数）。
  • times 调用迭代器 n 次，返回每次调用的结果数组。调用迭代器时会使用索引作为参数；
range(4); // => [0, 1, 2, 3]
range(1, 5);// => [1, 2, 3, 4]
times(3, String); // => ['0', '1', '2']

Array
Collection
Object
Math
Function
String
Util